/*
 * Fargene og tonen er appens egne – se src/theme/palette.ts.
 * Ingen rammeverk, ingen byggesteg: siden er fire HTML-filer og denne.
 */
:root {
  /* clearDay: flate + stor og liten sirkel */
  --sky: #d8f3f1;
  --sky-ring-1: #e0f2e7;
  --sky-ring-2: #eaf0db;
  /* clearNight */
  --night: #252424;
  --night-ring-1: #323130;
  --night-ring-2: #3f3e3d;
  /* overcastDay */
  --rain-top: #c3dfe6;
  --rain-mid: #d9eeed;
  --rain-bottom: #cde6e9;
  --raindrop: #5c8bb9;
  --sun-outer: #ffecbd;
  --sun-middle: #ffde93;
  --sun-inner: #ffd75a;
  --moon: #ffecbd;
  --star: #fff6de;
  --grass: #d5e07f;
  --grass-deep: #c3d16b;
  --ink: #353535;
  --ink-soft: #55594a;
  --ink-on-grass: #444b2a;
  --card: rgba(255, 255, 255, 0.6);
  --link: #2f6f6b;
  --measure: 34rem;
  --round: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  /* Bunnteksten skal ligge nederst også på korte sider, som 404. */
  display: flex;
  flex-direction: column;
  font: 400 17px/1.6 var(--round);
  color: var(--ink);
  background: var(--sky);
}

img {
  max-width: 100%;
}

a {
  color: var(--link);
}

a:hover {
  color: var(--ink);
}

.wrap {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

h1,
h2 {
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: balance;
}

h2 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.8rem, 4.4vw, 2.8rem);
}

.lede {
  margin: 0;
  max-width: 36rem;
  font-size: 1.1rem;
  color: var(--ink-on-grass);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* --- Topp (alle sider) --- */
.masthead {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}

.masthead img {
  width: 38px;
  height: 38px;
  border-radius: 9px;
}

.masthead strong {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

/* ============ Forsiden ============ */

/* --- Scenen: helten er appens egen gård --- */
.scene {
  position: relative;
  overflow: hidden;
  min-height: min(100svh, 920px);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 78% 118%, var(--sky-ring-2) 0 38%, transparent 38.2%),
    radial-gradient(circle at 78% 118%, var(--sky-ring-1) 0 58%, transparent 58.2%),
    var(--sky);
}

.sun {
  position: absolute;
  right: 9%;
  top: 12%;
  width: clamp(90px, 14vw, 170px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sun-inner);
  box-shadow:
    0 0 0 clamp(14px, 2vw, 26px) var(--sun-middle),
    0 0 0 clamp(28px, 4vw, 52px) var(--sun-outer);
}

.cloud {
  position: absolute;
  width: clamp(90px, 12vw, 150px);
  height: auto;
  animation: drift 60s ease-in-out infinite alternate;
}

.cloud-1 {
  left: 64%;
  top: 44%;
}

.cloud-2 {
  left: 6%;
  top: 48%;
  width: clamp(70px, 8vw, 110px);
  animation-duration: 80s;
  animation-direction: alternate-reverse;
}

@keyframes drift {
  from {
    transform: translateX(-30px);
  }
  to {
    transform: translateX(30px);
  }
}

.scene-top {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  padding-top: 1.4rem;
}

.scene-top nav {
  margin-left: auto;
  display: flex;
  gap: 1.3rem;
  font-weight: 500;
  font-size: 0.95rem;
}

.scene-top nav a {
  color: inherit;
  text-decoration: none;
}

.scene-top nav a:hover {
  text-decoration: underline;
}

.scene-text {
  position: relative;
  z-index: 3;
  padding-top: clamp(1.5rem, 6vh, 5rem);
}

.eyebrow {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.scene h1 {
  margin: 0;
  max-width: 38rem;
  font-size: clamp(2.4rem, min(7vw, 8.5vh), 5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.scene .sub {
  margin: 1rem 0 0;
  max-width: 28rem;
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
}

/* Lagene fyller bredden og beskjæres på sidene, aldri på toppen – ellers
   stikker låven opp i teksten på brede skjermer. */
.land {
  position: relative;
  flex: none;
  margin-top: auto;
  height: clamp(250px, min(42vw, 46vh), 470px);
}

.land img {
  position: absolute;
  max-width: none;
}

.land .hills,
.land .farm {
  left: 0;
  width: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

.land .hills {
  bottom: 22%;
  height: 70%;
}

.land .farm {
  bottom: 0;
  height: 100%;
}

.land .platform {
  bottom: -6%;
  left: 50%;
  width: clamp(340px, 52vw, 640px);
  height: auto;
  transform: translateX(-50%);
}

.land .dag {
  z-index: 2;
  left: 50%;
  bottom: 17%;
  width: clamp(150px, 20vw, 250px);
  height: auto;
  transform: translateX(-50%);
}

/* --- Garderoben --- */
main {
  background: var(--grass);
}

.wardrobe {
  padding: 4.5rem 0 5rem;
}

.rack {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(84px, 1fr);
  max-width: 78rem;
  margin: 2.5rem auto 0;
  padding: 0 1.25rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.rack::-webkit-scrollbar {
  display: none;
}

.rack li {
  display: flex;
  flex-direction: column;
  align-items: center;
  scroll-snap-align: center;
}

.rack img {
  width: auto;
  height: clamp(96px, 10vw, 128px);
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.rack li:hover img {
  transform: translateY(-8px) rotate(-3deg);
}

.rack span {
  margin-top: 0.8rem;
  font-weight: 600;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.scale {
  width: calc(100% - 2.5rem);
  max-width: 75rem;
  height: 6px;
  margin: 1rem auto 0;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--raindrop),
    #9fc3cf 30%,
    #f4f6d6 50%,
    var(--sun-inner) 72%,
    #f0a04b
  );
}

/* --- Tolv timer: midnatt og morgen --- */
.moment {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem 3rem;
  align-items: center;
}

.clock {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.moment h2 {
  font-size: clamp(2.4rem, 6.4vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.moment p:not(.clock) {
  max-width: 26rem;
  margin: 1.2rem 0 0;
  font-size: 1.15rem;
}

.shot {
  position: relative;
  justify-self: center;
  width: clamp(200px, 26vw, 290px);
}

.phone {
  position: relative;
  z-index: 1;
  padding: 7px;
  border-radius: 34px;
  background: #151515;
  line-height: 0;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.55);
}

.phone img {
  width: 100%;
  height: auto;
  border-radius: 28px;
}

.night {
  padding: 6rem 0;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 70% 60%, var(--night-ring-2) 0 22%, transparent 22.2%),
    radial-gradient(circle at 70% 60%, var(--night-ring-1) 0 40%, transparent 40.2%),
    var(--night);
}

.night .clock,
.night h2 span {
  color: var(--moon);
}

.night p:not(.clock) {
  color: rgba(255, 255, 255, 0.75);
}

.night .moon {
  position: absolute;
  z-index: 0;
  left: 30%;
  top: -18%;
  width: 150%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--moon);
  opacity: 0.08;
}

/* Stjernene fra appens natthimmel. Ren CSS: fire lag prikker, der tre blinker
   i hver sin takt, og to stjerneskudd med ulik periode så de sjelden kommer
   likt. Med redusert bevegelse stopper regelen øverst alle animasjonene:
   stjernene står stille, og skuddene blir usynlige. */
.night {
  position: relative;
}

.night .wrap {
  position: relative;
  z-index: 1;
}

.stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.stars span {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: transparent;
}

.stars span:nth-child(1) {
  box-shadow:
    663px 932px rgba(255, 246, 222, 0.49),
    98px 32px rgba(255, 246, 222, 0.54),
    748px 495px rgba(255, 246, 222, 0.67),
    439px 14px rgba(255, 246, 222, 0.5),
    143px 156px rgba(255, 246, 222, 0.54),
    121px 781px rgba(255, 246, 222, 0.39),
    457px 549px rgba(255, 246, 222, 0.55),
    126px 489px rgba(255, 246, 222, 0.49),
    452px 18px rgba(255, 246, 222, 0.65),
    593px 322px rgba(255, 246, 222, 0.54),
    1169px 216px rgba(255, 246, 222, 0.64),
    370px 52px rgba(255, 246, 222, 0.55),
    384px 276px rgba(255, 246, 222, 0.54),
    128px 475px rgba(255, 246, 222, 0.57),
    1016px 606px rgba(255, 246, 222, 0.5),
    643px 370px rgba(255, 246, 222, 0.67),
    740px 208px rgba(255, 246, 222, 0.63),
    1431px 723px rgba(255, 246, 222, 0.38),
    614px 432px rgba(255, 246, 222, 0.66),
    1493px 352px rgba(255, 246, 222, 0.56),
    149px 62px rgba(255, 246, 222, 0.5),
    1550px 247px rgba(255, 246, 222, 0.68),
    863px 14px rgba(255, 246, 222, 0.58),
    1565px 468px rgba(255, 246, 222, 0.63),
    1675px 221px rgba(255, 246, 222, 0.59),
    1217px 402px rgba(255, 246, 222, 0.63),
    140px 797px rgba(255, 246, 222, 0.68),
    970px 625px rgba(255, 246, 222, 0.37),
    1497px 630px rgba(255, 246, 222, 0.58),
    1395px 774px rgba(255, 246, 222, 0.45),
    790px 855px rgba(255, 246, 222, 0.47),
    945px 260px rgba(255, 246, 222, 0.56),
    1011px 25px rgba(255, 246, 222, 0.62),
    264px 674px rgba(255, 246, 222, 0.49),
    1784px 402px rgba(255, 246, 222, 0.41),
    822px 459px rgba(255, 246, 222, 0.66),
    1677px 334px rgba(255, 246, 222, 0.54),
    1446px 319px rgba(255, 246, 222, 0.48),
    779px 945px rgba(255, 246, 222, 0.4),
    360px 85px rgba(255, 246, 222, 0.58),
    24px 390px rgba(255, 246, 222, 0.56),
    538px 192px rgba(255, 246, 222, 0.4),
    1094px 273px rgba(255, 246, 222, 0.55),
    257px 617px rgba(255, 246, 222, 0.53),
    1264px 576px rgba(255, 246, 222, 0.61),
    935px 871px rgba(255, 246, 222, 0.62),
    1791px 606px rgba(255, 246, 222, 0.55),
    815px 302px rgba(255, 246, 222, 0.39),
    1299px 304px rgba(255, 246, 222, 0.42),
    427px 344px rgba(255, 246, 222, 0.39),
    1230px 21px rgba(255, 246, 222, 0.35),
    309px 445px rgba(255, 246, 222, 0.68),
    1256px 8px rgba(255, 246, 222, 0.66),
    1257px 280px rgba(255, 246, 222, 0.57),
    711px 517px rgba(255, 246, 222, 0.52),
    236px 808px rgba(255, 246, 222, 0.7),
    954px 385px rgba(255, 246, 222, 0.46),
    295px 51px rgba(255, 246, 222, 0.47),
    542px 383px rgba(255, 246, 222, 0.59),
    1057px 7px rgba(255, 246, 222, 0.68),
    1081px 266px rgba(255, 246, 222, 0.59),
    55px 697px rgba(255, 246, 222, 0.45),
    1316px 826px rgba(255, 246, 222, 0.59),
    534px 425px rgba(255, 246, 222, 0.67),
    728px 714px rgba(255, 246, 222, 0.54),
    1595px 408px rgba(255, 246, 222, 0.57),
    1255px 762px rgba(255, 246, 222, 0.69),
    1746px 119px rgba(255, 246, 222, 0.43),
    820px 675px rgba(255, 246, 222, 0.43),
    1060px 398px rgba(255, 246, 222, 0.61);
}

.stars span:nth-child(2) {
  width: 2px;
  height: 2px;
  box-shadow:
    57px 736px rgba(255, 246, 222, 0.84),
    396px 620px rgba(255, 246, 222, 0.99),
    915px 758px rgba(255, 246, 222, 0.92),
    715px 941px rgba(255, 246, 222, 0.81),
    451px 51px rgba(255, 246, 222, 0.84),
    691px 126px rgba(255, 246, 222, 0.89),
    1249px 797px rgba(255, 246, 222, 0.84),
    1337px 249px rgba(255, 246, 222, 0.89),
    1709px 583px rgba(255, 246, 222, 0.97),
    1602px 642px rgba(255, 246, 222, 0.76),
    365px 337px rgba(255, 246, 222, 0.89),
    177px 749px rgba(255, 246, 222, 0.99),
    810px 367px rgba(255, 246, 222, 0.92),
    173px 658px rgba(255, 246, 222, 0.75),
    260px 9px rgba(255, 246, 222, 0.88),
    953px 756px rgba(255, 246, 222, 0.74),
    1692px 510px rgba(255, 246, 222, 0.84),
    717px 89px rgba(255, 246, 222, 0.86),
    43px 3px rgba(255, 246, 222, 0.99),
    1330px 51px rgba(255, 246, 222, 0.92),
    285px 337px rgba(255, 246, 222, 0.96),
    1691px 839px rgba(255, 246, 222, 0.71);
  animation: twinkle 3.1s ease-in-out infinite alternate;
}

.stars span:nth-child(3) {
  width: 2px;
  height: 2px;
  box-shadow:
    435px 202px rgba(255, 246, 222, 0.77),
    1201px 232px rgba(255, 246, 222, 0.86),
    1708px 71px rgba(255, 246, 222, 0.97),
    724px 869px rgba(255, 246, 222, 0.9),
    1669px 877px rgba(255, 246, 222, 0.83),
    1798px 407px rgba(255, 246, 222, 0.86),
    1072px 417px rgba(255, 246, 222, 0.96),
    1590px 110px rgba(255, 246, 222, 0.7),
    1636px 84px rgba(255, 246, 222, 0.74),
    1267px 658px rgba(255, 246, 222, 0.87),
    667px 608px rgba(255, 246, 222, 0.86),
    988px 729px rgba(255, 246, 222, 0.73),
    1147px 24px rgba(255, 246, 222, 0.76),
    86px 714px rgba(255, 246, 222, 0.85),
    1150px 9px rgba(255, 246, 222, 0.97),
    129px 347px rgba(255, 246, 222, 0.88),
    1035px 521px rgba(255, 246, 222, 0.76),
    567px 356px rgba(255, 246, 222, 0.86),
    979px 414px rgba(255, 246, 222, 0.77),
    1071px 842px rgba(255, 246, 222, 0.98),
    531px 900px rgba(255, 246, 222, 0.97),
    414px 797px rgba(255, 246, 222, 0.74);
  animation: twinkle 4.3s ease-in-out -1.7s infinite alternate;
}

.stars span:nth-child(4) {
  width: 3px;
  height: 3px;
  box-shadow:
    249px 296px rgba(255, 246, 222, 0.93),
    1374px 156px rgba(255, 246, 222, 0.91),
    1371px 211px rgba(255, 246, 222, 0.91),
    1591px 88px rgba(255, 246, 222, 0.97),
    1352px 270px rgba(255, 246, 222, 0.93),
    281px 958px rgba(255, 246, 222, 0.92),
    192px 302px rgba(255, 246, 222, 0.95),
    1367px 787px rgba(255, 246, 222, 0.92);
  animation: twinkle 2.4s ease-in-out -0.8s infinite alternate;
}

@keyframes twinkle {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.25;
  }
}

.stars i {
  position: absolute;
  width: 90px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(255, 246, 222, 0), var(--star));
  opacity: 0;
  transform-origin: left center;
}

.stars i:nth-of-type(1) {
  top: 12%;
  left: 18%;
  --angle: 24deg;
  animation: shoot 9s ease-out 2s infinite;
}

.stars i:nth-of-type(2) {
  top: 8%;
  left: 78%;
  --angle: 152deg;
  animation: shoot 13s ease-out 7s infinite;
}

/* Det meste av perioden er skuddet borte; det lyser bare i et knapt sekund. */
@keyframes shoot {
  0%,
  90% {
    opacity: 0;
    transform: rotate(var(--angle)) translateX(0);
  }
  92% {
    opacity: 1;
  }
  97% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: rotate(var(--angle)) translateX(260px);
  }
}

.morning {
  padding: 6rem 0 7rem;
  background:
    repeating-linear-gradient(
      100deg,
      transparent 0 46px,
      rgba(92, 139, 185, 0.1) 46px 47px,
      transparent 47px 110px
    ),
    linear-gradient(180deg, var(--rain-top), var(--rain-mid) 70%, var(--rain-bottom));
}

.morning .moment {
  grid-template-columns: 1fr 1.2fr;
}

.morning .clock {
  color: #3f6d93;
}

.morning p:not(.clock) {
  color: #3b4a50;
}

/* --- Resten av dagen, på gresset --- */
.day {
  position: relative;
  margin-top: -60px;
  padding: 5rem 0 4rem;
  background: var(--grass);
  border-radius: 50% 50% 0 0 / 60px 60px 0 0;
}

.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
}

.widget {
  justify-self: center;
  max-width: 20rem;
  height: auto;
  border-radius: 28px;
  box-shadow: 0 24px 50px -18px rgba(40, 50, 10, 0.45);
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 4rem 0 0;
  padding: 0;
  list-style: none;
}

.facts li {
  padding: 1.3rem 1.4rem;
  border-radius: 20px;
  background: var(--card);
}

.facts b {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 1.05rem;
}

.facts span {
  font-size: 0.96rem;
  color: #5a5a50;
}

.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 3rem;
  padding: 1.4rem 1.6rem;
  border-radius: 24px;
  background: var(--card);
}

.contact img {
  width: 80px;
  height: auto;
}

.contact h2 {
  margin: 0;
  font-size: 1.5rem;
}

.contact p {
  margin: 0.2rem 0 0;
}

.contact a {
  font-weight: 600;
}

/* ============ Undersidene: 404, personvern, støtte ============ */

body > .wrap:first-child {
  padding-top: 1.4rem;
}

.hero {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2rem;
  padding: 3.5rem 0 0;
}

.hero h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
}

.hero p {
  margin: 0;
  max-width: 26rem;
  font-size: 1.15rem;
  color: var(--ink-soft);
}

.hero img {
  width: clamp(150px, 26vw, 250px);
  height: auto;
  /* Dag står på bakken, ikke over den. */
  margin-bottom: -2px;
}

.ground {
  height: 90px;
  margin-top: -1px;
  background: var(--grass);
  border-radius: 50% 50% 0 0 / 40px 40px 0 0;
}

.ground-fill {
  background: var(--grass);
  /* Tar den ledige plassen på korte sider, så det ikke dukker opp himmel
     under bakken. På lange sider finnes ingen ledig plass, og den er inert. */
  flex: 1;
}

.prose {
  max-width: var(--measure);
  padding-bottom: 3rem;
}

.prose h1 {
  margin-bottom: 0.25rem;
  font-size: clamp(1.8rem, 5vw, 2.5rem);
}

.prose .updated {
  margin-top: 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.prose h2 {
  margin-top: 2.25rem;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}

.prose ul {
  padding-left: 1.2rem;
}

.prose li {
  margin-bottom: 0.5rem;
}

/* --- Bunn --- */
footer {
  margin-top: auto;
  padding: 1.8rem 0 2.4rem;
  font-size: 0.9rem;
  color: #3f4429;
  background: var(--grass-deep);
}

footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.4rem;
}

footer a {
  color: #2f4420;
}

footer .spacer {
  flex: 1;
}

/* --- Smal skjerm --- */
@media (max-width: 720px) {
  .scene {
    min-height: 0;
  }
  .scene-top nav {
    display: none;
  }
  .sun {
    top: 6rem;
    right: -6%;
  }
  .land {
    margin-top: 1.5rem;
  }
  .rack {
    grid-auto-columns: 30%;
  }
  .moment,
  .morning .moment,
  .split,
  .facts {
    grid-template-columns: 1fr;
  }
  .night,
  .morning {
    padding-top: 4rem;
  }
  /* Teksten først, også om morgenen. */
  .morning .shot {
    order: 1;
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .hero img {
    justify-self: end;
  }
}