/* Däckladan – gemensam grund: färger, typsnitt, knappar, fält och "lappen" (tag). */
@font-face{font-family:"Familjen Grotesk";src:url("/assets/fonts/familjen-grotesk-latin.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("/assets/fonts/barlow-condensed-600-latin.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --bg:#16110d;          /* timmer i mörker */
  --bg-2:#1e1712;        /* upphöjd yta */
  --bg-3:#2a2019;        /* fält, hover */
  --line:rgba(242,232,213,.12);
  --line-2:rgba(242,232,213,.24);
  --fg:#f2e8d5;          /* gräddvit text */
  --fg-2:#cfc1a8;        /* sekundär text */
  --fg-3:#ab9c84;        /* tertiär text */
  --amber:#e2a23b;       /* lappen */
  --amber-hi:#efb553;
  --amber-lo:#c4861f;
  --ink:#21170c;         /* text på lappen */
  --ink-2:#4a3519;
  --plate:#f6f5ef;
  --plate-blue:#1d4ea6;
  --ok:#a7d8b0;
  --err:#ffab96;
  --err-ink:#6e1a0b;
  --font:"Familjen Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --data:"Barlow Condensed","Familjen Grotesk",ui-sans-serif,sans-serif;
  --r-sm:6px;--r-md:10px;--r-lg:16px;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:20px;
  --section:80px;
  --maxw:1320px;
  --shadow:0 18px 40px -18px rgba(0,0,0,.65),0 4px 10px -4px rgba(0,0,0,.4);
  color-scheme:dark;
}
@media (min-width:600px){:root{--gutter:32px}}
@media (min-width:900px){:root{--gutter:48px;--section:112px}}
@media (min-width:1280px){:root{--gutter:72px;--section:144px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:88px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-optical-sizing:auto}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--amber-hi)}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
p,li,dd,dt,figcaption{text-wrap:pretty}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
ul{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--amber);color:var(--ink)}
:focus-visible{outline:2px solid var(--amber-hi);outline-offset:3px;border-radius:2px}
html{scrollbar-color:#4a3a2c var(--bg)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#4a3a2c;border-radius:8px;border:3px solid var(--bg)}
input,textarea{caret-color:var(--amber)}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--amber);color:var(--ink);padding:10px 16px;border-radius:var(--r-sm);font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.skip:hover{color:var(--ink)}
.wrap{width:100%;max-width:var(--maxw);margin-left:auto;margin-right:auto;padding-left:var(--gutter);padding-right:var(--gutter)}

/* Typografi */
.h2{font-size:clamp(2rem,1.2rem + 2.6vw,3.25rem);letter-spacing:-.03em}
.h3{font-size:1.375rem;letter-spacing:-.015em}
.lede{color:var(--fg-2);font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);max-width:58ch}

/* Knappar */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:0 22px;border-radius:var(--r-sm);border:1px solid transparent;font-weight:700;font-size:1rem;letter-spacing:-.005em;text-decoration:none;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn--amber{background:var(--amber);color:var(--ink)}
.btn--amber:hover{background:var(--amber-hi);color:var(--ink)}
.btn--ink{background:var(--ink);color:var(--fg)}
.btn--ink:hover{background:#38280f;color:#fff}
.btn--line{border-color:var(--line-2);color:var(--fg);background:transparent}
.btn--line:hover{border-color:var(--amber);color:var(--amber-hi)}
.btn--ghost-ink{border-color:rgba(33,23,12,.35);color:var(--ink);background:transparent}
.btn--ghost-ink:hover{border-color:var(--ink);color:var(--ink);background:rgba(33,23,12,.06)}
.btn--sm{min-height:40px;padding:0 16px;font-size:.9375rem}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.btn--ink:focus-visible,.btn--ghost-ink:focus-visible{outline-color:var(--ink)}
.link-arrow{display:inline-flex;align-items:center;gap:.4em;font-weight:700;color:var(--amber-hi);text-decoration:none}
.link-arrow::after{content:"";width:.9em;height:.9em;background:currentColor;-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 12L12 4M6 4h6v6" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 12L12 4M6 4h6v6" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;transition:transform .2s var(--ease)}
.link-arrow:hover{text-decoration:underline}
.link-arrow:hover::after{transform:translate(2px,-2px)}

/* Lappen: den hängande märklappen som sitter på varje fälg i ladugården */
.tag{position:relative;filter:drop-shadow(0 14px 22px rgba(0,0,0,.45)) drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.tag__body{position:relative;background:var(--amber);color:var(--ink);padding:24px 26px 24px 64px;clip-path:polygon(26px 0,100% 0,100% 100%,26px 100%,0 calc(100% - 26px),0 26px);border-radius:0 var(--r-md) var(--r-md) 0}
.tag__body::after{content:"";position:absolute;inset:8px 8px 8px 40px;border:1px dashed rgba(33,23,12,.28);border-radius:0 6px 6px 0;pointer-events:none}
.tag__eyelet{position:absolute;z-index:2;left:20px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 4px #b77b1c,inset 0 2px 3px rgba(0,0,0,.6)}

/* Formulär */
.form{display:grid;gap:16px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:6px;min-width:0}
.field label{font-size:.9375rem;font-weight:600;color:var(--fg)}
.field .opt{font-weight:400;color:var(--fg-3)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:11px 14px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--bg);color:var(--fg);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.field textarea{min-height:110px;resize:vertical;line-height:1.5}
.field select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 6l4 4 4-4" fill="none" stroke="%23cfc1a8" stroke-width="1.6" stroke-linecap="round"/></svg>');background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
.field input::placeholder,.field textarea::placeholder{color:#8f8170}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(242,232,213,.4)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(226,162,59,.28)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--err)}
.upper{text-transform:uppercase}
.upper::placeholder{text-transform:none}
.form__hint{font-size:.9375rem;color:var(--fg-3)}
.form__hint.is-error{color:var(--err)}
.form__msg:empty{display:none}
.form__msg{padding:14px 16px;border-radius:var(--r-sm);font-size:.9375rem;line-height:1.5;background:var(--bg-3);border:1px solid var(--line-2)}
.form__msg.is-ok{border-color:rgba(167,216,176,.45);color:var(--ok)}
.form__msg.is-err{border-color:rgba(255,171,150,.45);color:var(--err)}
.form__msg strong{color:var(--fg)}
/* Fält på lappen (mörk text på bärnsten) */
.on-tag .field label{color:var(--ink)}
.on-tag .field .opt{color:var(--ink-2)}
.on-tag .field input,.on-tag .field textarea{background:#fbf3e4;color:var(--ink);border-color:rgba(33,23,12,.3)}
.on-tag .field input::placeholder,.on-tag .field textarea::placeholder{color:#7a6448}
.on-tag .field input:focus,.on-tag .field textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(33,23,12,.2)}
.on-tag .field input[aria-invalid="true"]{border-color:var(--err-ink)}
.on-tag .form__hint{color:var(--ink-2)}
.on-tag .form__hint.is-error{color:var(--err-ink);font-weight:600}
.on-tag .form__msg{background:#fbf3e4;color:var(--ink);border-color:rgba(33,23,12,.25)}
.on-tag .form__msg.is-ok{color:#1f5a2b;border-color:#1f5a2b}
.on-tag .form__msg.is-err{color:var(--err-ink);border-color:var(--err-ink)}
.on-tag .form__msg strong{color:var(--ink)}
.on-tag :focus-visible{outline-color:var(--ink)}

@media (max-width:640px){.form__row{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}