/* Placeholder landing page for www.georgeva.com.
   Header chrome and the handwritten-annotation treatment are lifted from the
   sandbox app (app/globals.css) so the two read as one product: Caveat at
   #1a4a7a for the notes, #1a6aa8 for the pen strokes. */

:root {
  --maroon: #6C1633;
  --wine: #45162A;
  --gold: #C9B49A;
  --rule-gold: #D6B785;
  --pen-text: #1a4a7a;
  --pen-stroke: #1a6aa8;
  --footer-grey: #8A8A8A;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  color: var(--wine);
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.landing-page {
  min-height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  position: relative;
}

/* Pink at the header, clearing to white by roughly two thirds down. Fixed so a
   page taller than the window doesn't stretch the fade out of shape. */
.landing-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(
    180deg,
    #FAD9E2 0%,
    #FCE3EB 20%,
    #FDECF2 38%,
    #FFF7FA 56%,
    #FFFFFF 70%,
    #FFFFFF 100%
  );
  z-index: 0;
  pointer-events: none;
}

/* HEADER */

.landing-header {
  position: relative;
  background-color: var(--maroon);
  overflow: hidden;
  flex-shrink: 0;
  z-index: 10;
}

.landing-hdr-tex {
  position: absolute;
  inset: 0;
  background: url('assets/landing-header-tex.jpg');
  opacity: 0.5;
  pointer-events: none;
}

.landing-hdr-inner {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 22px;
  height: 52px;
  gap: 24px;
}

.landing-hdr-logo-link {
  display: block;
  flex-shrink: 0;
}

.landing-hdr-logo {
  height: 34px;
  width: auto;
  display: block;
}

.landing-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

.landing-nav a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 0.15s;
}

.landing-nav a:hover,
.landing-nav a:focus-visible {
  color: #fff;
}

/* Shown only once the nav collapses behind it, below the breakpoint. */
.landing-nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.landing-nav-toggle:hover,
.landing-nav-toggle:focus-visible {
  color: #fff;
}

.landing-nav-toggle svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.landing-hdr-line {
  height: 2px;
  background: var(--rule-gold);
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}

/* HERO */

.landing-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px 76px;
  position: relative;
  z-index: 1;
}

/* Auto margins rather than justify-content: center. Both centre the column when
   it fits, but an auto margin bottoms out at zero instead of going negative, so
   a column taller than the window starts at the padding edge instead of sliding
   up under the header. */
.content-wrap {
  margin-block: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* The subheading hangs off the hero's left edge rather than being centred under
   it. Shrink-wrapping the pair to the hero's width and centring that block is
   what keeps the two left edges flush at every size. */
.headline {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

/* Sizes are set so the rendered text matches the proportions of the mockup:
   the hero measures 40.5% of viewport width and the subheading 28.3%. */
.hero {
  margin: 0;
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--maroon);
  text-align: left;
}

/* The gap is set on the ink, not the boxes: body line-height leaves half-leading
   above the subheading on top of any margin, so most of the closing up comes
   from tightening that. Measures ~26px hero baseline to subheading cap. */
/* Capped so the sentence wraps at roughly the hero's width. Left uncapped its
   single-line measure would exceed the hero and become what .headline shrinks
   to, dragging the hero off its centred position. */
.hero-sub {
  margin: 0;
  max-width: 20em;
  font-size: clamp(14px, 1.59vw, 20.4px);
  font-weight: 400;
  line-height: 1.35;
  color: var(--wine);
  text-align: left;
}

/* THE ANNOTATED STAGE
   Fixed 700x310 so the arrow coordinates and the text they point at can never
   drift apart. Below the breakpoint it is replaced wholesale by .mstage. */

.stage {
  position: relative;
  width: 700px;
  height: 310px;
  margin: 46px 0 0;
  flex-shrink: 0;
}

.stage-pen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.pen-ink path {
  fill: none;
  stroke: var(--pen-stroke);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* DOMAIN LINKS
   Deliberately not underlined — the pen underline in the note does that job.
   Each line is positioned by its dot so the three domains stack in a column
   that stays aligned whatever the font metrics turn out to be. */

.dom {
  position: absolute;
  display: block;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  font-weight: 400;
}

.dom .pre {
  position: absolute;
  right: 100%;
  top: 0;
  color: var(--gold);
}

.dom .post {
  color: var(--wine);
}

.dom:hover .post,
.dom:focus-visible .post {
  color: var(--maroon);
}

.dom-sandbox {
  left: 162px;
  top: 54px;
  font-size: 27px;
}

.dom-governance {
  left: 162px;
  top: 84px;
  font-size: 27px;
}

.dom-pbc {
  left: 162px;
  top: 137px;
  font-size: 27px;
}

/* All three lines are anchored on the dot that follows the subdomain, so
   georgepbc.com needs a dot's worth of lead-in for its "g" to sit under the "g"
   of ".georgeva.com". Reserving the real character rather than guessing at an
   em value keeps the spine true whatever the font metrics are. */
.dot-space {
  visibility: hidden;
}

/* The pen stroke under "pbc" is what the Public Benefit Corporation note points
   at. Drawn as a stretched squiggle rather than text-decoration so it keeps the
   hand-drawn wobble and sizes itself to the three letters. */
.pbc-mark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M3,6.2 C24,3.4 46,5.8 68,3.6 C88,1.8 104,5.2 117,3' fill='none' stroke='%231a6aa8' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 7px;
  padding-bottom: 6px;
}

/* HANDWRITTEN NOTES */

.note {
  position: absolute;
  margin: 0;
  font-family: 'Caveat', cursive;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.32;
  color: var(--pen-text);
  white-space: nowrap;
}

.note-sandbox {
  left: 406px;
  top: 14px;
}

.note-governance {
  left: 418px;
  top: 118px;
}

.note-pbc {
  left: 6px;
  top: 175px;
}

.note-benefit {
  left: 335px;
  top: 218px;
}

.pen-link {
  color: inherit;
  text-decoration: none;
  /* Should a link ever wrap, give each line its own full stroke rather than
     letting one stroke be sliced between them. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M2,5.6 C20,3.2 38,6.4 56,4.4 C74,2.6 94,6.4 118,3.8' fill='none' stroke='%231a6aa8' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 6px;
  padding-bottom: 5px;
  transition: color 0.15s;
}

.pen-link:hover,
.pen-link:focus-visible {
  color: var(--pen-stroke);
}

/* NARROW VIEWPORTS */

.mstage {
  display: none;
  flex-direction: column;
  width: 100%;
  max-width: 430px;
  margin: 30px 0 0;
}

/* Holds only the pen filter. Kept out of the flow without display:none, which
   would stop the arrows from being able to reference it. */
.mstage-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Both domains hang off one shared dot, as on desktop. Giving the block a
   left pad wide enough for the longer subdomain lets the absolutely positioned
   .pre reach back into it, so the two dots line up without either line being
   measured or hard-coded. */
/* The vertical margins here and on .mdom-pbc are the gaps the arrows hang in,
   since the arrows themselves are out of the flow. */
.mdoms {
  align-self: center;
  padding-left: 5.5em;
  margin: 46px 0;
  font-size: clamp(19px, 5.9vw, 26px);
}

.mdoms .dom,
.mdom-pbc {
  position: relative;
}

.mdoms .dom + .dom {
  margin-top: 2px;
}

/* The stroke under "pbc" is padding on an inline span, so with line-height 1 it
   paints below this box rather than inside it. The bottom margin covers that
   overhang as well as the arrow hanging beneath it. */
.mdom-pbc {
  align-self: center;
  margin: 46px 0 54px;
  font-size: clamp(19px, 5.9vw, 26px);
}

.mnote {
  position: static;
  margin: 0;
  max-width: 15.5em;
  font-size: 16.5px;
  line-height: 1.34;
  white-space: normal;
}

.mnote-end {
  align-self: flex-end;
}

.mnote-start {
  align-self: flex-start;
  margin-top: 12px;
}

/* Anchored inside the word each one points at rather than positioned against
   the column, so the tip lands on that word at any type size instead of
   drifting onto ".georgeva.com" as the layout scales. Taken out of the flow,
   which is why the blocks above and below carry the margins that make room. */
.marrow {
  position: absolute;
  width: 80px;
  height: 41px;
  overflow: visible;
  pointer-events: none;
}

.marrow .pen-ink path {
  stroke-width: 2.4;
}

.pbc-lead,
.pbc-mark {
  position: relative;
}

/* Arrows that come down onto their word sit above it; the two that come up sit
   below. */
.marrow-a,
.marrow-c {
  bottom: 100%;
}

.marrow-b,
.marrow-d {
  top: 100%;
}

/* The left offsets put the arrowhead on the word's centre line: the tip is at
   x=22 of the 90-unit viewBox for a, b and d, and x=68 for c, which across an
   80px box is 19.6px and 60.4px in. */
.marrow-a,
.marrow-b,
.marrow-d {
  left: calc(50% - 19.6px);
}

.marrow-c {
  left: calc(50% - 60.4px);
}

/* FOOTER */

.landing-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 24px 10px;
  z-index: 5;
  pointer-events: none;
  display: flex;
  justify-content: center;
}

.landing-footer-text {
  margin: 0;
  font-size: 10px;
  font-weight: 400;
  color: var(--footer-grey);
  line-height: 1.5;
  text-align: center;
  max-width: 1240px;
  width: 100%;
}

@media (max-width: 800px) {
  .stage {
    display: none;
  }

  .mstage {
    display: flex;
  }

  /* Seven links will not sit on one row beside the logo on a phone, so they
     collapse into a dropdown behind the ellipsis button. The dropdown hangs
     below the header, which therefore must stop clipping its children; the
     texture is inset to the header box and does not depend on that. Raised
     above the gold rule so the panel is not sliced by it. */
  .landing-header {
    overflow: visible;
    z-index: 20;
  }

  .landing-hdr-inner {
    padding: 0 8px 0 16px;
    gap: 0;
  }

  .landing-nav-toggle {
    display: flex;
  }

  .landing-nav {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    right: 8px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 190px;
    padding: 6px 0;
    background-color: var(--maroon);
    border: 1px solid var(--rule-gold);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
  }

  .landing-nav.is-open {
    display: flex;
  }

  .landing-nav a {
    padding: 9px 16px;
    font-size: 13.5px;
  }

  .landing-main {
    padding: 40px 20px 24px;
  }

  /* A four-line disclaimer pinned to a phone viewport eats the bottom of the
     page. Put it back in the flow so it simply follows the content. */
  .landing-footer {
    position: static;
    padding: 28px 20px 22px;
  }
}