/* Pennant Property Group: the "coming soon" page for pennantpg.com (src/coming-soon.mjs).
   A teaser: the logo and one line on paper, the red clay photo framed beside it (as on the home
   hero's Ledger), a pennant-red rule on top and a red band of contact details at the foot.
   Colors from tokens.css; everything else is here, so the page needs no other file. */

:root {
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --pad: clamp(1.25rem, 0.5rem + 2.8vw, 3rem);
  --red: var(--color-accent-solid);
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  display: grid;
  grid-template-rows: 1fr auto;
  min-block-size: 100vh;
  min-block-size: 100svh;
  margin: 0;
  border-top: 6px solid var(--red);
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, p, figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--color-selection-bg); color: var(--color-selection-text); }
:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; }

/* Wide screens: paper on the left, the photo on the right, filling the height above the band. */
.teaser {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "brand photo";
  column-gap: clamp(2rem, 0.5rem + 5vw, 6rem);
  padding: var(--pad);
}
.teaser__brand { grid-area: brand; align-self: center; display: grid; justify-items: start; gap: 1.75rem; }
.teaser__logo img { inline-size: clamp(13rem, 8.5rem + 9vw, 19rem); }
/* Wide-set gold capitals led by a gold rule: the site's eyebrow, echoing the logo's PROPERTY GROUP line. */
.teaser__line {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.18em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--color-brand-detail-text);
}
.teaser__line::before { content: ""; flex: none; inline-size: 1.75rem; block-size: 2px; background: var(--color-brand-detail); }
.teaser__photo { grid-area: photo; position: relative; overflow: hidden; min-block-size: 20rem; background: var(--navy-950); }
.teaser__photo img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 54% 50%; }
/* The logo's inset keyline, drawn over the photo. */
.teaser__photo::after { content: ""; position: absolute; inset: 0.875rem; border: 1.5px solid rgb(255 255 255 / 0.85); pointer-events: none; }

/* The red band: the current pennantpg.com's footer details, in the eyebrow's wide capitals. */
.teaser__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem 2rem;
  padding: 1.25rem var(--pad);
  background: var(--red);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}
.teaser__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 1.25rem; }
.teaser__contact > * { display: inline-flex; align-items: center; gap: 1.25rem; }
.teaser__contact > * + *::before { content: ""; inline-size: 4px; block-size: 4px; background: rgb(255 255 255 / 0.6); }
.teaser__foot a { color: inherit; text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.45); text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
@media (hover: hover) { .teaser__foot a:hover { text-decoration-color: currentColor; } }
.teaser__foot :focus-visible { outline-color: #fff; }
.teaser__email { text-transform: none; letter-spacing: 0.04em; }
.teaser__copy { color: rgb(255 255 255 / 0.82); }

/* Narrow screens: logo and line on top, the photo filling the middle, the details stacked. */
@media (max-width: 61.99rem) {
  .teaser { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "brand" "photo"; row-gap: 1.75rem; }
  .teaser__brand { align-self: start; gap: 1.25rem; }
  .teaser__logo img { inline-size: clamp(11rem, 8rem + 12vw, 15rem); }
  .teaser__line { font-size: 0.75rem; letter-spacing: 0.14em; }
  .teaser__photo { min-block-size: 16rem; }
  .teaser__foot { flex-direction: column; align-items: flex-start; gap: 0.5rem; font-size: 0.6875rem; letter-spacing: 0.08em; }
  .teaser__contact { flex-direction: column; align-items: flex-start; }
  .teaser__contact > * + *::before { display: none; }
}

/* A quiet arrival: the photo settles in, then the words. */
@media (prefers-reduced-motion: no-preference) {
  .teaser__photo img { animation: teaser-photo 1.6s var(--ease-out) both; }
  .teaser__brand > * { animation: teaser-in 0.9s var(--ease-out) both; }
  .teaser__line { animation-delay: 0.15s; }
  @keyframes teaser-photo { from { opacity: 0; scale: 1.04; } }
  @keyframes teaser-in { from { opacity: 0; translate: 0 0.625rem; } }
}