/* Collected Thoughts: coming soon page.
   Colours and the typeface are taken from the journal's cover. */

:root {
  --paper: #fff7ef;        /* the cover's cream */
  --paper-deep: #f3e9de;   /* the notes page header band, a shade warmer */
  --mauve: #705861;        /* the cover's title colour */
  --ink: #3b4ea1;          /* the handwriting and the drawn lines */
  --text: #3a3a3a;         /* the body text inside the journal */
  --dot: #e2d6ca;          /* the arena grid dots */
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  font-family: "Poppins", "Gill Sans", "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  /* The dotted arena grid from the journal's second diagram */
  background-color: var(--paper);
  background-image: radial-gradient(var(--dot) 1.6px, transparent 1.9px);
  background-size: 38px 38px;
}

.page {
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 5rem) 1.5rem 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 1.25rem;
  padding: 0.3rem 0.9rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--paper);
}

h1 {
  margin: 0;
  color: var(--mauve);
  font-size: clamp(2.1rem, 5.4vw, 3.6rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.tagline {
  margin: 0.9rem 0 0;
  color: var(--mauve);
  font-size: clamp(0.8rem, 1.5vw, 0.95rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.lead {
  margin: 1.75rem 0 0;
  max-width: 34rem;
  font-size: 1.125rem;
}

.points {
  margin: 1.5rem 0 0;
  padding: 0;
  max-width: 34rem;
  list-style: none;
}

.points li {
  position: relative;
  padding: 0.3rem 0 0.3rem 1.9rem;
}

.points strong {
  color: var(--mauve);
  font-weight: 500;
}

/* A tick box, as on the journal's notes page */
.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72rem;
  width: 0.8rem;
  height: 0.8rem;
  border: 1.5px solid var(--mauve);
  border-radius: 2px;
  background: var(--paper);
}

.points li::after {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.55rem;
  width: 0.4rem;
  height: 0.8rem;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: rotate(40deg);
}

.soon {
  margin: 1.75rem 0 0;
  color: var(--ink);
  font-weight: 500;
}

/* The journal, drawn as a real book: turned a little, with a page block on the right,
   a back cover behind and a shadow underneath.
   Behind it, two real pages from the journal are fanned out: the arena diagrams on the left and
   the notes page on the right. The white pages are what separates the cream book from the cream
   page, and they show what is inside. */
.book {
  --w: clamp(170px, 20.5vw, 260px);   /* width of the cover; everything else follows from it */
  --d: calc(var(--w) * 0.085);      /* thickness of the book */
  position: relative;
  justify-self: center;
  /* room for the two pages, which reach out past the book on both sides */
  padding: calc(var(--w) * 0.2) calc(var(--w) * 0.53);
  perspective: 1500px;
}

.book__page {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--w) * 0.98);
  height: auto;
  border: 1px solid #e3d8cc;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(112, 88, 97, 0.25), 0 12px 22px -10px rgba(112, 88, 97, 0.5);
}

/* Each page sits on the side where its most telling half stays in view: the arena with the
   circles on the left, the tick boxes of the notes page on the right. */
.book__page--arenas { transform: translate(-97%, -54%) rotate(-10deg); }

.book__page--notes { transform: translate(-3%, -46%) rotate(8deg); }

.book__body {
  position: relative;
  width: var(--w);
  aspect-ratio: 504 / 612;
  transform-style: preserve-3d;
  transform: rotateY(-27deg) rotateX(5deg) rotateZ(1deg);
  z-index: 1;
}

.book__cover {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 2px 7px 7px 2px;
  transform: translateZ(calc(var(--d) / 2));
  box-shadow: inset 0 0 0 1px rgba(112, 88, 97, 0.16);
}

.book__cover img {
  display: block;
  width: 100%;
  height: 100%;
}

/* the fold along the spine, and a soft light across the cover */
.book__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(112, 88, 97, 0.22) 0, rgba(255, 255, 255, 0.35) 1.6%, rgba(112, 88, 97, 0.12) 3.4%, transparent 6.5%),
    linear-gradient(105deg, rgba(255, 255, 255, 0.22) 0%, transparent 38%, rgba(112, 88, 97, 0.07) 100%);
}

/* the page block seen from the side */
.book__body::before {
  content: "";
  position: absolute;
  top: 1%;
  left: 0;
  width: var(--d);
  height: 98%;
  transform: translateX(calc(var(--w) - var(--d) / 2 - 4px)) rotateY(90deg);
  background: repeating-linear-gradient(90deg, #fffdf9 0, #fffdf9 1.5px, #ddd2c6 1.5px, #ddd2c6 2.5px);
}

/* the back cover, which also casts the shadow */
.book__body::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px 7px 7px 2px;
  background: #eadfd3;
  transform: translateZ(calc(var(--d) / -2));
  box-shadow: -14px 22px 30px -6px rgba(70, 50, 58, 0.55), -4px 6px 10px rgba(70, 50, 58, 0.3);
}

/* The line of arrows from the back cover: one continuous, slightly wavy line, arrowheads sitting
   on it and pointing right, with one large circle ridden a third of the way along. The circle is
   drawn with the same wavy hand as the line and carries one arrowhead of its own.
   Three pieces side by side: a run of arrows, the circle, a longer run of arrows. The runs are
   one small drawing repeated; it starts and ends at the same height and slope as the circle
   piece, so the line never breaks. All drawings are 300 wide and 200 high. */
.ink-line {
  --h: 200px;                      /* height; the pieces scale with it */
  --piece: calc(var(--h) * 1.5);   /* width of one drawing */
  display: flex;
  height: var(--h);
}

.ink-line__run {
  flex: 1;
  background: right center / var(--piece) var(--h) repeat-x url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200' viewBox='0 -10 300 200' fill='none' stroke='%233b4ea1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 160 C75 148 225 172 300 160'/%3E%3Cpath d='M119 145 Q136 150 150 160 Q135 168 118 176'/%3E%3C/svg%3E");
}

.ink-line__run--long {
  flex: 2;
  background-position: left center;
}

.ink-line__circle {
  flex: none;
  width: var(--piece);
  background: center / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200' viewBox='0 -10 300 200' fill='none' stroke='%233b4ea1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 160 C22 156.4 47 155.5 72 155.5 C97 155.5 131.9 159.5 150 160 C168.1 160.5 171.4 161.9 180.4 158.4 C189.3 154.8 197.7 146.3 203.6 138.6 C209.5 130.9 212.9 121.2 215.8 112.3 C218.8 103.3 220.6 94.4 221.3 85 C222 75.6 222.7 65.3 220.1 55.9 C217.6 46.6 212.9 35.9 206.2 28.8 C199.4 21.8 189 16.2 179.6 13.4 C170.3 10.7 159.4 11.5 150 12.5 C140.6 13.6 131.7 16.4 123 19.8 C114.2 23.1 105.2 26.7 97.6 32.6 C89.9 38.4 81.6 46.1 77.2 54.9 C72.8 63.6 70.6 75.3 71.3 85 C72 94.7 76.8 105 81.6 113.3 C86.4 121.7 93.3 128.5 100.1 134.9 C106.9 141.4 112.6 147.6 122.2 152 C131.9 156.5 139.7 159.5 158 161.5 C176.3 163.5 208.3 164.2 232 164 C255.7 163.8 278.7 163.6 300 160'/%3E%3Cpath d='M181 -2.5 Q164 2.5 150 12.5 Q165 20.5 182 28.5'/%3E%3C/svg%3E");
}

.footer {
  padding: 0.5rem 1.5rem 1.75rem;
  text-align: center;
  color: var(--mauve);
  font-size: 0.875rem;
}

.footer p { margin: 0; }

@media (max-width: 800px) {
  .page {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .lead, .points { margin-left: auto; margin-right: auto; }

  .points { text-align: left; width: fit-content; }

  .book { --w: 155px; }

  /* smaller on phones, so the circle and an arrow or two fit */
  .ink-line { --h: 134px; }
}