:root{
    --paper:#F4F0E6;
    --grey:#E9E3D6;
    --ink:#5A544B;
    --line:#8C857A;
    --muted:#6A6357;
    --green:#4E6B57;
    --rule:rgba(90,84,75,.16);
    color-scheme:light only;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.55;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .72 0 0 0 0 .66 0 0 0 0 .56 0 0 0 .16 0'/></filter><rect width='260' height='260' filter='url(%23p)'/></svg>")}
  body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:49;background:radial-gradient(120% 90% at 50% 40%,transparent 60%,rgba(120,105,80,.10))}
  html{scroll-behavior:smooth;background:#F4F0E6!important}
  main,footer,.hero,section{background:var(--paper)}
  img{display:block;max-width:100%;height:auto}
  body{background:var(--paper)!important;color:var(--ink);font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:1.25rem;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:5.5rem;text-align:center}
  a{color:inherit;text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:1px;text-underline-offset:.22em}
  .wrap{max-width:30rem;margin:0 auto;padding:0 1.75rem;position:relative}

  .caps{font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--ink)}
  .caps.g{color:var(--green)}
  .script{font-style:italic;font-weight:300;letter-spacing:-.005em}

  /* ---------- hero ---------- */
  .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3.5rem 1.5rem 6.5rem}
  .frame{position:absolute;inset:.9rem .9rem 5.4rem;pointer-events:none}
  .frame svg{width:100%;height:100%;display:block}
  .frame path{fill:none;stroke:var(--line);stroke-width:1.1;vector-effect:non-scaling-stroke}
  .bow{position:absolute;top:.2rem;left:50%;transform:translateX(-50%);width:5.2rem;background:var(--paper);padding:0 .5rem}
  .bow path{fill:none;stroke:var(--line);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
  .hero .intro{margin-bottom:1.6rem;line-height:1.9;opacity:0;animation:fade 1s ease .2s forwards}
  .hero .nisse{width:min(42vw,11.5rem);margin:0 auto 1.2rem;border:0;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;opacity:0;animation:fade 1.2s ease .5s forwards}
  .hero .nisse.bark{animation:bark .5s cubic-bezier(.2,.7,.2,1)}
  @keyframes bark{30%{transform:translateY(-.7rem) rotate(-3deg)}60%{transform:rotate(2deg)}}
  .hero h1{font-weight:300;font-style:italic;font-size:clamp(3.4rem,15vw,5.6rem);line-height:.98;color:var(--green);opacity:0;animation:fade 1.2s ease .8s forwards}
  .hero h1 small{display:block;font-size:.34em;font-style:italic;color:var(--muted);letter-spacing:.06em;margin:.15em 0}
  .hero .when{margin-top:1.6rem;opacity:0;animation:fade 1s ease 1.1s forwards}
  .hero .when .caps{display:block;margin-top:.5rem}
  .hero .count{margin-top:1.4rem;color:var(--muted);font-style:italic;opacity:0;animation:fade 1s ease 1.3s forwards}
  .hero .count b{font-weight:400;font-style:normal;color:var(--ink)}
  @keyframes fade{to{opacity:1}}
  @media (prefers-reduced-motion:reduce){.hero *{animation:none!important;opacity:1!important}}

  /* ---------- sections ---------- */
  section{position:relative;padding:4.5rem 0 13rem}
  section:last-of-type{padding-bottom:2.5rem}
  section.grey{background:var(--grey)!important}
  section h2{font-weight:300;font-style:italic;font-size:2.7rem;line-height:1.05;margin:.5rem 0 1.4rem;color:var(--ink)}
  section h2::after{content:"";display:block;width:2.4rem;height:1px;background:var(--green);margin:1.1rem auto 0}
  section p+p{margin-top:.9em}
  .muted{color:var(--muted)}

  /* seam: meadow line art + Nisse */
  .seam{position:relative;height:0;z-index:3}
  .seam .meadow{position:absolute;bottom:-.15rem;left:0;width:100%;height:6.5rem;pointer-events:none}
  .seam .meadow use{fill:none;stroke:var(--green);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
  .seam img{position:absolute;bottom:-.6rem;width:8.2rem;max-height:11.5rem;object-fit:contain;object-position:bottom}
  .seam.l img{left:1.4rem}.seam.r img{right:1.4rem}

  /* program */
  .program{list-style:none;margin-top:1.8rem}
  .program li{padding:1.3rem 0;border-top:1px solid var(--rule)}
  .program li:last-child{border-bottom:1px solid var(--rule)}
  .program time{display:block;font-style:italic;color:var(--green);font-size:1.35rem;letter-spacing:.04em}
  .program strong{display:block;font-weight:500;font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;margin:.25rem 0 .2rem}
  .program span{display:block;color:var(--muted)}

  /* practical */
  dl{margin-top:1.6rem}
  dt{font-weight:500;font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;margin-top:1.6rem}
  dd{margin-top:.3rem;color:var(--muted)}

  /* osa */
  .form-frame{margin-top:1.6rem;background:var(--paper);padding:2rem 1.25rem;min-height:14rem;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--muted);position:relative}
  .form-frame svg{position:absolute;inset:0;width:100%;height:100%}
  .form-frame path{fill:none;stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}

  footer{padding:3rem 1.5rem 2rem;color:var(--muted)}
  footer img{width:5.5rem;margin:0 auto 1.2rem}

  /* bar */
  .bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(248,247,243,.92);backdrop-filter:blur(10px);padding:.85rem 1.5rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;text-align:left}
  .bar::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule)}
  .bar .prog{position:absolute;left:0;top:0;height:1px;width:0;background:var(--green)}
  .bar .paw{position:absolute;top:-.5rem;left:0;width:.95rem;height:.95rem;fill:var(--green);transform:translateX(-50%) rotate(90deg)}
  .bar span{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500}
  .btn{display:inline-block;background:var(--green);color:var(--paper);padding:.7rem 1.4rem;text-decoration:none;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500}

  @media (min-width:48rem){
    .hero .nisse{width:13rem}
    .frame{inset:1.25rem 1.25rem 5.6rem}
    /* desktop: kortet ligger på bordet i stället för att sträckas ut */
    html,body{background:var(--grey)!important}
    main,footer{max-width:40rem;margin:0 auto;box-shadow:-1px 0 var(--rule),1px 0 var(--rule)}
    footer{padding-bottom:3rem}
  }