/* home.css — the one-screen home page (never scrolls), in the spirit of Osahon's hero:
   a full-bleed photo, a soft dark shade on the left, big serif words and one white button. */
body.is-home { height: 100dvh; overflow: hidden; display: grid; grid-template-rows: auto 1fr; background: #000; }
body.is-home .site-header { background: transparent; }
body.is-home .site-header .wrap { width: 100%; max-width: none; padding-left: max(24px, 3vw, env(safe-area-inset-left, 0px)); padding-right: max(24px, 3vw, env(safe-area-inset-right, 0px)); }
/* search on the home screen: a glass bar over the photo */
body.is-home .search input { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff; backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
body.is-home .search input::placeholder { color: rgba(255, 255, 255, .72); }
body.is-home .search input:focus { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .45); box-shadow: 0 0 0 4px rgba(255, 255, 255, .08); }
body.is-home .search > .ic, body.is-home .search-toggle { color: #fff; filter: drop-shadow(0 0 5px rgba(255, 255, 255, .4)) drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); }
body.is-home .brand img { height: clamp(40px, 3.6vw, 54px); filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .35)); }

/* background photo (or your loop video) + the shade that keeps the words readable */
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #0a0708; }
.backdrop .bg, .backdrop video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.backdrop .bg { animation: settle 2.4s var(--ease) both; }
@keyframes settle { from { transform: scale(1.06); opacity: 0; } to { transform: none; opacity: 1; } }
.backdrop video { opacity: 0; transition: opacity 1.2s var(--ease); }
.backdrop video.playing { opacity: 1; }
.backdrop .shade { position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 7, 8, .94) 0%, rgba(10, 7, 8, .82) 26%, rgba(10, 7, 8, .45) 52%, rgba(10, 7, 8, .12) 78%, rgba(10, 7, 8, .05) 100%),
    linear-gradient(180deg, rgba(10, 7, 8, .55) 0%, transparent 22%, transparent 70%, rgba(10, 7, 8, .5) 100%); }

/* the words — Osahon's rhythm: a small spaced name, 2–3 words in serif, a short line, one white button */
.home { min-height: 0; display: grid; align-items: center; position: relative; padding: 0 max(24px, 3vw) 6vh; }
.hero { width: min(780px, 100%); margin-left: clamp(0px, 6.5vw, 120px); color: #fff; }
.hero .kicker { margin: 0 0 clamp(18px, 3vh, 28px); font-size: clamp(.82rem, .76rem + .25vw, 1rem); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.hero h1 { font-family: var(--serif); font-weight: 400; font-variation-settings: "SOFT" 30, "opsz" 40; font-size: clamp(2.5rem, 1.3rem + 3.6vw, 4.7rem); line-height: 1.06; letter-spacing: -.018em; margin: 0 0 clamp(18px, 3vh, 28px); color: #fff; text-wrap: initial; }
.hero .lede { font-size: clamp(1rem, .94rem + .3vw, 1.2rem); color: rgba(255, 255, 255, .84); max-width: 44ch; line-height: 1.6; }
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 1.8vw, 26px); margin-top: clamp(22px, 4.4vh, 44px); }
.hero .btn { height: clamp(40px, 2.2rem + .9vw, 52px); padding: 0 clamp(16px, .9rem + .8vw, 26px); border-radius: clamp(11px, .6rem + .3vw, 14px); font-size: clamp(.84rem, .78rem + .22vw, .98rem); gap: 7px; }
.hero .btn svg { width: clamp(14px, .8rem + .2vw, 16px); height: auto; }
.hero .link { color: #fff; font-size: clamp(.84rem, .78rem + .22vw, .98rem); }
.hero .link:hover { color: var(--rose); }

/* the waving girl: sits right on the bottom edge (no gap underneath), small, with a soft shadow */
body.is-home { --girl: clamp(96px, 8.6vw, 132px); }
.hello-girl {
  position: fixed; z-index: 20; right: max(20px, 4vw, env(safe-area-inset-right, 0px)); bottom: -2px;
  width: var(--girl); line-height: 0;
  transform-origin: 50% 100%; transition: transform .45s var(--spring);
}
.hello-girl img { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .55)) drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.hello-girl:hover { transform: translateY(-5px) rotate(-2deg); }
.hello-girl:active { transform: scale(.96); }
.hello-girl:focus-visible { outline-offset: -4px; }
.ready .hello-girl { animation: girl-hi 1s 1.4s var(--spring) both; }
@keyframes girl-hi { from { transform: translateY(100%); } }

/* doodle notes */
.note { position: fixed; z-index: 19; pointer-events: none; color: #fff; font-family: "Caveat", "Segoe Print", cursive; font-size: clamp(1.2rem, 1rem + .45vw, 1.5rem); line-height: 1; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.note svg { overflow: visible; }
.note path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ready .note path { animation: draw 1s 2s var(--ease) forwards; }
.note span { opacity: 0; }
.ready .note span { animation: fade-in .8s 1.8s forwards; }
@keyframes fade-in { to { opacity: 1; } }
.note-girl { right: calc(max(20px, 4vw, env(safe-area-inset-right, 0px)) + var(--girl) * .86); bottom: calc(var(--girl) * 1.18); display: grid; justify-items: end; }
.note-girl svg { width: 64px; height: 36px; margin-right: -4px; }
/* pieces settle in after the loader */
.in { opacity: 0; transform: translateY(14px); }
.ready .in { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); }
.ready .in.d2 { transition-delay: .1s; } .ready .in.d3 { transition-delay: .2s; } .ready .in.d4 { transition-delay: .3s; }

/* tablets + phones: words centred, shade from the bottom up */
@media (max-width: 900px) {
  .backdrop .bg { object-position: 50% 50%; }
  .backdrop .shade { background: linear-gradient(180deg, rgba(10, 7, 8, .6) 0%, rgba(10, 7, 8, .45) 30%, rgba(10, 7, 8, .72) 62%, rgba(10, 7, 8, .9) 100%); }
  .home { align-items: center; justify-items: center; padding: 0 var(--gut-r) calc(env(safe-area-inset-bottom, 0px) + 18vh) var(--gut-l); }
  .hero { margin: 0; text-align: center; display: grid; justify-items: center; }
  .hero h1 { font-size: clamp(2.2rem, 8.6vw, 3.8rem); }
  .hero .lede { max-width: 32ch; }
  .hero .lede { margin-inline: auto; max-width: 30ch; }
  .hero .actions { justify-content: center; gap: 22px; }
}
@media (max-width: 700px) {
  body.is-home { --girl: 74px; }                 /* smaller on phones */
  .note-girl { font-size: 1.1rem; }
  .note-girl svg { width: 44px; height: 28px; }
  .hero .lede { font-size: 1.04rem; }
}
@media (max-width: 380px) { .hero h1 { font-size: 2.05rem; } }
/* short screens (small laptops, phones on their side): tighten everything so it all fits */
@media (max-height: 720px) {
  .hero h1 { font-size: min(clamp(2.2rem, 1.3rem + 3.6vw, 4.7rem), 9.4vh); }
  .hero .kicker { margin-bottom: 2.4vh; } .hero h1 { margin-bottom: 2.4vh; } .hero .actions { margin-top: 3.4vh; }
  .hero .btn { height: clamp(38px, 6.4vh, 50px); }
}
@media (max-height: 560px) { .note { display: none; } body.is-home { --girl: 70px; } }