/* English with Katherine - teaser ("coming soon") page.
   A teaser, not a reveal: the site's fonts and colours, the K mark, and Katie peeking.
   No logo and no hero artwork. */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/fraunces.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("fonts/fraunces-italic.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("fonts/nunito-sans.woff2") format("woff2"); }

:root {
  --cream: #FBF6EC;
  --sand: #F1E5CF;
  --ink: #0A2242;
  --ink-soft: #3A4863;
  --orange: #F07E09;
  --orange-deep: #A04800;
  --rule: #D9CAAB;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Nunito Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6;
  overflow-wrap: break-word;
}
h1, p { margin: 0; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 3px; }

.container { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

/* ---------- Page frame ---------- */
.page {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
}
.top { padding-top: 1.5rem; }
.mark {
  display: block; width: 48px; height: 48px; margin-inline: auto;
  border-radius: 12px; box-shadow: 0 0 0 1px var(--rule);
}

.main { flex: 1; display: flex; align-items: center; justify-content: center; padding-block: 2rem 2.5rem; }
.content { width: 100%; max-width: 40rem; text-align: center; }

/* ---------- Proverb ---------- */
.proverb { margin-top: 0; }
.quote {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2.05rem, 8.6vw, 3.9rem); line-height: 1.12; letter-spacing: -.015em;
  text-wrap: balance;
}
.equivalent { margin-top: 1.1rem; color: var(--ink-soft); font-size: 1.05rem; text-wrap: balance; }
.equivalent-label { font-weight: 700; }
#equivalent { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--ink); }

/* ---------- Underline under one word of the proverb ----------
   The tapered swoosh from the K mark and the logo: thick in the middle, fine at the ends. */
.scribble {
  white-space: nowrap;
  padding-bottom: .2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23F59A23'/%3E%3Cstop offset='.55' stop-color='%23F07E09'/%3E%3Cstop offset='1' stop-color='%23E26A00'/%3E%3C/linearGradient%3E%3Cpath d='M1 21 C50 6 150 1 239 8 C155 10 75 14 1 21Z' fill='url(%23g)'/%3E%3C/svg%3E") -.06em bottom / calc(100% + .12em) .36em no-repeat;
}

/* ---------- Katie peeking from behind her note ----------
   The picture's "wall" edge is at 83% of its width, so the note starts there
   and her fingers wrap over its left edge. */
.note-row {
  --kw: 104px;                                   /* Katie's width */
  margin: 2.4rem auto 0; width: fit-content; max-width: 100%;
  display: flex; align-items: center; justify-content: center; text-align: left;
}
.katie {
  position: relative; z-index: 1; flex: none; display: block;
  width: var(--kw); margin-right: calc(var(--kw) * -.17);
}
.note {
  min-width: 0; max-width: 23rem;
  padding: 1rem 1.1rem 1rem 1.5rem;
  background: var(--sand); border: 1px solid var(--rule); border-radius: 4px 18px 18px 4px;
  box-shadow: 0 10px 24px -18px rgba(10, 34, 66, .45);
}
.note-title { font-family: var(--serif); font-weight: 650; font-size: 1.35rem; line-height: 1.15; }
.note-it { margin-top: .4rem; font-weight: 600; line-height: 1.45; }
.note-en { margin-top: .3rem; color: var(--ink-soft); font-size: .93rem; line-height: 1.45; }
.note-sign {
  margin-top: .45rem; font-family: var(--serif); font-style: italic; font-size: 1.1rem;
  color: var(--orange-deep);
}
.note-sign::before { content: "\2014\00a0"; }

.foot { padding-block: 1rem; font-size: .8rem; letter-spacing: .04em; color: var(--ink-soft); text-align: center; }

@media (min-width: 600px) {
  .top { padding-top: 2rem; }
  .note-row { --kw: 150px; margin-top: 3rem; }
  .note { padding: 1.3rem 1.6rem 1.25rem 2rem; }
  .note-title { font-size: 1.5rem; }
}