:root{
  --violet-top:#2c2166;
  --violet-deep:#140f30;
  --yellow:#f4e04d;
  --coral:#ff5a46;
  --paper:#f7f5ef;
  --ink:#150f30;
  --mist:#9098b5;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  overflow-x:hidden;
  background:
    radial-gradient(120% 90% at 20% -10%, #3a2c86 0%, transparent 55%),
    linear-gradient(200deg, var(--violet-top), var(--violet-deep) 70%);
  background-attachment:fixed;
  color:var(--paper);
  font-family:'Space Grotesk', sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }

::selection{ background:var(--coral); color:var(--paper); }

:focus-visible{
  outline:3px solid var(--coral);
  outline-offset:3px;
}

/* ---------- wind-line backdrop ---------- */
.weather{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.wind-track{
  position:absolute;
  left:0;
  width:200%;
  height:60px;
  display:flex;
  will-change:transform;
}
.wind-track svg{ width:1440px; height:60px; flex:0 0 auto; }
.wt-1{ top:14%;   opacity:.35; animation:driftX 16s linear infinite; }
.wt-2{ top:38%;   opacity:.22; animation:driftX 26s linear infinite reverse; }
.wt-3{ top:64%;   opacity:.30; animation:driftX 20s linear infinite; }
.wt-4{ top:85%;   opacity:.18; animation:driftX 34s linear infinite reverse; }

@keyframes driftX{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- layout shell ---------- */
main, header, footer{ position:relative; z-index:1; }

.wrap{
  max-width:920px;
  margin:0 auto;
  padding:0 clamp(20px, 5vw, 48px);
}

/* ---------- header / hero ---------- */
header{ padding-top:clamp(48px, 8vw, 96px); text-align:center; }

.eyebrow{
  font-family:'Space Mono', monospace;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mist);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before,
.eyebrow::after{
  content:"";
  width:26px;
  height:1px;
  background:var(--mist);
  display:inline-block;
}

h1.wordmark{
  margin:.5em 0 .1em;
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:900;
  font-size:clamp(3.4rem, 15vw, 10.5rem);
  line-height:.85;
  letter-spacing:-.01em;
  color:var(--yellow);
}
h1.wordmark a{ text-decoration:none; }

.letter{
  display:inline-block;
  text-shadow: 5px 0 0 var(--coral), -5px 0 0 rgba(247,245,239,.22);
  animation:gust 3.6s ease-in-out infinite;
  animation-delay:calc(var(--i) * .09s);
  transform-origin:50% 92%;
}
header.big-gust .letter{
  animation-name:gustBig;
  animation-duration:1.3s;
}

@keyframes gust{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  25%{ transform:translateY(-6px) rotate(-3deg); }
  50%{ transform:translateY(2px) rotate(2deg); }
  75%{ transform:translateY(-4px) rotate(-1.5deg); }
}
@keyframes gustBig{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  30%{ transform:translateY(-17px) rotate(-9deg); }
  55%{ transform:translateY(7px) rotate(6deg); }
  80%{ transform:translateY(-11px) rotate(-4deg); }
}

.domain{
  font-family:'Space Mono', monospace;
  font-size:.85rem;
  letter-spacing:.1em;
  color:var(--mist);
  margin-top:.6em;
}

.gust-reading{
  margin-top:2.2em;
  font-family:'Space Mono', monospace;
  font-size:.72rem;
  letter-spacing:.1em;
  color:var(--mist);
  text-transform:uppercase;
}
.gust-reading strong{ color:var(--paper); font-weight:700; }

hr.divider{
  border:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(247,245,239,.25), transparent);
  margin:clamp(48px,8vw,88px) 0;
}

/* ---------- content cards ---------- */
section.log{
  display:grid;
  gap:26px;
  padding-bottom:60px;
}

h2.section-title{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:900;
  font-size:clamp(2rem, 5vw, 3rem);
  color:var(--paper);
  margin:0 0 8px;
  letter-spacing:.01em;
}

.card{
  background:var(--paper);
  color:var(--ink);
  border-radius:2px;
  padding:clamp(22px, 4vw, 34px);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.55);
  transition:transform .35s ease;
}
.card:hover{ transform:rotate(0deg) !important; }
.card p{ margin:0 0 1em; line-height:1.65; font-size:1.02rem; }
.card p:last-child{ margin-bottom:0; }

.card.tilt-a{ transform:rotate(-1.6deg); }
.card.tilt-b{ transform:rotate(1.1deg); }
.card.tilt-c{ transform:rotate(-.8deg); }

.fly-link{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  margin-top:.4em;
  background:var(--coral);
  color:var(--paper);
  text-decoration:none;
  font-family:'Space Mono', monospace;
  font-size:.85rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.85em 1.3em;
  border-radius:2px;
  transition:transform .2s ease, background .2s ease;
}
.fly-link:hover{ transform:translateX(6px); background:#ff6f5c; }
.fly-link.fly-back:hover{ transform:translateX(-6px); }
.fly-link .arrow{ transition:transform .2s ease; }
.fly-link:hover .arrow{ transform:translateX(4px); }
.fly-link.fly-back:hover .arrow{ transform:translateX(-4px); }

.porthole-wrap{ text-align:center; }
.porthole{
  width:min(70vw, 260px);
  aspect-ratio:1/1;
  margin:0 auto 14px;
  border-radius:50%;
  overflow:hidden;
  border:3px dashed rgba(21,15,48,.35);
  padding:10px;
  display:grid;
  place-items:center;
}
.porthole img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
}
figcaption{
  font-family:'Space Mono', monospace;
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(21,15,48,.55);
}

.sign-off{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:900;
  font-size:clamp(1.8rem, 4vw, 2.6rem);
  text-align:center;
  color:var(--yellow);
  margin:10px 0 0;
}

/* ---------- footer ---------- */
footer{
  text-align:center;
  padding:20px 0 56px;
  font-family:'Space Mono', monospace;
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--mist);
  text-transform:uppercase;
}

@media (max-width:520px){
  .letter{ text-shadow:3px 0 0 var(--coral), -3px 0 0 rgba(247,245,239,.22); }
}

@media (prefers-reduced-motion: reduce){
  .letter, header.big-gust .letter{ animation:none !important; }
  .wind-track{ animation:none !important; }
}