/* Szeramics — coming soon page.
   Built from Figma: Szeramics › Desktop - 15 (node 16015:2), 1440px wide. */

:root {
  --ink: #1d241d;        /* Primary */
  --sand: #e4e0dd;       /* header on hover */
  --page: #efeef1;
  --white: #fff;

  /* The design uses "Holt Sans Light", which is only available as a desktop
     demo font. Italiana is the closest free web font; swap it here once a
     web licence for Holt Sans is in place. */
  --font-display: "Holt Sans Light", "Italiana", "Didot", serif;
  --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: 100px;
  --hero-min-height: 720px;
  --card-width: 320px;
}

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

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

/* Header + hero always fill the window; the hero takes whatever height
   the header leaves, but never less than --hero-min-height. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  /* The vase photo sits behind both the header and the hero, so the
     header blends into it seamlessly until hovered. */
  background: #a6978a url("assets/hero-vase.jpg") right center / cover no-repeat;
}

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

a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

p, h1, figure { margin: 0; }

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1;
}

/* Header ---------------------------------------------------------------- */

.bar {
  background: var(--sand);
  padding-inline: var(--gutter);
}

.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-block: 8px;
  background: transparent;
  transition: background-color 0.3s ease;
}

.site-header:hover,
.site-header:focus-within { background: var(--sand); }

.site-nav { font-size: 14px; }

.social { justify-self: end; }
.social a { display: block; }

/* Hero ------------------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
  flex: 1 0 auto;
  min-height: var(--hero-min-height);
  padding: 72px var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--white);
}

.hero-intro { position: relative; z-index: 1; }

.hero-title {
  font-size: clamp(64px, 11.75vw, 169px);
  white-space: nowrap;
}

.hero-byline {
  font-size: clamp(22px, 2.25vw, 32px);
  font-weight: 200;
  line-height: normal;
}

.hero-note {
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 200;
  line-height: normal;
}

/* Photo card: bleeds off the bottom of the hero, shadow thrown down-right. */
.hero-card {
  position: absolute;
  left: var(--gutter);
  bottom: 0;
  width: var(--card-width);
  aspect-ratio: 640 / 714;
  box-shadow: 22px 19px 27.6px rgba(0, 0, 0, 0.2);
}

/* On hover the card grows ~28%, anchored at its bottom-left corner so it
   expands up and to the right. Mouse/trackpad only; touch screens skip it. */
@media (hover: hover) {
  .hero-card {
    transform-origin: left bottom;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
  }

  .hero-card:hover {
    transform: scale(1.28);
    z-index: 2;
    box-shadow: 28px 24px 36px rgba(0, 0, 0, 0.25);
  }
}

.hero-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.hero-caption {
  align-self: flex-end;
  position: relative;
  z-index: 1;
  font-size: 28px;
}

/* Responsive ------------------------------------------------------------ */

/* Desktop: the page always fits the window with no scrolling, from a
   1280px laptop up to large monitors. The hero is exactly the space the
   header leaves, and everything in it is sized from the hero's own width
   (cqw) and height (cqh), using whichever is tighter. The ratios are the
   Figma frame's: a 1440 x 800 hero with 169px title, 72px padding and a
   320px card. */
@media (min-width: 721px) {
  :root {
    --gutter: clamp(48px, 6.95vw, 200px);
    --logo: clamp(64px, 5vw, 112px);
  }

  .site-header .logo img { width: var(--logo); height: var(--logo); }
  .site-nav { font-size: clamp(14px, 0.98vw, 20px); }
  .social img { width: clamp(24px, 1.67vw, 34px); height: auto; }

  body { height: 100vh; height: 100svh; min-height: 560px; }

  .hero {
    container-type: size;
    min-height: 0;
    padding: 0;
  }

  /* Children of a size container can't use its cq units on the container
     itself, so padding lives on an inner layer. */
  .hero-intro,
  .hero-caption { position: absolute; z-index: 1; }

  .hero-intro {
    top: min(5cqw, 9cqh);
    left: var(--gutter);
  }

  .hero-caption {
    right: var(--gutter);
    bottom: min(5cqw, 9cqh);
    font-size: max(20px, min(1.95cqw, 3.5cqh));
  }

  .hero-title { font-size: min(11.75cqw, 21cqh); }
  .hero-byline { font-size: max(18px, min(2.22cqw, 4cqh)); }
  .hero-note { font-size: max(14px, min(1.39cqw, 2.5cqh)); }

  .hero-card { width: min(22.2cqw, 40cqh); }
}

@media (max-width: 720px) {
  :root {
    --gutter: 16px;
    --hero-min-height: 480px;
    --card-width: 168px;
  }

  .site-header { padding-block: 3px; }
  .site-header .logo img { width: 56px; height: 56px; }

  .hero { padding-block: 40px 24px; }

  .hero-caption { font-size: 22px; }

}