/* ==========================================================================
   JRP Foodtruck — "NATTMAT" (design 1a, ported from the approved canvas)
   Night ground, worn tan display type, torn paper, receipt details.
   Contrast table lives in CLAUDE.md; every body-text pair >= 4.5:1.
   ========================================================================== */

/* ---- Fonts (self-hosted, latin subsets, aoa-gate PASSED 2026-08-14) ---- */
@font-face{font-family:'Passion One';src:url(fonts/passion-one-v20-latin-900.woff2) format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Anton';src:url(fonts/anton-v27-latin-regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url(fonts/barlow-condensed-v13-latin-regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url(fonts/barlow-condensed-v13-latin-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Permanent Marker';src:url(fonts/permanent-marker-v16-latin-regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Courier Prime';src:url(fonts/courier-prime-v11-latin-regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Courier Prime';src:url(fonts/courier-prime-v11-latin-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ---- Tokens ---- */
:root{
  --natt:#100E0C;          /* page ground */
  --natt-dyp:#0A0908;      /* deeper band behind the catering card */
  --tan:#CF9E63;           /* the brand tan (8.00:1 on natt) */
  --tan-lys:#DDB077;       /* hover tan */
  --tan-myk:#A5804F;       /* soft tan text on dark (5.32:1) */
  --krem:#E9DFC9;          /* cream display/text on dark (14.55:1) */
  --tekst-myk:#B1A998;     /* body on dark (8.25:1) */
  --tekst-dus:#928B7D;     /* meta/footer on dark (5.70:1) */
  --linje:rgba(207,158,99,.18);

  /* paper surface */
  --papir:#E9DFC9;
  --papir-blekk:#221C15;   /* 9.77:1 on paper p10 */
  --papir-myk:#3E342A;     /* 7.03:1 */
  --papir-label:#6B4B23;   /* receipt labels on paper (4.58:1) */
  --marker-brun:#4A3B28;   /* marker on paper/print frames (6.25 / 9.02) */

  /* card surface (tan kraft) */
  --kort:#C29A6C;
  --kort-blekk:#241E14;    /* body on card p10 (4.74:1) */
  --kort-pris:#54300F;     /* display prices on card (3.33:1, large text) */

  --ramme:#F2EADA;         /* photo print frame */
  --sec: clamp(4.5rem, 9vw, 7.25rem);
}

/* ---- Reset-ish ---- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--natt);color:var(--tekst-myk);
  font-family:'Barlow Condensed',system-ui,sans-serif;
  font-size:clamp(1.0625rem,1.4vw,1.3125rem);line-height:1.55;
  overflow-x:clip;
}
img{max-width:100%;height:auto}
/* Two quick taps on a control must toggle it twice, not zoom the page. Without
   this, double-tapping the burger fires the browser's double-tap-to-zoom
   instead of the second click. Scoped to controls, so body copy keeps its
   double-tap zoom, and pinch zoom is untouched either way (WCAG 1.4.4). */
a,button,label,summary,input,select,textarea{touch-action:manipulation}
a{color:var(--tan);text-underline-offset:3px}
a:hover{color:var(--tan-lys)}
:focus-visible{outline:3px solid var(--tan);outline-offset:3px}
::selection{background:var(--tan);color:var(--natt)}

/* film grain over everything (single global overlay, 1a treatment) */
body{position:relative}
body::after{
  content:"";position:absolute;inset:0;z-index:80;pointer-events:none;
  background:url(uploads/tex/grain.png);background-size:300px;
  opacity:.5;mix-blend-mode:overlay;
}

.wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(20px,4vw,46px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:8px;top:-64px;z-index:100;background:var(--tan);color:var(--natt);font-family:Anton,sans-serif;padding:12px 20px;text-decoration:none;transition:top .15s}
.skip:focus{top:8px}

/* ---- Type voices ---- */
.disp{font-family:'Passion One',sans-serif;font-weight:900;line-height:.85;text-transform:uppercase;letter-spacing:-.01em;margin:0}
.anton{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em}
.marker{font-family:'Permanent Marker',cursive;font-weight:400}
.kvitt{font-family:'Courier Prime',monospace;letter-spacing:.2em;text-transform:uppercase;font-size:.8125rem;font-weight:700}

/* ---- Worn display masks (the signature) ---- */
.worn-a,.worn-b{
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
  -webkit-mask-position:var(--wp,0 0);mask-position:var(--wp,0 0);
}
.worn-a{-webkit-mask-image:url(uploads/tex/worn-a.png);mask-image:url(uploads/tex/worn-a.png);-webkit-mask-size:1200px 360px;mask-size:1200px 360px}
.worn-b{-webkit-mask-image:url(uploads/tex/worn-b.png);mask-image:url(uploads/tex/worn-b.png);-webkit-mask-size:1000px 300px;mask-size:1000px 300px}
@media (max-width:900px){
  .worn-a{-webkit-mask-size:600px 180px;mask-size:600px 180px}
  .worn-b{-webkit-mask-size:500px 150px;mask-size:500px 150px}
}

/* ---- Torn edges (top + bottom + fill, PNG masks from the design) ---- */
.riv{
  --riv-h:150px;position:relative;
  -webkit-mask-image:url(uploads/tex/tear-top.png),url(uploads/tex/tear-bottom.png),linear-gradient(#000,#000);
  mask-image:url(uploads/tex/tear-top.png),url(uploads/tex/tear-bottom.png),linear-gradient(#000,#000);
  -webkit-mask-size:1600px var(--riv-h),1600px var(--riv-h),100% calc(100% - (var(--riv-h) * 2) + 4px);
  mask-size:1600px var(--riv-h),1600px var(--riv-h),100% calc(100% - (var(--riv-h) * 2) + 4px);
  -webkit-mask-position:top left,bottom left,center;mask-position:top left,bottom left,center;
  -webkit-mask-repeat:repeat-x,repeat-x,no-repeat;mask-repeat:repeat-x,repeat-x,no-repeat;
}
@media (max-width:900px){.riv{--riv-h:100px}}

/* ---- Surfaces ---- */
.sec-papir{
  background-color:var(--papir);
  background-image:url(uploads/tex/paper.jpg);background-size:512px;
  color:var(--papir-myk);
}
.sec-papir :focus-visible{outline-color:var(--papir-blekk)}
.sec-papir a{color:var(--papir-label)}
.sec-papir a:hover{color:var(--papir-blekk)}
.sec-dyp{background:var(--natt-dyp)}

/* ---- Header ---- */
.topp{border-bottom:1px solid var(--linje);position:sticky;top:0;z-index:30;background:var(--natt)}
.topp__rad{display:flex;align-items:center;justify-content:space-between;min-height:80px;gap:16px}
.topp__brand{display:inline-flex;align-items:center}
.topp__brand img{height:52px;width:auto;display:block}
.topp__nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.topp__lenker{display:flex;gap:clamp(16px,2vw,30px);margin:0;padding:0;list-style:none}
.topp__lenker a{
  font-weight:600;font-size:.9375rem;letter-spacing:.18em;text-transform:uppercase;
  color:#A8A090;text-decoration:none;padding:8px 2px;
}
.topp__lenker a:hover,.topp__lenker a[aria-current="page"]{color:var(--tan)}
.burger{display:none}

@media (max-width:900px){
  .topp__lenker{display:none}
  .topp__nav > .btn{display:none}
  .burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:48px;height:48px;padding:10px;background:none;border:0;cursor:pointer;
  }
  .burger span{
    display:block;height:2px;background:var(--tan);width:26px;
    transition:transform .26s cubic-bezier(.16,.84,.36,1),opacity .16s ease,width .26s ease;
  }
  .burger span:last-child{width:18px}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);width:26px}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);width:26px}
  /* The panel unfolds downward from the header's bottom edge. clip-path does
     the wipe without needing the panel's height as a magic number, and it
     starts exactly at top:100%, so nothing ever overlaps the bar above.
     visibility (not display) keeps it out of the tab order while closed and
     still lets the open state transition. */
  .meny-panel{
    position:absolute;left:0;right:0;top:100%;
    background:var(--natt);border-bottom:1px solid var(--linje);padding:10px 0 26px;z-index:40;
    visibility:hidden;opacity:0;clip-path:inset(0% 0% 100% 0%);
    transition:clip-path .26s ease-in,opacity .16s ease,visibility 0s linear .26s;
  }
  /* Both ends stay in percentages: mix a % with a 0 length and the shape has no
     common interpolation type, so the wipe snaps instead of animating. */
  .meny-panel.open{
    visibility:visible;opacity:1;clip-path:inset(0% 0% 0% 0%);
    transition:clip-path .34s cubic-bezier(.16,.84,.36,1),opacity .18s ease,visibility 0s;
  }
  .meny-panel ul{list-style:none;margin:0;padding:0 clamp(20px,4vw,46px)}
  .meny-panel a{
    display:block;padding:14px 0;font-family:Anton,sans-serif;font-size:1.375rem;
    letter-spacing:.08em;text-transform:uppercase;color:var(--krem);text-decoration:none;
    border-bottom:1px solid var(--linje);
  }
  .meny-panel a:hover{color:var(--tan)}
  .meny-panel .btn{margin-top:18px}
}
@media (min-width:901px){.meny-panel{display:none !important}}
@media (prefers-reduced-motion:reduce){
  .meny-panel,.meny-panel.open,.burger span{transition:none}
}

/* ---- Buttons (mask on the inner face so focus rings stay whole) ---- */
.btn{display:inline-block;padding:0;border:0;background:none;text-decoration:none;cursor:pointer}
.btn__i{
  display:inline-flex;align-items:center;justify-content:center;min-height:50px;
  padding:15px 30px;font-family:Anton,sans-serif;font-size:1.1875rem;letter-spacing:.09em;
  text-transform:uppercase;line-height:1;
}
.btn--tan .btn__i{background:var(--tan);color:var(--natt)}
.btn--tan:hover .btn__i{background:var(--tan-lys)}
.btn--natt .btn__i{background:var(--natt);color:var(--tan)}
.btn--natt:hover .btn__i{color:var(--tan-lys)}
.btn--ghost{border:2px solid rgba(207,158,99,.55);color:var(--tan)}
.btn--ghost .btn__i{min-height:46px;padding:13px 26px}
.btn--ghost:hover{border-color:var(--tan);color:var(--tan-lys)}
.btn--ghost-blekk{border:3px solid var(--papir-blekk);color:var(--papir-blekk)}
.btn--ghost-blekk .btn__i{min-height:44px;padding:12px 24px}

/* ---- Hero ---- */
.hero{position:relative;overflow:hidden;background:var(--natt)}
/* The photo has no edges where it meets the page: two mask layers intersect so
   the horizontal falloff (into the headline column) and the vertical one (under
   the header, down into the marquee) stay independent. Only the right edge is
   hard, and that one bleeds off-screen. The media query below swaps the two
   gradients and leaves the mask plumbing alone. */
.hero__foto{
  position:absolute;top:0;right:0;bottom:0;width:min(820px,48%);
  --fade-x:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.04) 12%,
    rgba(0,0,0,.16) 24%,rgba(0,0,0,.42) 36%,rgba(0,0,0,.72) 48%,
    rgba(0,0,0,.93) 62%,#000 74%);
  --fade-y:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.5) 5%,
    rgba(0,0,0,.88) 11%,#000 17%,#000 62%,rgba(0,0,0,.82) 76%,
    rgba(0,0,0,.4) 89%,rgba(0,0,0,0) 100%);
  -webkit-mask-image:var(--fade-x),var(--fade-y);
  -webkit-mask-composite:source-in;
  mask-image:var(--fade-x),var(--fade-y);
  mask-composite:intersect;
}
.hero__foto img{width:100%;height:100%;object-fit:cover;display:block}
.hero__scrim,.hero__glod{position:absolute;inset:0;pointer-events:none}
.hero__scrim{background:linear-gradient(90deg,var(--natt) 0%,var(--natt) 36%,rgba(16,14,12,.8) 54%,rgba(16,14,12,.5) 72%,rgba(16,14,12,.1) 100%)}
/* Streetlight haze. Keep it inside the photo: the old 38%-wide ellipse reached
   past the photo's left edge and washed milky over the black behind the
   headline, which read as a smudge on the page rather than light in the scene. */
.hero__glod{background:radial-gradient(26% 32% at 86% 12%,rgba(240,184,96,.27),rgba(240,184,96,0) 68%);mix-blend-mode:screen}
.hero__inn{position:relative;z-index:2;padding-top:clamp(48px,7vw,86px);padding-bottom:clamp(90px,10vw,120px);max-width:820px}
.hero__hilsen{font-size:clamp(1.0625rem,1.5vw,1.3125rem);color:var(--tan);transform:rotate(-1.4deg);margin:0 0 18px;display:inline-block}
.hero__tittel{font-size:clamp(4rem,10.8vw,9.5rem)}
.hero__tittel span{display:block}
.hero__lead{margin:clamp(20px,2.4vw,30px) 0 0;font-size:clamp(1.125rem,1.6vw,1.375rem);line-height:1.5;color:var(--tekst-myk);max-width:440px}
.hero__cta{display:flex;gap:14px;margin-top:clamp(24px,2.6vw,32px);flex-wrap:wrap}
.hero__tv{margin-top:clamp(26px,2.8vw,34px);color:var(--tan-myk);letter-spacing:.14em;font-weight:400;font-size:.8125rem}

@media (max-width:900px){
  /* Portrait: the photo is the backdrop, so the dissolve runs top-to-bottom and
     has to start before the headline does. The truck's white flank sits exactly
     behind "Loaded"/"steak", and tan on white is unreadable, so mask + scrim
     together hold the ground under the type at >=5:1 (measured, see CLAUDE.md).
     Opening the scrim above the type keeps more photo than the old ramp did. */
  .hero__foto{
    width:100%;bottom:auto;height:min(600px,78svh);
    --fade-x:linear-gradient(#000,#000);
    --fade-y:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.72) 5%,
      #000 12%,#000 30%,rgba(0,0,0,.46) 42%,rgba(0,0,0,.22) 54%,
      rgba(0,0,0,.09) 70%,rgba(0,0,0,0) 88%);
  }
  .hero__scrim{background:linear-gradient(180deg,rgba(16,14,12,.5) 0%,rgba(16,14,12,.05) 15%,rgba(16,14,12,.26) 28%,rgba(16,14,12,.62) 37%,rgba(16,14,12,.86) 51%,var(--natt) 68%)}
  .hero__glod{background:radial-gradient(34% 20% at 80% 9%,rgba(240,184,96,.3),rgba(240,184,96,0) 66%)}
  .hero__inn{padding-top:min(200px,30svh);padding-bottom:44px;max-width:none}
  .hero__lead{max-width:34ch;margin-top:14px}
  .hero__cta{margin-top:20px}
  .hero__tv{margin-top:22px}
}

/* ---- Marquee band (the site's one motion moment) ---- */
.remse{
  position:relative;z-index:2;margin-top:-26px;
  transform:rotate(-.8deg) scaleX(1.03);
  background:var(--tan);height:60px;display:flex;align-items:center;overflow:hidden;
}
/* Five identical sets, and the keyframe travels exactly one of them. The usual
   two-copy marquee recipe only stays seamless while one copy is wider than the
   band: at 1853px one set is 1204px, so the old -50% left the right half of the
   band empty at the end of every cycle. Five sets stay covered past 4600px.
   The trailing gap lives on the set, not on the track, so one set is exactly
   one period and -20% lands the loop back on itself to the pixel. */
.remse__spor{
  display:flex;white-space:nowrap;width:max-content;
  font-family:Anton,sans-serif;font-size:1.5625rem;letter-spacing:.08em;color:var(--natt);
  animation:remse 34s linear infinite;
}
.remse__sett{display:flex;gap:26px;padding-right:26px}
.remse__spor span{flex:none}
@keyframes remse{to{transform:translateX(-20%)}}
@media (prefers-reduced-motion:reduce){.remse__spor{animation:none}}
@media (max-width:900px){
  .remse{height:44px;margin-top:-8px;transform:rotate(-1deg) scaleX(1.06)}
  .remse__spor{font-size:1.125rem}
  .remse__sett{gap:18px;padding-right:18px}
}

/* ---- Photo prints ---- */
.print{position:relative;background:var(--ramme);padding:13px 13px 52px;box-shadow:0 16px 38px rgba(60,40,20,.28);transform:rotate(var(--rot,-2.4deg));margin:0}
.print img{display:block;width:100%;height:auto}
.print figcaption{position:absolute;bottom:14px;left:26px;font-family:'Permanent Marker',cursive;font-size:1.1875rem;color:var(--marker-brun);transform:rotate(-1.6deg)}
.teip{
  position:absolute;width:170px;height:38px;z-index:2;
  background-color:rgba(226,214,190,.66);background-image:url(uploads/tex/paper.jpg);
  background-size:512px;background-blend-mode:multiply;
  box-shadow:0 3px 8px rgba(60,40,20,.28);
}
@media (max-width:900px){
  .print{padding:10px 10px 40px}
  .print figcaption{font-size:.9375rem;bottom:10px;left:18px}
  .teip{width:120px;height:30px}
}

/* ---- Historien ---- */
.historien{padding-top:calc(var(--sec) + 60px);padding-bottom:calc(var(--sec) + 66px);margin-top:-30px}
.historien__rad{display:flex;gap:64px;align-items:flex-start}
.historien__print{flex:none;width:min(430px,40%)}
.historien__print .teip{top:-18px;left:120px;transform:rotate(-3deg)}
.historien__tekst{padding-top:14px;max-width:620px}
.historien__label{color:var(--papir-label)}
.historien__tittel{font-size:clamp(3.25rem,6.6vw,6.125rem);color:var(--papir-blekk);margin:16px 0 24px}
.historien__tekst p{margin:0 0 18px;font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.65;color:var(--papir-myk);max-width:54ch;text-wrap:pretty}
.historien__lenke{font-weight:600;font-size:1.125rem}
.stempel{
  position:absolute;right:40px;top:190px;width:168px;height:168px;
  border:5px solid #A2703A;border-radius:50%;transform:rotate(-13deg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#A2703A;text-align:center;gap:2px;
}
.stempel span{display:block}
.stempel .anton{font-size:.9375rem;letter-spacing:.2em;line-height:1.1}
.stempel .disp{font-size:2.75rem;line-height:.9}
.stempel .anton:last-child{font-size:.8125rem;letter-spacing:.16em}
@media (max-width:1100px){.stempel{display:none}}
@media (max-width:900px){
  .historien{margin-top:0}
  .historien__rad{flex-direction:column;gap:34px}
  .historien__print{width:min(280px,84%);margin-inline:auto;--rot:-2deg}
  .historien__print .teip{left:70px}
  .historien__tekst{padding-top:0}
}

/* ---- Menyen ---- */
.meny{padding-top:var(--sec);padding-bottom:var(--sec)}
.meny__hode{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(30px,4vw,52px);flex-wrap:wrap}
.meny__tittel{font-size:clamp(3.25rem,6.4vw,5.75rem);color:var(--tan)}
.meny__hint{font-size:clamp(1.0625rem,1.5vw,1.25rem);color:#979081;transform:rotate(-1deg)}
.meny__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.kort{
  position:relative;
  background-color:var(--kort);background-image:url(uploads/tex/card.jpg);background-size:512px;
  padding:34px 28px 30px;box-shadow:0 20px 44px rgba(0,0,0,.5);
  transform:rotate(var(--rot,0deg));color:var(--kort-blekk);
}
.kort__nr{position:absolute;top:12px;right:18px;font-family:'Passion One',sans-serif;font-weight:900;font-size:4.125rem;line-height:1;color:rgba(34,28,21,.22)}
.kort__navn{font-family:Anton,sans-serif;font-size:clamp(1.5rem,2.2vw,1.9375rem);line-height:1.05;color:var(--papir-blekk);max-width:200px;margin:0;text-transform:uppercase}
.kort__om{font-size:1.0625rem;line-height:1.5;color:var(--kort-blekk);margin:14px 0 22px;max-width:240px}
.kort__pris{font-family:'Passion One',sans-serif;font-weight:900;font-size:2.75rem;line-height:1;color:var(--kort-pris)}
.kort .teip{top:-14px;left:70px;width:120px;height:30px;transform:rotate(-2deg)}
.meny__grid .kort:nth-child(2){background-position:-170px -120px}
.meny__grid .kort:nth-child(3){background-position:-340px -230px}
.meny__note{margin-top:26px;color:var(--tekst-dus);letter-spacing:.16em;font-size:.8125rem}
@media (max-width:900px){
  .meny__grid{grid-template-columns:1fr;gap:18px}
  .kort{padding:24px 22px}
  .kort__nr{font-size:2.875rem;top:10px;right:14px}
}

/* ---- Catering / booking ---- */
.catering{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(64px,8vw,110px)}
.catering__kort{
  position:relative;max-width:1010px;margin-inline:auto;
  background-color:var(--kort);background-image:url(uploads/tex/card.jpg);background-size:512px;
  padding:clamp(86px,10vw,118px) clamp(24px,4.5vw,62px) clamp(92px,10vw,124px);
  transform:rotate(-.9deg);box-shadow:0 26px 60px rgba(0,0,0,.6);
  color:var(--kort-blekk);--riv-h:130px;
}
.catering__hilsen{font-size:clamp(1.1875rem,1.8vw,1.625rem);color:var(--kort-blekk);transform:rotate(-1.2deg);display:inline-block;margin:0}
.catering__tittel{font-size:clamp(2.5rem,5.2vw,4.75rem);color:var(--papir-blekk);margin:12px 0 8px}
.catering__om{font-size:clamp(1.0625rem,1.4vw,1.1875rem);line-height:1.55;color:var(--kort-blekk);max-width:560px;margin:0 0 34px}
.catering__kort a{color:var(--kort-pris)}
.catering__kort a:hover{color:var(--papir-blekk)}
.skjema{display:grid;grid-template-columns:1fr 1fr;gap:22px 26px}
.felt{display:flex;flex-direction:column;margin:0}
.felt--full{grid-column:1 / -1}
.felt label{font-family:'Courier Prime',monospace;font-weight:700;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--kort-blekk);margin-bottom:4px}
.felt input,.felt textarea{
  background:transparent;border:0;border-bottom:2px solid rgba(34,28,21,.45);
  font:inherit;font-size:1.125rem;color:var(--papir-blekk);
  padding:10px 2px;min-height:44px;width:100%;border-radius:0;
}
.felt textarea{border:2px solid rgba(34,28,21,.45);padding:10px;min-height:110px;resize:vertical}
.felt input::placeholder,.felt textarea::placeholder{color:rgba(36,30,20,.72);opacity:1}
.felt input:focus-visible,.felt textarea:focus-visible{outline:3px solid var(--papir-blekk);outline-offset:2px;border-color:var(--papir-blekk)}
.skjema__handling{grid-column:1 / -1;display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:6px}
.skjema__alt{font-size:1rem;color:var(--kort-blekk)}
.skjema__alt a{color:var(--kort-pris);font-weight:600}
.skjema__alt a:hover{color:var(--papir-blekk)}
.skjema__status{grid-column:1 / -1;font-weight:600;color:var(--papir-blekk);min-height:1.4em;margin:0}
.skjema__gdpr{grid-column:1 / -1;font-size:.9375rem;color:var(--kort-blekk);margin:0;max-width:62ch}
.hp{position:absolute !important;left:-9999px !important;opacity:0;pointer-events:none}
.catering :focus-visible{outline-color:var(--papir-blekk)}
@media (max-width:700px){.skjema{grid-template-columns:1fr}}

/* ---- Footer ---- */
.bunn{border-top:1px solid var(--linje);padding:clamp(44px,6vw,64px) 0 clamp(36px,5vw,56px)}
.bunn__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;font-family:'Courier Prime',monospace;font-size:.875rem;line-height:1.9;color:var(--tekst-dus)}
.bunn__brand img{height:60px;width:auto;display:block;margin-bottom:12px}
.bunn h2{font-family:'Courier Prime',monospace;font-size:.875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tan);margin:0 0 2px}
.bunn a{color:var(--tan);text-decoration:underline}
.bunn a:hover{color:var(--tan-lys)}
.bunn p{margin:0}
/* Legal line and the build credit on one rule-off bar, same shape as the other
   SoulScaler sites. Sentence case and no tracking on purpose: the uppercase
   wide-tracked mono microlabel is the template tell the Design DNA bans. */
.bunn__bunn{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;
  margin-top:clamp(30px,4vw,46px);padding-top:clamp(20px,2.6vw,28px);
  border-top:1px solid var(--linje);
  font-family:'Courier Prime',monospace;font-size:.8125rem;line-height:1.7;color:var(--tekst-dus);
}
.bunn__bunn a{color:var(--tekst-dus);text-decoration:underline}
.bunn__bunn a:hover{color:var(--tan)}
@media (max-width:900px){.bunn__grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.bunn__grid{grid-template-columns:1fr}}

/* ---- Interior pages ---- */
.side{padding-top:clamp(56px,8vw,110px);padding-bottom:var(--sec)}
.side--papir{padding-top:calc(var(--sec) + 50px);padding-bottom:calc(var(--sec) + 56px)}
.side__label{color:var(--papir-label)}
.side__tittel{font-size:clamp(3rem,7.2vw,6.5rem);color:var(--papir-blekk);margin:14px 0 26px;max-width:14ch}
.side--natt .side__label{color:var(--tan-myk)}
.side--natt .side__tittel{color:var(--tan)}
.prosa{max-width:640px}
.prosa p,.prosa li{font-size:clamp(1.0625rem,1.45vw,1.1875rem);line-height:1.65;color:var(--papir-myk);text-wrap:pretty}
.prosa h2{font-family:Anton,sans-serif;font-size:clamp(1.375rem,2vw,1.75rem);letter-spacing:.03em;text-transform:uppercase;color:var(--papir-blekk);margin:2.2em 0 .5em}
.prosa ul{padding-left:1.2em}
.side--natt .prosa p,.side--natt .prosa li{color:var(--tekst-myk)}
.side--natt .prosa h2{color:var(--krem)}

.side__lead{font-size:clamp(1.125rem,1.6vw,1.375rem);line-height:1.55;color:var(--tekst-myk);max-width:60ch;margin:0}
.page-head{padding:clamp(44px,6.5vw,84px) 0 clamp(36px,5vw,60px)}
.legal{max-width:760px;display:flex;flex-direction:column;gap:clamp(28px,4vw,44px);padding:clamp(30px,4vw,50px) 0}
.legal-item{position:relative;display:flex;gap:26px}
.legal-num{font-family:'Passion One',sans-serif;font-weight:900;font-size:2.5rem;line-height:1;color:rgba(34,28,21,.26);flex:none;width:64px}
.legal-body h2{font-family:Anton,sans-serif;font-size:clamp(1.25rem,1.8vw,1.5rem);letter-spacing:.03em;text-transform:uppercase;color:var(--papir-blekk);margin:0 0 .5em}
.legal-body p,.legal-body li{font-size:1.0625rem;line-height:1.65;color:var(--papir-myk)}
.legal-body ul{padding-left:1.2em}
@media (max-width:600px){.legal-item{flex-direction:column;gap:6px}.legal-num{width:auto}}

/* Om Richard */
.omr__rad{display:flex;gap:clamp(34px,5vw,64px);align-items:flex-start;margin-top:clamp(30px,4vw,54px)}
.omr__rad + .omr__rad{margin-top:clamp(48px,7vw,84px)}
.omr__rad--speil{flex-direction:row-reverse}
.omr__print{flex:none;width:min(400px,38%)}
.omr__print .teip{top:-16px;left:90px;transform:rotate(-3deg)}
.omr__tekst{max-width:600px}
.omr__slagord{font-family:'Permanent Marker',cursive;font-size:clamp(1.25rem,2vw,1.625rem);color:var(--papir-blekk);transform:rotate(-1.4deg);margin:26px 0 0;display:inline-block}
@media (max-width:900px){
  .omr__rad,.omr__rad--speil{flex-direction:column}
  .omr__print{width:min(300px,86%);margin-inline:auto}
}
.cta-band{padding:clamp(56px,8vw,96px) 0}
.cta-band__tittel{font-size:clamp(2.5rem,5.6vw,4.5rem);color:var(--tan);margin:0 0 26px;max-width:16ch}
.cta-band__rad{display:flex;gap:18px;align-items:center;flex-wrap:wrap}

/* 404 */
.feil{min-height:calc(100svh - 80px);display:grid;place-content:center;text-align:left;padding-block:80px}
.feil p.feil__kode{font-size:clamp(6rem,20vw,14rem);line-height:.85;color:var(--tan);max-width:none}
.feil p{font-size:1.25rem;color:var(--tekst-myk);max-width:44ch}

/* ---- Utility ---- */
.rot-l1{--rot:-1.1deg}.rot-r1{--rot:.7deg}.rot-l2{--rot:-.5deg}