/* ===========================================================================
   Design tokens — from the Figma file (node 27:126)
   =========================================================================== */
:root {
  /* Color */
  --paper: #faf8f4;
  --card: #ffffff;
  --ink: #1c1d1f;
  --ink-body: #4e5054;
  --ink-muted: #87888c;
  --accent: #c4835a;
  --border: #eae6e0;
  --rule: #e8e6e1;
  --button: #3e4b5e;

  /* Washi tape */
  --tape-blue: rgba(160, 182, 217, 0.25);
  --tape-gold: rgba(217, 201, 160, 0.25);
  --tape-rose: rgba(217, 160, 160, 0.25);
  --tape-mint: rgba(160, 217, 180, 0.25);
  --tape-pink: rgba(233, 160, 190, 0.25);

  /* Type */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-hand: "Caveat Brush", "Segoe Script", cursive;
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Elevation */
  --lift: 0 8px 8px rgba(0, 0, 0, 0.08);
  --tape-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);

  /* Motion — the Figma timeline is 1250ms with four snapshots entering 150ms
     apart, each taking 800ms to travel. */
  --fly-duration: 800ms;
  --fly-fade: 150ms;
  --fly-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* The snapshots fly in from up to 500px outside the layout. This has to sit on
   the root element: overflow-x on <body> propagates to the viewport instead of
   clipping, and `clip` avoids the side effects `hidden` has on sticky. */
html { overflow-x: clip; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

.page {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 48px 24px;
}

/* ===========================================================================
   Masthead
   =========================================================================== */
.masthead {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
}

.brand__mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
}

.brand__divider {
  width: 1px;
  height: 20px;
  background: var(--rule);
}

.brand__tagline {
  display: inline-block;
  font-family: var(--font-hand);
  font-size: 22px;
  line-height: 1.2;
  color: var(--accent);
  rotate: -2deg;
}

.say-hello {
  padding: 10px 24px;
  border-radius: 100px;
  background: var(--button);
  box-shadow: var(--lift);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 180ms ease, transform 180ms var(--fly-ease);
}

.say-hello:hover { background: #33404f; }
.say-hello:active { transform: translateY(1px); }

/* ===========================================================================
   Workspace
   =========================================================================== */
.workspace {
  display: flex;
  flex-direction: column;
  gap: 48px;
  min-width: 0;
}

/* ===========================================================================
   Intro
   =========================================================================== */
.intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.intro__greeting {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 28px;
  line-height: 1.2;
  color: var(--accent);
  rotate: -1deg;
  transform-origin: left center;
}

.intro__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 9vw, 5rem);
  line-height: 1.05;
}

.intro__lede {
  margin: 0;
  max-width: 56ch;
  color: var(--ink-body);
  line-height: 1.6;
}

/* ===========================================================================
   Portals
   =========================================================================== */
.portals {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.portal {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--lift);
  color: inherit;
  text-decoration: none;
  transition: transform 220ms var(--fly-ease), box-shadow 220ms ease;
}

.portal:not(.portal--soon):hover,
.portal:focus-visible {
  transform: translateY(-3px) rotate(-0.35deg);
  box-shadow: 0 14px 18px rgba(0, 0, 0, 0.1);
}

.portal:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.portal__header {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.portal__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
}

.portal__go {
  flex-shrink: 0;
  font-family: var(--font-hand);
  font-size: 22px;
  line-height: 1.2;
  color: var(--accent);
  white-space: nowrap;
  transition: transform 220ms var(--fly-ease);
}

.portal:hover .portal__go { transform: translate(2px, -2px); }

/* Sub-sites that don't exist yet: same card, visibly not a door. */
.portal--soon {
  box-shadow: none;
  background: transparent;
  border-style: dashed;
}

.portal--soon .portal__title { color: var(--ink-muted); }
.portal--soon .portal__desc { color: var(--ink-muted); }
.portal--soon .tape { opacity: 0.55; }

.portal__soon {
  flex-shrink: 0;
  padding: 2px 10px;
  border-radius: 100px;
  background: var(--paper);
  font-family: var(--font-hand);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-muted);
  white-space: nowrap;
}

.portal__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-body);
}

/* ===========================================================================
   Washi tape
   =========================================================================== */
.tape {
  position: absolute;
  box-shadow: var(--tape-shadow);
  pointer-events: none;
}

.tape[data-tape="blue"] { background: var(--tape-blue); }
.tape[data-tape="gold"] { background: var(--tape-gold); }
.tape[data-tape="rose"] { background: var(--tape-rose); }
.tape[data-tape="mint"] { background: var(--tape-mint); }
.tape[data-tape="pink"] { background: var(--tape-pink); }

/* Crosses the card's top-left corner at 45°. */
.tape--portal {
  left: -13.98px;
  top: 14.33px;
  width: 50px;
  height: 16px;
  rotate: 45deg;
}

/* Holds the snapshot to the wall. */
.tape--polaroid {
  left: 0.87px;
  top: calc(var(--snap-tape-h) * -0.165);
  width: var(--snap-tape-w);
  height: var(--snap-tape-h);
  rotate: -5deg;
  z-index: 1;
}

/* ===========================================================================
   Collage
   A small overlapping cluster by default — four photos pinned together rather
   than a column of four full-width cards. The big pinned-to-the-wall
   arrangement is a wide-screen enhancement further down.
   =========================================================================== */
.collage {
  /* Two photo columns plus their overlap have to fit between the .page
     gutters (24px a side), whatever the phone width. */
  --snap-w: min(200px, calc((100vw - 48px) * 0.48));

  /* Everything inside a snapshot is proportional to --snap-w (the ratios come
     from the 280x340 Figma polaroid), so the collage re-scales from that one
     number. These have to live on .collage, not :root — a custom property
     resolves its var()s against the element that declares it. */
  --snap-h: calc(var(--snap-w) * 1.2143);
  --snap-pad: calc(var(--snap-w) * 0.0429);
  --snap-pad-bottom: calc(var(--snap-w) * 0.1143);
  --snap-tape-w: calc(var(--snap-w) * 0.3214);
  --snap-tape-h: calc(var(--snap-w) * 0.0857);

  position: relative;
  width: calc(var(--snap-w) * 1.95);
  height: calc(var(--snap-h) * 2.18);
  margin: 0 auto;
}

.snapshot {
  position: absolute;
  width: var(--snap-w);
  height: var(--snap-h);
}

.collage .snapshot--deck    { left: 0;                            top: 0; }
.collage .snapshot--temple  { right: 0;                           top: calc(var(--snap-h) * 0.13); }
.collage .snapshot--friends { left: calc(var(--snap-w) * 0.05);   top: calc(var(--snap-h) * 0.95); }
.collage .snapshot--explore { right: calc(var(--snap-w) * 0.03);  top: calc(var(--snap-h) * 1.12); }

/* The flight-deck photo sits on top of its neighbour so the overlap never
   lands on a face. */
.collage .snapshot--friends { z-index: 1; }

.polaroid {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: var(--snap-pad) var(--snap-pad) var(--snap-pad-bottom);
  border-radius: 4px;
  background: var(--card);
  box-shadow: var(--lift);
}

/* Each snapshot carries its own resting tilt, kept off the wrapper so the
   fly-in can rotate to zero without flattening it. */
.snapshot--deck    .polaroid { rotate: -4deg; }
.snapshot--temple  .polaroid { rotate:  3deg; }
.snapshot--friends .polaroid { rotate:  5deg; }
.snapshot--explore .polaroid { rotate: -6deg; }

.polaroid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===========================================================================
   Fly-in
   Start offsets, rotation and stagger are taken from the Figma keyframes. The
   Figma timeline loops for preview; on the page it plays once on load.
   =========================================================================== */
@keyframes snapshot-fly {
  from {
    transform: translate(var(--from-x), var(--from-y)) rotate(var(--from-rotate)) scale(0.7);
  }
  to {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

@keyframes snapshot-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.snapshot {
  animation:
    snapshot-fly var(--fly-duration) var(--fly-ease) var(--fly-delay, 0ms) both,
    snapshot-fade var(--fly-fade) linear var(--fly-delay, 0ms) both;
}

.snapshot--deck    { --from-x: -500px; --from-y: -400px; --from-rotate:  25deg; --fly-delay:   0ms; }
.snapshot--temple  { --from-x:  500px; --from-y:  400px; --from-rotate: -20deg; --fly-delay: 150ms; }
.snapshot--friends { --from-x:  500px; --from-y: -350px; --from-rotate: -30deg; --fly-delay: 300ms; }
.snapshot--explore { --from-x: -450px; --from-y:  400px; --from-rotate:  30deg; --fly-delay: 450ms; }

/* Shorter travel on narrow screens: a 500px run-up is most of a phone and
   reads as a lurch rather than a toss onto the wall. */
@media (max-width: 1279px) {
  .snapshot--deck    { --from-x: -180px; --from-y: -140px; }
  .snapshot--temple  { --from-x:  180px; --from-y:  140px; }
  .snapshot--friends { --from-x:  170px; --from-y: -130px; }
  .snapshot--explore { --from-x: -160px; --from-y:  140px; }
}

/* ===========================================================================
   Colophon
   =========================================================================== */
.colophon {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding-top: 32px;
}

.colophon p { margin: 0; }

.colophon__note {
  font-size: 13px;
  color: var(--ink-muted);
}

.colophon__sign {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--ink-muted);
}

.colophon__names {
  font-family: var(--font-hand);
  font-size: 18px;
  color: var(--accent);
}

.colophon__heart { color: var(--accent); }

/* ===========================================================================
   Phones — tighter gutters and rhythm so the photo cluster and the portals
   both fit the first couple of screens
   =========================================================================== */
@media (max-width: 600px) {
  .page {
    gap: 36px;
    padding: 32px 20px;
  }

  /* The brand line and the button rarely fit on one row at this width; when
     the button wraps, keep it on the right rather than under the "A". */
  .masthead { gap: 12px; }

  .brand__mark { font-size: 26px; }

  .brand__tagline { font-size: 18px; }

  .say-hello {
    margin-left: auto;
    padding: 9px 20px;
  }

  .workspace { gap: 36px; }

  .intro { gap: 12px; }

  .intro__greeting { font-size: 24px; }

  .portals { gap: 16px; }

  .portal { padding: 20px; }

  .portal__title { font-size: 21px; }

  .colophon {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-top: 24px;
  }
}

/* ===========================================================================
   Wide screens — the two-column workspace and the pinned collage
   =========================================================================== */
@media (min-width: 1280px) {
  .page { padding: 48px 80px; }

  /* The collage leaves the flow and takes the right-hand column, spanning both
     text rows; source order stays intro → collage → portals for narrow screens. */
  .workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 560px;
    grid-template-areas:
      "intro   collage"
      "portals collage";
    align-content: start;
    column-gap: 80px;
    row-gap: 48px;
  }

  .intro   { grid-area: intro; }
  .portals { grid-area: portals; }
  .collage { grid-area: collage; }

  .collage {
    --snap-w: 280px;
    width: 560px;
    height: 820px;
    margin: 0;
  }

  /* Positions are the Figma wrapper coordinates corrected for the rotated
     bounding box each one reports. The flight-deck photo sits further left
     than Figma had it so the plaza photo stops covering Andy's face. */
  .collage .snapshot--deck    { left:  21.5px; right: auto; top:  19.4px; }
  .collage .snapshot--temple  { left: 248.7px; right: auto; top:  87.1px; }
  .collage .snapshot--friends { left: -12.0px; right: auto; top: 431.6px; }
  .collage .snapshot--explore { left: 277.0px; right: auto; top: 463.7px; }
}

/* ===========================================================================
   Reduced motion
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .snapshot { animation: none; }

  .portal,
  .portal__go,
  .say-hello { transition: none; }

  .portal:hover,
  .portal:focus-visible { transform: none; }
}