:root{
  --indigo:#1B2A3C; --vermillion:#D1422D; --gold:#C9A44A; --ivory:#F5F0E6;
  --teal:#4D6F73; --cyan:#73D0E7; --rose:#FA8EA8; --orange:#E67C2E;
}

html,body{
  height:100%;
  margin:0;
  font-family: Georgia, "Times New Roman", serif;
}

/* =========================================================
   Background — Hybrid tiling for crispness across devices
   ========================================================= */

/* Base: desktop & iPad → 1024px tile */
body{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  min-height:100dvh;
  padding-top:10vh;

  background-color: var(--indigo);

  background-image: url("../img/tile1024.png");
  background-image: image-set(
    url("../img/tile1024.webp") type("image/webp") 1x,
    url("../img/tile1024.png")  type("image/png")  1x
  );

  background-repeat: repeat;
  background-size: 640px 640px;        /* balanced default */
  background-position: top center;
  background-attachment: scroll;

  color: var(--ivory);
}

/* iOS/iPadOS fix */
@supports (-webkit-overflow-scrolling: touch) {
  body { background-attachment: scroll; }
}

/* HiDPI: make tiles smaller for sharpness */
@media (min-resolution: 2dppx) {
  body { background-size: 512px 512px; }
}

/* Very large desktops: enlarge tiles to reduce busyness */
@media (min-width: 1600px) {
  body { background-size: 768px 768px; }
}
@media (min-width: 2200px) {
  body { background-size: 896px 896px; }
}

/* Small iPhones — PORTRAIT: 512px tile rendered smaller */
@media (orientation: portrait) and (max-width: 430px) and (hover: none) and (pointer: coarse) {
  body{
    background-image: url("../img/tile512.png");
    background-image: image-set(
      url("../img/tile512.webp") type("image/webp") 1x,
      url("../img/tile512.png")  type("image/png")  1x
    );
    background-repeat: repeat;
    background-size: 256px 256px;
    background-position: top center;
  }
}

/* Large phones / iPad PORTRAIT: 1024px tile, scaled appropriately */
@media (orientation: portrait) and (min-width: 431px) and (hover: none) and (pointer: coarse) {
  body{
    background-image: url("../img/tile1024.png");
    background-image: image-set(
      url("../img/tile1024.webp") type("image/webp") 1x,
      url("../img/tile1024.png")  type("image/png")  1x
    );
    background-repeat: repeat;
    background-size: 512px 512px;      /* crisp size for portrait tablets/large phones */
    background-position: top center;
  }
}

/* Small-device LANDSCAPE */
@media (orientation: landscape) and (max-width: 932px) {
  body{
    background-repeat: repeat;
    background-size: 320px 320px;
    background-position: top center;
  }
}

/* =========================================================
   Layout & typography
   ========================================================= */

.viewport-center{
  text-align:center;
  padding:2rem;
  width:100%;
}

/* Logo: slightly bigger */
.logo-combined{
  max-width:min(80vw, 460px);
  height:auto;
  margin:0 auto 1rem;
  display:block;
}

/* Brand (Telharmonium Labs, Inc.) */
.brand{
  margin:1rem 0 0;
  font-weight:700;
  white-space:nowrap;
  font-size:clamp(1.6rem, 4.8vw, 2.6rem);
  line-height:1.06;
  letter-spacing:0.025em;

  color:var(--cyan);
  -webkit-text-stroke:0.6px var(--rose);
  /* no text-shadow here — clean outline only */
}

/* Tagline: small caps with exception spans, rose outline + cyan shadow */
.tagline{
  margin:.4rem 0 0;
  font-style: oblique 12deg;
  font-weight: 400;                          /* non-bold */
  font-size: clamp(0.9rem, 3vw, 1.3rem);     /* responsive but smaller than brand */
  letter-spacing: .08em;

  color: var(--cyan);                        /* fill */
  -webkit-text-stroke: 0.6px var(--rose);    /* rose outline */
  text-shadow: 1px 1px 0 var(--cyan);        /* subtle SE cyan shadow */

  font-variant: small-caps;                  /* enable small caps */
  text-align: center;
  white-space: nowrap;
}

/* Exception span: keep normal lowercase inside tagline */
.tagline .sc-exception{
  font-variant: normal; 
  text-transform: lowercase;
}

/* Signals CTA */
.signup{
  margin-top:1.4rem;
  font-size:.75rem;
  display:flex;
  justify-content:center;
  width:100%;
}
.signup a{
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px dotted var(--gold);
  transition: all 0.25s ease;
}
.signup a:hover{
  color:var(--cyan);
  border-bottom-color:var(--cyan);
  text-shadow:0 0 1px var(--cyan);
}

/* Responsive guard for extra-small phones */
@media (max-width: 480px){
  .logo-combined{ max-width: 280px }
  .brand{ letter-spacing:0.02em }
}
/* ==== Centering fixes (desktop + small iPhones) ==== */

/* ==== Centering + iPhone mini (≤375px) — FINAL CONSOLIDATED ==== */

/* Desktop & general: truly center the main column + its contents */
.viewport-center{
  margin-left: auto;
  margin-right: auto;
  max-width: min(92vw, 640px);
  display: grid;
  justify-items: center;
  text-align: center;
}

/* Email line: belt-and-suspenders centering */
.signup{
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
}

/* iPhone 12 mini & similar (≤375px) */
@media (max-width: 375px){

  /* Logo — true center + small optical nudge left */
  .logo-combined{
    display: block;
    margin-inline: auto;
    place-self: center;
    max-width: 220px;   /* even number to avoid half-pixel rounding */
    width: 220px;
    transform: translateX(-2px); /* optical correction for image padding */
  }

  /* Brand — shrink to always fit one line, keep centered */
  .brand{
    font-size: clamp(1.1rem, 4.8vw, 1.8rem);
    letter-spacing: 0.018em;
    white-space: nowrap !important;
    text-align: center;
  }

 /* Tagline: ALL small caps (no oversized first letters) */
.tagline{
  margin:.4rem 0 0;
  font-style: oblique 12deg;
  font-weight: 400;                          /* non-bold */
  font-size: clamp(0.9rem, 3vw, 1.3rem);     /* responsive but smaller than brand */
  letter-spacing: .08em;

color: var(--cyan);
  /* -webkit-text-stroke: 0.6px var(--rose); */   /* disabled outline */
  text-shadow: 1px 1px 0 var(--cyan);

  font-variant: all-small-caps;              /* every letter in small caps */
  text-align: center;
  white-space: nowrap;
}

  /* Keep the column tight so text doesn’t hug the edges */
  .viewport-center{
    padding-left: 0;
    padding-right: 0;
  }
}
/* — Email line: center by content width (desktop + mobile) — */
.signup{
  display: inline-block !important;    /* shrink to content width */
  margin: 1.4rem auto 0 !important;    /* horizontally center the block */
  width: auto !important;
  text-align: center !important;       /* keep the text centered inside */
}

/* keep the link styling as-is; no change needed */
/* Style the 'Signals:' label so it’s visible */
.signup{
  color: var(--gold);              /* make the label gold like the link */
  font-weight: 400;                /* optional: lighter than the brand */
}

/* Keep the link overriding its own color & hover */
.signup a{
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px dotted var(--gold);
  transition: all 0.25s ease;
}
.signup a:hover{
  color: var(--cyan);
  border-bottom-color: var(--cyan);
  text-shadow: 0 0 1px var(--cyan);
}