/* ============================================================
   chichinwanoku.com — coming soon
   Palette and type follow the supplied asset handoff.
   ============================================================ */

:root{
  --cream:      #F7EFE1;
  --ink:        #102A22;
  --terracotta: #D45A36;
  --teal:       #0B5C5D;
  --mustard:    #E7A23B;
  --blush:      #EFC9C0;

  /* The supplied artwork sits on a warmer cream (#EADBC2) than palette.json
     declares (#F7EFE1). Anywhere a flat fill meets the artwork it has to use
     the artwork's tone, or the join shows as a band. */
  --cream-art:  #EADBC2;

  /* 75%, not 66%: at 66% this was ~4.1:1 on the paper, under WCAG AA. It sets
     the italic subhead and the DAYS/HOURS labels, which are small type. */
  --ink-soft: rgb(74, 91, 82);   /* fallback: color-mix needs Safari 16.2+ */
  --ink-soft: color-mix(in srgb, var(--ink) 75%, var(--cream));
  --rule:     rgba(16, 42, 34, 0.26);
  --rule:     color-mix(in srgb, var(--ink) 26%, transparent);

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --gutter: clamp(1.5rem, 5vw, 5rem);
}

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

html{
  -webkit-text-size-adjust: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body{
  margin: 0;
  /* Fixed rather than merely overflow:hidden. iOS Safari still scrolls and
     rubber-bands a static body, whatever overflow says; taking it out of flow
     is the only thing that genuinely pins the page. Height in dvh so it still
     tracks Safari's collapsing toolbar. */
  position: fixed;
  inset: 0;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  background-color: var(--cream-art);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- stage ----------
   Desktop: the supplied artwork already contains its own cream field, so it
   is the full-bleed background and the copy sits in the cream half of it.
--------------------------------- */
.stage{
  position: relative;
  height: 100%;          /* body is already pinned to the viewport */
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 52%) minmax(0, 1fr);
  align-items: center;

  background-color: var(--cream-art);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
  background-image: url("assets/artwork-landscape-v3.png");
  background-image: image-set(
    url("assets/artwork-landscape-v3.webp") type("image/webp"),
    url("assets/artwork-landscape-v3.png")  type("image/png")
  );
}

.panel{
  grid-column: 2;
  position: relative;
  z-index: 2;
  padding-block: clamp(2.5rem, 6vw, 5rem);
  padding-left: clamp(1rem, 2.5vw, 2rem);
  padding-right: var(--gutter);
  max-width: 46rem;
}

/* ---------- type ---------- */
.headline{
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(3rem, 6.4vw, 5.6rem);
  line-height: 0.92;          /* per the handoff: 0.88–0.94 */
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.sub{
  margin: clamp(1rem, 2vw, 1.6rem) 0 0;
  /* Italic serif, not the system sans. This was the only sans-serif line in
     the copy column and read as unstyled browser default beside the Cormorant
     headline, numerals and labels. Italic marks it as a standfirst without
     competing with the headline. */
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  color: var(--ink-soft);
}

/* ---------- countdown ---------- */
.countdown{ margin-top: clamp(2rem, 4.5vw, 3.25rem); }

.clock{
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 2.6vw, 2.25rem);
  margin: 0; padding: 0; list-style: none;
}

.unit{
  position: relative;
  padding-right: clamp(1rem, 2.6vw, 2.25rem);
  min-width: 3.4ch;            /* stops the layout jittering as digits change */
}
.unit:not(:last-child)::after{
  content: "";
  position: absolute;
  right: 0; top: .1em; bottom: .8em;
  border-right: 1px solid var(--rule);
}

.unit__num{
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 4.6vw, 3.8rem);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1;
}

.unit__label{
  display: block;
  margin-top: .55em;
  font-family: var(--serif);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .18em;       /* per the handoff */
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- sign-up ---------- */
.signup{ position: relative; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

.signup__row{ display: flex; gap: .5rem; max-width: 31rem; flex-wrap: wrap; }

.signup__input{
  flex: 1 1 14rem;
  min-width: 0;
  padding: .9rem 1rem;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  /* translucent, so the paper texture reads through it instead of
     sitting on the page as a flat white box */
  background: rgba(255, 255, 255, 0.55);
  background: color-mix(in srgb, #fff 55%, transparent);
  border: 1px solid var(--rule);
  border-radius: 2px;
  transition: border-color .18s ease, background .18s ease;
}
.signup__input::placeholder{ color: rgba(74, 91, 82, 0.72);
  color: color-mix(in srgb, var(--ink-soft) 72%, transparent); }
.signup__input:focus-visible{
  outline: none;
  border-color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
  background: color-mix(in srgb, #fff 82%, transparent);
}

/* Safari/Chrome paint autofilled fields a hard yellow that overrides
   background entirely. The only reliable override is a huge inset shadow,
   and the long transition stops it flashing yellow before that lands. */
.signup__input:-webkit-autofill,
.signup__input:-webkit-autofill:hover,
.signup__input:-webkit-autofill:focus,
.signup__input:-webkit-autofill:active,
.signup__input:autofill{
  /* !important because Safari's user-agent style for autofill otherwise wins.
     The oversized inset shadow is the only reliable way to cover the yellow —
     background-color alone is ignored on iOS. */
  -webkit-text-fill-color: var(--ink) !important;
  -webkit-box-shadow: 0 0 0 1000px #F5EFE4 inset !important;
          box-shadow: 0 0 0 1000px #F5EFE4 inset !important;
  background-color: #F5EFE4 !important;
  background-image: none !important;
  caret-color: var(--ink);
  /* delays the yellow repaint indefinitely so it never flashes through */
  transition: background-color 100000s ease-in-out 0s !important;
}
.signup__input[aria-invalid="true"]{ border-color: var(--terracotta); }

.signup__btn{
  flex: 0 0 auto;
  padding: .9rem 1.6rem;
  font: inherit;
  font-size: .9rem;
  color: var(--cream);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 2px;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.signup__btn:hover{ background: #12332B; }
.signup__btn:hover{ background: color-mix(in srgb, var(--ink) 82%, var(--teal)); }
.signup__btn:active{ transform: translateY(1px); }
.signup__btn[disabled]{ opacity: .55; cursor: default; transform: none; }

.signup__msg{
  margin: .8rem 0 0;
  min-height: 1.25em;
  font-size: .82rem;
  color: var(--ink-soft);
}
.signup__msg[data-state="error"]{ color: var(--terracotta); }
.signup__msg[data-state="ok"]{ color: var(--ink); }

/* Once submitted the message stands exactly where the fields were.
   The row keeps its space (visibility, not display) and the message is laid
   over it, so the panel's height is identical before and after — hiding the
   row outright collapsed the panel and dumped the copy at the foot of the
   screen with a void above it. */
.signup.is-sent{
  /* the message is lifted out of flow below, so reserve the block it used to
     occupy (its margin plus one line) — otherwise the panel shrinks and the
     whole column jumps down the screen on submit */
  padding-bottom: calc(0.8rem + 1.25em);
}
.signup.is-sent .signup__row{ visibility: hidden; }
.signup.is-sent .signup__msg{
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  /* Same face, weight and colour as the countdown numerals, so it reads as
     typeset copy rather than a form status. Cormorant at ~20px regular looks
     thin — it needs the size to carry. */
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: .005em;
}

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.social{
  display: flex; gap: 1.25rem; list-style: none;
  margin: clamp(1.5rem, 2.8vw, 2.25rem) 0 0; padding: 0; font-size: .74rem;
}
.social a{ color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--rule); }
.social a:hover{ color: var(--ink); border-color: var(--ink); }

/* ---------- phones ----------
   The landscape artwork can't crop down to portrait, so the stage drops its
   background and shows the purpose-composed 4:5 file over the paper texture.
--------------------------------- */
@media (max-width: 860px){
  .stage{
    /* minmax(0,…), not a bare 1fr: a bare 1fr takes its minimum from content,
       and the countdown's letterspaced labels forced the column to 359px inside
       a 320px viewport, pushing the form off-screen where overflow:hidden then
       silently clipped it. */
    grid-template-columns: minmax(0, 1fr);
    /* Artwork takes whatever height is left once the copy has claimed what
       it needs; the copy is never squeezed and never covered. */
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
    background-color: var(--cream-art);
    /* The artwork IS the background here — it was composed as a full screen,
       paint across the top with the lower half left clear for the copy, so
       there is no seam between "artwork" and "page". */
    /* Paper tile sits UNDER the artwork, tinted to the artwork's own cream.
       Lifting the artwork to clear the headline exposes a strip at the foot of
       the screen; against textured paper that strip read as a flat beige slab.
       Now whatever is exposed is still paper. */
    background-image:
      url("assets/artwork-mobile-v3.png"),
      url("assets/paper-v3.png");
    background-image:
      image-set(url("assets/artwork-mobile-v3.webp") type("image/webp"),
                url("assets/artwork-mobile-v3.png")  type("image/png")),
      image-set(url("assets/paper-v3.webp") type("image/webp"),
                url("assets/paper-v3.png")  type("image/png"));
    /* per layer: artwork covers and is lifted; paper tiles behind it.
       Barely lifted on tall phones — they have room to spare, so no reason to
       crop the spiral's crown. Shorter viewports lift more, further down. */
    background-size: cover, 512px 512px;
    background-position: center -2vh, top left;
    background-repeat: no-repeat, repeat;
  }
  .panel{
    grid-row: 2;
    align-self: end;
    grid-column: 1;
    padding: clamp(1.5rem, 6vw, 2.5rem) var(--gutter) clamp(1.25rem, 5vw, 2rem);
    max-width: none;
  }
  .headline{ font-size: clamp(2.6rem, 11vw, 3.8rem); }
  .clock{ gap: clamp(.65rem, 3.5vw, 1.25rem); }
  .unit{ padding-right: clamp(.65rem, 3.5vw, 1.25rem); }
  .unit__num{ font-size: clamp(2rem, 8vw, 2.8rem); }
  .signup__row{ max-width: none; }
  .signup__input, .signup__btn{ flex: 1 1 100%; }
}

/* Genuinely wide portrait — tablets. Here `cover` scales by width enough to
   drag the paint well over the copy, and squeezing the type to fit would look
   silly on a screen that big, so the artwork goes back in a box above the copy.
   The threshold is 0.62, NOT the artwork's own 0.563. Real phones sit below it
   even with Safari's chrome showing (~0.59), so they keep the full-bleed
   version; 0.563 was too low and tipped real phones into this branch, while
/* Short enough that the paint would otherwise reach the headline, so the
   artwork is lifted harder here. Costs the top of the spiral, which is the
   right trade against text sitting on the teal. */
@media (max-width: 860px) and (min-aspect-ratio: 56/100){
  .stage{ background-position: center -6vh, top left; }
}

   0.68 was too high and let 0.66-ish windows clash. */
@media (max-width: 860px) and (min-aspect-ratio: 62/100){
  .stage{ background-image: none; }
  .stage::before{
    content: "";
    grid-area: 1 / 1;
    /* Paper tile sits UNDER the artwork, tinted to the artwork's own cream.
       Lifting the artwork to clear the headline exposes a strip at the foot of
       the screen; against textured paper that strip read as a flat beige slab.
       Now whatever is exposed is still paper. */
    background-image:
      url("assets/artwork-mobile-v3.png"),
      url("assets/paper-v3.png");
    background-image:
      image-set(url("assets/artwork-mobile-v3.webp") type("image/webp"),
                url("assets/artwork-mobile-v3.png")  type("image/png")),
      image-set(url("assets/paper-v3.webp") type("image/webp"),
                url("assets/paper-v3.png")  type("image/png"));
    background-size: 130% auto;
    background-position: 45% top;
    background-repeat: no-repeat;
  }
}

/* Very narrow phones (320px and similar). The countdown is the widest thing on
   the page; at full label size and tracking it simply cannot fit. */
@media (max-width: 380px){
  .clock{ gap: .5rem; }
  .unit{ padding-right: .5rem; min-width: 0; }
  .unit__num{ font-size: 1.7rem; }
  .unit__label{ font-size: .6rem; letter-spacing: .1em; }
}

/* Locked page: on short screens type compresses rather than overflowing.
   SCOPED TO NARROW WIDTHS. Unscoped this fired on any laptop with a
   non-maximised window: a 1440x680 desktop got a 40px headline instead of
   90px, which is why the site looked tiny on some machines. A wide viewport
   has the horizontal room to lay the copy out and needs no compression. */
@media (max-height: 700px) and (max-width: 860px){
  /* Pull the artwork up so less paint occupies the screen. It already bleeds
     off the top, so this crops the spiral's crown rather than revealing a gap. */
  .stage{ background-position: center -9vh, top left; }
  .headline{ font-size: clamp(1.9rem, 7vw, 2.5rem); }
  .countdown{ margin-top: .9rem; }
  .unit__num{ font-size: clamp(1.7rem, 5.5vw, 2.1rem); }
  .signup{ margin-top: .9rem; }
  .sub{ margin-top: .5rem; }
  .signup__input, .signup__btn{ padding-block: .7rem; }
  .panel{ padding-bottom: 1.25rem; }
}

/* Phone held sideways: this is a wide, short viewport, so it wants the
   landscape artwork and the two-column split back — not the 9:16 file the
   width-based mobile rule above would otherwise leave in place. */
@media (max-height: 560px) and (orientation: landscape){
  .stage{
    grid-template-columns: minmax(0, 52%) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    background-image: url("assets/artwork-landscape-v3.png");
    background-image: image-set(
      url("assets/artwork-landscape-v3.webp") type("image/webp"),
      url("assets/artwork-landscape-v3.png")  type("image/png")
    );
    background-position: left center;
  }
  .panel{
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    padding-block: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; }
}
@media (prefers-contrast: more){
  :root{ --ink-soft: #16342A; --rule: #102A22; }
}

/* "Did you mean …?" typo fix, offered as a link-like button */
.signup__fix{
  font: inherit; color: var(--ink); background: none; border: 0; padding: 0;
  text-decoration: underline; text-underline-offset: .15em; cursor: pointer;
}