/* ==========================================================================
   DIRL - Dreaming In Real Life
   Night sky, sunflower, growing light.
   Single column everywhere. No side by side layouts.
   ========================================================================== */

:root{
  --night:       #0B1B33;
  --night-deep:  #06111F;
  --dusk:        #14293F;
  --edge:        #21405E;

  --sun:         #FFC629;
  --sun-warm:    #FFD75E;
  --sun-deep:    #E0A500;

  --sky:         #8FD3F4;
  --sky-soft:    #BEE6FA;

  --cream:       #F7F3E8;
  --cream-dim:   #CBD8E6;

  --r:           18px;
  --r-sm:        10px;
  --read:        720px;
  --frame:       1080px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  color:var(--cream);
  background:var(--night);
  background-image:
    radial-gradient(1100px 700px at 50% -280px, rgba(255,198,41,.20) 0%, rgba(255,198,41,0) 70%),
    radial-gradient(900px 600px at 88% 8%, rgba(143,211,244,.10) 0%, rgba(143,211,244,0) 68%),
    linear-gradient(180deg, var(--night) 0%, var(--night-deep) 100%);
  background-attachment:fixed;
  font-family:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size:19px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}

.frame{ width:100%; max-width:var(--frame); margin:0 auto; padding:0 28px; }
.read { max-width:var(--read); }

/* ---------- Type ---------- */

h1,h2,h3{ font-weight:normal; line-height:1.18; margin:0 0 22px; color:var(--cream); }
h1{ font-size:clamp(38px, 6.2vw, 66px); letter-spacing:-.015em; }
h2{ font-size:clamp(28px, 3.8vw, 40px); }
h3{ font-size:23px; color:var(--sun-warm); }

p{ margin:0 0 22px; max-width:66ch; }
.big{ font-size:23px; line-height:1.7; color:var(--sky-soft); max-width:60ch; }

.sunword{ color:var(--sun); }
.skyword{ color:var(--sky); }

a{ color:var(--sun); text-decoration:none; border-bottom:1px solid rgba(255,198,41,.4); }
a:hover{ color:var(--sun-warm); border-bottom-color:var(--sun-warm); }
a:focus-visible{ outline:3px solid var(--sky); outline-offset:4px; border-radius:3px; }

/* ---------- The sunflower mark ---------- */

.flower{ display:block; width:64px; height:64px; flex:0 0 64px; }
.flower .petal{ fill:var(--sun); }
.flower .petal ellipse:nth-child(n+13){ fill:var(--sun-warm); opacity:.85; }
.flower .core { fill:var(--sun-deep); }
.flower .seeds{ fill:var(--night-deep); }

/* ---------- Header ---------- */

.top{ padding:30px 0 22px; }

.mark{
  display:flex; align-items:center; gap:16px;
  border:0; margin:0 0 22px; width:max-content;
}
.mark:hover{ border:0; }
.mark .name{
  font-size:26px; color:var(--cream); line-height:1.15; letter-spacing:.01em;
}
.mark .name .tm{ font-size:12px; vertical-align:super; color:var(--sun); }
.mark .name b{
  display:block; font-weight:normal; font-size:12px;
  letter-spacing:.34em; text-transform:uppercase; color:var(--sky); margin-top:5px;
}

.menu ul{ list-style:none; margin:0; padding:0; }
.menu li{ display:inline-block; margin:0 26px 8px 0; }
.menu a{
  font-size:16px; color:var(--cream-dim);
  border-bottom:2px solid transparent; padding-bottom:4px;
}
.menu a:hover, .menu a.on{ color:var(--sun); border-bottom-color:var(--sun); }

/* ---------- Petal divider between sections ---------- */

.petals{
  display:flex; justify-content:center; gap:14px;
  padding:6px 0 0; margin:0;
}
.petals span{
  width:9px; height:22px;
  background:var(--sun);
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  opacity:.5;
}
.petals span:nth-child(2){ opacity:.8; transform:scale(1.15); }
.petals span:nth-child(3){ opacity:.5; }

/* ---------- Sections ---------- */

.band{ padding:78px 0; }
.band.first{ padding:34px 0 70px; }
.band.tint{ background:rgba(255,255,255,.022); }

.kicker{
  font-size:14px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--sun); margin:0 0 20px;
}

/* ---------- Her words, set apart ---------- */

.herwords{
  font-size:clamp(22px, 3vw, 30px);
  line-height:1.55;
  color:var(--sky-soft);
  margin:0 0 34px;
  padding:0 0 0 30px;
  border-left:5px solid var(--sun);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  max-width:56ch;
}

/* ---------- Soft cards ---------- */

.bloom{
  background:var(--dusk);
  border:1px solid var(--edge);
  border-radius:var(--r);
  padding:32px 34px;
  margin:0 0 22px;
  max-width:var(--read);
}
.bloom h3{ margin-bottom:12px; }
.bloom p:last-child{ margin-bottom:0; }

.step{ position:relative; padding-left:74px; }
.step .n{
  position:absolute; left:0; top:26px;
  width:48px; height:48px; border-radius:50%;
  background:var(--sun); color:var(--night-deep);
  font-size:20px; line-height:48px; text-align:center;
}

/* ---------- Growing list ---------- */

.grows{ list-style:none; margin:0 0 30px; padding:0; max-width:64ch; }
.grows li{ position:relative; padding:0 0 20px 40px; }
.grows li:before{
  content:""; position:absolute; left:6px; top:12px;
  width:12px; height:12px; border-radius:50%;
  background:var(--sun);
  box-shadow:0 0 0 6px rgba(255,198,41,.16);
}

/* ---------- Buttons ---------- */

.go{
  display:inline-block;
  background:var(--sun); color:var(--night-deep);
  font-family:inherit; font-size:18px;
  padding:17px 36px; border:2px solid var(--sun);
  border-radius:999px; cursor:pointer;
  margin:8px 10px 8px 0;
}
.go:hover{ background:var(--sun-warm); border-color:var(--sun-warm); color:var(--night-deep); }
.go.quiet{ background:transparent; color:var(--sun); }
.go.quiet:hover{ background:rgba(255,198,41,.12); color:var(--sun-warm); }

/* ---------- Pictures ---------- */

figure{ margin:0 0 34px; }
figure img{
  display:block; width:100%; height:auto;
  border-radius:var(--r);
  border:1px solid var(--edge);
}
figcaption{ font-size:16px; color:var(--cream-dim); padding-top:12px; max-width:60ch; }

.scene{
  position:relative;
  border-radius:var(--r);
  overflow:hidden;
  margin:0 0 36px;
  min-height:340px;
  display:flex; align-items:flex-end;
  background-size:cover; background-position:center;
  border:1px solid var(--edge);
}
.scene .said{
  width:100%; padding:34px 36px;
  background:linear-gradient(180deg, rgba(6,17,31,0) 0%, rgba(6,17,31,.93) 100%);
}
.scene .said p{ margin:0; font-size:24px; line-height:1.5; color:var(--cream); max-width:44ch; }

/* ---------- Form ---------- */

.plot{
  background:var(--dusk);
  border:1px solid var(--edge);
  border-top:5px solid var(--sun);
  border-radius:var(--r);
  padding:38px 36px;
  max-width:var(--read);
}
label{ display:block; font-size:16px; color:var(--sky); margin:0 0 8px; }
input[type=text], input[type=email], textarea{
  width:100%; max-width:520px;
  background:var(--night-deep); color:var(--cream);
  border:1px solid var(--edge); border-radius:var(--r-sm);
  padding:15px 16px; font-size:18px; font-family:inherit;
  margin:0 0 24px;
}
input:focus, textarea:focus{ outline:3px solid var(--sky); outline-offset:2px; }
textarea{ min-height:150px; }

.word{
  border:1px solid var(--edge);
  border-left:5px solid var(--sky);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:20px 26px; margin:0 0 26px;
  color:var(--sky-soft); max-width:var(--read);
}
.word p:last-child{ margin-bottom:0; }

/* ---------- Footer ---------- */

.ground{
  background:var(--night-deep);
  border-top:1px solid var(--edge);
  padding:54px 0 64px;
  font-size:16px; color:var(--cream-dim);
}
.ground a{ color:var(--sky); border-bottom-color:rgba(143,211,244,.32); }
.ground a:hover{ color:var(--sun); }
.ground ul{ list-style:none; margin:0 0 26px; padding:0; }
.ground li{ margin:0 0 10px; }
.fine{ font-size:15px; color:#93A9C2; max-width:74ch; }

/* ---------- Small screens ---------- */

@media (max-width:640px){
  body{ font-size:18px; }
  .band{ padding:52px 0; }
  .frame{ padding:0 20px; }
  .big{ font-size:20px; }
  .bloom{ padding:26px 24px; }
  .step{ padding-left:0; }
  .step .n{ position:static; margin:0 0 16px; }
  .plot{ padding:28px 24px; }
  .scene{ min-height:250px; }
  .scene .said p{ font-size:20px; }
  .menu li{ display:block; margin:0 0 12px; }
}

@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }