/* detour.com — dark theme, responsive for phone/tablet/monitor in portrait + landscape */

:root{
  --bg: #0b0d10;
  --panel: #10151c;
  --text: #e9eef5;
  --muted: #b6c0cc;
  --accent: #6aa6ff;
  --focus: #9fd2ff;

  /* Reserve top 15% of the viewport for browser UI */
  --browser-reserve: 0vh;

  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
}

*{ box-sizing: border-box; }

html, body{
  height: 100%;
}

body{
  margin: 0;
  background: radial-gradient(1200px 800px at 50% -10%, rgba(106,166,255,.16), transparent 55%),
              radial-gradient(800px 600px at 110% 10%, rgba(255,170,80,.10), transparent 55%),
              var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.35;
}

.app{
  min-height: 100vh;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 24px;
  display: grid;
  place-items: start center;
}

.brand{
  width: min(1100px, 100%);
  margin: 0 0 14px 0;
  text-align: center;
}

.site-title{
  margin: 0;
  font-weight: 700;
  letter-spacing: .02em;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
}

.hero{
  width: min(1100px, 100%);
  /* No visible frame around the image */
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.image-link{
  display: block;
  border-radius: calc(var(--radius) - 6px);
  overflow: hidden;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.image-link:focus-visible{
  box-shadow: 0 0 0 3px rgba(159,210,255,.35);
  outline: 2px solid rgba(159,210,255,.65);
  outline-offset: 3px;
}

.hero-image{
  display: block;
  width: 100%;
  height: auto;

  /* Keep the image dominant but prevent excessive height on tall screens */
  max-height: min(62vh, 720px);
  object-fit: cover;
  background: #0a0d12;
}

.prompt{
  margin: 12px 6px 2px;
  text-align: center;
  color: var(--muted);
  font-size: clamp(1.0rem, 1.6vw, 1.2rem);
}

.noscript{
  margin: 14px 6px 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
}

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Phone tweaks */
@media (max-width: 480px){
  .hero-image{ max-height: 52vh; }
}

/* Tablet / small laptop */
@media (min-width: 768px){
  .app{
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Large monitors */
@media (min-width: 1200px){
  .hero-image{
    max-height: min(60vh, 760px);
  }
}

/* Landscape: use a bit more image height and tighten vertical spacing */
@media (orientation: landscape){
  :root{ --browser-reserve: 0vh; }
  .app{ padding-top: var(--browser-reserve); }
  .hero-image{ max-height: min(68vh, 760px); }
}

/* Respect users who prefer reduced motion (no animations used, but keep future-safe) */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
}