/* Atelier Sundh. Ark I-IV. Se design/01-riktning.md for palett och matvarden. */

/* ---------- 1. Tecken ---------- */
:root{
  --papper:#FBFAF7;
  --kalk:#E9E1D1;
  --sandsten:#DED5C2;
  --black:#1C1A17;
  --mull:#4A453D;
  --annot:#565045;
  --cinnober:#C0341D;
  --cinnober-text:#A32B16;
  --linje:#7E7563;
  --rutnat:#CFC8B8;

  --lagd:cubic-bezier(.22,.61,.36,1);
  --ritad:cubic-bezier(.50,0,.20,1);
  --driven:cubic-bezier(.12,.78,.24,1);

  --disp:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;

  --t-xl:clamp(2.55rem,7.2vw,6.5rem);
  --t-l:clamp(1.9rem,3.6vw,3rem);
  --t-m:clamp(1.5rem,2.4vw,2.125rem);

  --marg:84px;
  --max:1272px;
  --ranna:24px;
  --topph:68px;
  --fogh:36px;
  --fog-oppen:8px;
}
@media (max-width:1023px){ :root{ --marg:48px; } }
@media (max-width:767px){ :root{ --marg:20px; --topph:56px; --fogh:28px; --fog-oppen:6px; } }

/* ---------- 2. Grund ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--topph) + 24px); }
body{
  margin:0;
  background:var(--papper);
  color:var(--black);
  font-family:var(--sans);
  font-size:clamp(1.0625rem,1.01rem + .28vw,1.1875rem);
  line-height:1.58;
  text-wrap:pretty;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
@supports not (overflow:clip){ body{ overflow-x:hidden; } }
img,svg{ max-width:100%; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

h1,h2,h3{
  font-family:var(--disp);
  font-optical-sizing:auto;
  font-weight:400;
  line-height:1.36;          /* Ommatt i steg 7. Bodoni Modas A-ring ar 1,02em och underhanget 0,28em.
                                Golvet ar 1,32-1,36 em. Steg 1:s 1,10 kom fran ett fallback-snitt. */
  margin:0;
  text-wrap:balance;
}
h1{ font-size:var(--t-xl); letter-spacing:-.02em; }
h2{ font-size:var(--t-l); letter-spacing:-.015em; }
h3{ font-size:var(--t-m); letter-spacing:-.01em; }

a{ color:inherit; }
:focus-visible{ outline:2px solid var(--black); outline-offset:3px; border-radius:1px; }

.dold{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.hoppa{
  position:absolute; left:12px; top:-100px; z-index:200;
  background:var(--black); color:var(--papper); text-decoration:none;
  font:500 13px/1 var(--mono); padding:14px 18px;
}
.hoppa:focus{ top:12px; }
.defs{ position:absolute; }

/* ---------- 3. Arket ---------- */
.grid{
  width:min(100% - var(--marg) * 2, var(--max));
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--ranna);
}
.ark-linjer{ position:fixed; inset:0; pointer-events:none; z-index:1; }
.ark-linjer span{
  position:absolute; top:0; bottom:0; width:1px; background:var(--rutnat);
  left:calc(max(var(--marg),(100% - var(--max)) / 2) - 30px);
}
.ark-linjer span:last-child{ left:auto; right:calc(max(var(--marg),(100% - var(--max)) / 2) - 30px); }
@media (max-width:1023px){ .ark-linjer{ display:none; } }

.lopmatt{
  position:fixed; z-index:2; margin:0;
  left:calc(max(var(--marg),(100% - var(--max)) / 2) - 46px);
  top:50%;
  transform:translate(-50%,-50%) rotate(-90deg);
  font:400 11px/1 var(--mono); letter-spacing:.09em; color:var(--annot);
  padding:0; opacity:0;
  transition:opacity 400ms var(--lagd);
}
.lopmatt.pa{ opacity:1; }
@media (max-width:1023px){ .lopmatt{ display:none; } }

.etikett{
  font:500 11px/1.3 var(--mono);
  letter-spacing:.09em; text-transform:uppercase; color:var(--annot);
  margin:0 0 14px;
}
.matt,.spec{
  font:400 12px/1.2 var(--mono);
  letter-spacing:.02em; font-variant-numeric:tabular-nums; color:var(--annot);
}

/* ---------- 4. Sidhuvud ---------- */
.topp{
  position:sticky; top:0; z-index:60;
  background:var(--papper);
  border-bottom:1px solid var(--linje);
}
.topp__in{
  width:min(100% - var(--marg) * 2, var(--max));
  margin-inline:auto;
  height:var(--topph);
  display:flex; align-items:center; gap:24px;
}
.topp__namn{
  font:500 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
  display:flex; align-items:center; min-height:44px;   /* traffyta, inte bara text */
}
.topp__ark{
  margin:0; font:400 11px/1 var(--mono); letter-spacing:.09em;
  text-transform:uppercase; color:var(--annot);
  opacity:0; transition:opacity 300ms var(--lagd);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topp.rullad .topp__ark{ opacity:1; }
.topp__nav{ margin-left:auto; display:flex; align-items:center; gap:28px; }
.topp__nav ul{ display:flex; gap:26px; }
.topp__nav a{
  position:relative; display:inline-block; text-decoration:none;
  font:400 12px/1 var(--mono); letter-spacing:.06em; padding:16px 0; min-height:44px;
}
.topp__nav a i{ font-style:normal; color:var(--annot); margin-right:7px; }
.topp__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:14px; height:1.4px;
  background:var(--cinnober); transform:scaleX(0); transform-origin:left;
  transition:transform 200ms var(--lagd);
}
.topp__nav a:hover::after,.topp__nav a:focus-visible::after{ transform:scaleX(1); }
.topp__cta{ font-weight:500 !important; display:flex !important; align-items:center; gap:8px; min-height:44px; }
.ledare{ width:34px; height:1px; background:var(--linje); display:inline-block; }
.topp__knapp{
  display:none; margin-left:auto; background:none; border:1px solid var(--linje);
  color:var(--black); font:500 12px/1 var(--mono); letter-spacing:.09em;
  text-transform:uppercase; padding:0 16px; height:46px; min-width:92px; cursor:pointer;
}

/* ---------- 5. Fogen. Signaturgreppet. ---------- */
.fog{ position:relative; z-index:3; line-height:0; }
.fog__svg{ display:block; width:100%; height:var(--fogh); }
.fog--1{ --ovan:var(--papper); --under:var(--kalk); }
.fog--2{ --ovan:var(--kalk);   --under:var(--papper); }
.fog--3{ --ovan:var(--papper); --under:var(--sandsten); }
.fog__bas{ fill:var(--under); }
.fog__band{ fill:var(--ovan); }
.fog__urtag{ fill:url(#u-d); }
.fog--1 .fog__tappar rect,
.fog--3 .fog__tappar rect{ fill:url(#t-p-d); }
.fog--2 .fog__tappar rect{ fill:url(#t-k-d); }
.fog__band{ height:10px; }
.js .fog__tappar{ transform:translateY(calc(var(--fog-oppen) * -1)); }
.js .fog.sluten .fog__tappar{
  transform:translateY(0);
  transition:transform 360ms var(--driven);
}
.fog__marke{
  position:absolute; left:240px; top:13px; width:1.4px; height:7px;
  background:var(--cinnober);
}
@media (max-width:767px){
  .fog__urtag{ fill:url(#u-m); }
  .fog--1 .fog__tappar rect,
  .fog--3 .fog__tappar rect{ fill:url(#t-p-m); }
  .fog--2 .fog__tappar rect{ fill:url(#t-k-m); }
  .fog__marke{ left:140px; top:11px; height:6px; }
  .fog__band{ height:8px; }
}

/* ---------- 6. Hero ---------- */
.hero__over{ background:var(--papper); padding-top:clamp(36px,7vh,88px); }
.hero__under{
  background:var(--kalk); position:relative;
  padding-bottom:clamp(56px,9vh,124px);
  overflow-x:clip;                 /* ritningen far ga ut over arket, inte over sidan */
}
.titelruta{
  grid-column:1 / 5; align-self:start;
  display:grid; border:1px solid var(--linje); margin-bottom:clamp(28px,5vh,64px);
  width:max-content; max-width:100%;
}
.titelruta span{
  font:400 11px/1 var(--mono); letter-spacing:.09em; text-transform:uppercase;
  color:var(--annot); padding:9px 14px; border-bottom:1px solid var(--linje);
}
.titelruta span:last-child{ border-bottom:0; }
.visa-liten{ display:none; }

.hero__rad{ grid-column:1 / 10; margin:0; }
.hero__rad--1{ padding-bottom:clamp(12px,2.4vh,28px); }
.hero__rad--2{
  font-family:var(--disp); font-weight:400; font-size:var(--t-xl);
  letter-spacing:-.02em; line-height:1.36;
  grid-column:1 / 11; margin:0 0 clamp(26px,4vh,52px);
  padding-top:clamp(8px,1.6vh,20px); padding-left:96px;  /* en tandbredd */
}
.hero__ingress{
  grid-column:1 / 7; max-width:46ch; color:var(--mull); margin:0;
}

.ritning{ grid-column:8 / 13; grid-row:2 / 4; margin:0; align-self:start; justify-self:start; }
.ritning__box{
  position:relative; width:clamp(560px,68vw,980px); aspect-ratio:2600 / 980;
}
.ritning__svg{ display:block; width:100%; height:100%; }
.rit-obj path{ fill:none; stroke:var(--linje); stroke-width:1.4px; vector-effect:non-scaling-stroke; }
.rit-matt path{ fill:none; stroke:var(--linje); stroke-width:.75px; vector-effect:non-scaling-stroke; }
.rit-hjalp path{ fill:none; stroke:var(--linje); stroke-width:.5px; vector-effect:non-scaling-stroke; }
.rit-tal{
  position:absolute; font:400 12px/1 var(--mono); letter-spacing:.02em;
  font-variant-numeric:tabular-nums; color:var(--annot); background:var(--kalk); padding:0 6px;
}
.rit-tal--l{ left:50%; transform:translateX(-50%); top:88.5%; }
.rit-tal--h{ left:2.4%; top:44%; }
.ritning .spec{ margin-top:18px; }

.harkors{ position:absolute; inset:0; pointer-events:none; opacity:0; z-index:4; }
.harkors.pa{ opacity:1; transition:opacity 140ms linear; }
.harkors__v,.harkors__h{ position:absolute; background:var(--linje); }
.harkors__v{ top:0; bottom:0; width:1px; left:0; }
.harkors__h{ left:0; right:0; height:1px; top:0; }
.harkors__tal{
  position:absolute; left:0; top:0;
  font:400 12px/1 var(--mono); letter-spacing:.02em; font-variant-numeric:tabular-nums;
  color:var(--annot); background:var(--kalk); padding:4px 7px; white-space:nowrap;
}
.rit-pekfalt{ cursor:crosshair; }

/* ---------- 7. Sektioner ---------- */
.sek{ padding-block:clamp(72px,11vh,148px); position:relative; z-index:2; }
/* Rytmen ar inte lika nagonstans. Varje varde foljer vad sektionen leder in i. */
#uppbyggnad{ padding-bottom:clamp(48px,7vh,88px); }
#sinkan{ padding-top:clamp(48px,7vh,88px); padding-bottom:clamp(88px,14vh,180px); }
#tiden{ padding-top:clamp(84px,13vh,164px); padding-bottom:clamp(60px,9vh,116px); }
#bestallning{ padding-top:clamp(60px,9vh,116px); padding-bottom:clamp(96px,15vh,196px); }
#forfragan{ padding-top:clamp(76px,12vh,152px); padding-bottom:clamp(64px,10vh,124px); }
.sek--kalk{ background:var(--kalk); }
.sek--sand{ background:var(--sandsten); }
.sek > .grid > h2{ grid-column:1 / 10; margin-bottom:clamp(30px,5vh,64px); }
.etikett--sek{ grid-column:1 / 10; }

/* Ark 02 */
#uppbyggnad{ padding-top:clamp(56px,9vh,116px); }
.manifest{
  grid-column:3 / 10; font-family:var(--disp); font-weight:400;
  font-size:var(--t-m); line-height:1.36; letter-spacing:-.01em;
  margin:0 0 clamp(56px,9vh,116px); text-wrap:pretty; max-width:26ch;
}
.konst{ grid-column:1 / 12; display:grid; grid-template-columns:4fr 3fr 5fr; gap:0 var(--ranna); }
.konst__del{ padding-right:28px; border-left:1px solid var(--linje); padding-left:22px; display:flex; flex-direction:column; }
.konst__del h3{ margin:0 0 14px; }
.konst__del p:not(.etikett):not(.matt){ color:var(--mull); font-size:.94em; }
.matt{ margin-top:auto; padding-top:26px; }
.matt span{ border-top:1px solid var(--linje); padding-top:8px; display:inline-block; }

/* Ark 03. Sinkan */
.sek--snitt > .grid > .etikett--sek{ grid-row:1; }
.sek--snitt > .grid > h2{ grid-row:2; }
.snitt{ grid-column:1 / 10; grid-row:3; margin:0; }
.snitt__box{ position:relative; aspect-ratio:700 / 320; }
.snitt__svg{ display:block; width:100%; height:100%; }
.snitt-obj path{
  stroke:var(--linje); stroke-width:1.4px; vector-effect:non-scaling-stroke;
  stroke-linejoin:miter;
}
.snitt-under{ fill:url(#skr-b); }
.snitt-over{ fill:url(#skr-a); }
.snitt-hjalp path{ fill:none; stroke:var(--linje); stroke-width:.5px; vector-effect:non-scaling-stroke; }
.snitt-tapp{ transform:translateY(-15.4px); }

.snitt__reglage{ margin-top:22px; display:flex; align-items:center; gap:22px; }
.snitt__reglage label{
  font:500 11px/1.3 var(--mono); letter-spacing:.09em;
  text-transform:uppercase; color:var(--annot); white-space:nowrap;
}
.snitt__reglage input[type=range]{
  -webkit-appearance:none; appearance:none; flex:1;
  background:transparent; height:48px; margin:0; cursor:ew-resize;
}
.snitt__reglage input[type=range]::-webkit-slider-runnable-track{ height:1px; background:var(--linje); }
.snitt__reglage input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:30px; margin-top:-15px;
  background:var(--black); border:0; border-radius:0;
}
.snitt__reglage input[type=range]::-moz-range-track{ height:1px; background:var(--linje); }
.snitt__reglage input[type=range]::-moz-range-thumb{
  width:14px; height:30px; background:var(--black); border:0; border-radius:0;
}
.snitt .spec{ margin-top:10px; }
.snitt__text{ grid-column:10 / 13; grid-row:3; align-self:end; color:var(--mull); font-size:.94em; }

/* Detaljfotot. Ligger i textspalten, inte bredvid ritningen, och ar
   beskuret till 12:5 ur en kvadrat, ur det band (y 420-919 i kallan) dar
   ingen papperssvit syns i kanten.
   height:auto kravs eftersom img har width- och height-attribut och
   formen kommer fran aspect-ratio. */
.fotodetalj{ margin:0 0 30px; max-width:320px; }
.fotodetalj img{
  display:block; width:100%; height:auto;
  aspect-ratio:12 / 5; object-fit:cover; object-position:50% 60%;
  border:1px solid var(--linje);
}
.fotodetalj .spec{ margin-top:10px; display:block; }

/* Ark 04. Tiden */
.stock{ grid-column:1 / 13; position:relative; height:84px; margin-bottom:clamp(30px,5vh,58px); }
.stock__linje{
  position:absolute; left:0; right:0; top:38px; height:1px; background:var(--linje);
  transform-origin:left;
}
.stock__streck i{ position:absolute; width:1px; background:var(--linje); top:30px; height:8px; }
.stock__streck i.lang{ top:22px; height:16px; }
.stock__tal span:last-child{ transform:translateX(-100%); }
.stock__tal span{
  position:absolute; left:calc(var(--p) * 1%); transform:translateX(-50%); top:54px;
  font:400 12px/1 var(--mono); font-variant-numeric:tabular-nums; color:var(--annot);
}
.stock__band i{
  position:absolute; top:45px; height:2px; background:var(--linje);
  left:calc(var(--start) * 1%); width:calc(var(--span) * 1% - 4px);
  transform:scaleX(0); transform-origin:left;
  transition:transform 300ms var(--driven),opacity 200ms linear;
}
.stock.syns .stock__band i{ transform:scaleX(1); }
.stock[data-aktiv="0"] .stock__band i:nth-child(1),
.stock[data-aktiv="1"] .stock__band i:nth-child(2),
.stock[data-aktiv="2"] .stock__band i:nth-child(3),
.stock[data-aktiv="3"] .stock__band i:nth-child(4){ background:var(--cinnober); }

/* Kolumnbredden foljer skedets langd pa mattstocken, avrundad sa ingen blir smalare an 200 px. */
.skeden{ grid-column:1 / 13; display:grid; grid-template-columns:2.5fr 4fr 3fr 2.5fr; gap:0 var(--ranna); }
.skeden li{ border-left:1px solid var(--linje); padding:0 26px 0 20px; }
.skeden li:focus-visible{ outline-offset:0; }
.skeden h3{ font-size:1.5rem; margin:0 0 12px; }
.skeden li > p:last-child{ color:var(--mull); font-size:.9em; }

/* Ark 05. Bestallning */
.vagar{ grid-column:1 / 13; display:grid; grid-template-columns:7fr 5fr; gap:0 clamp(32px,4vw,64px); }
.vag{ position:relative; padding-left:26px; }
.vag::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--linje);
}
.vag::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:1.4px;
  background:var(--cinnober); transform:scaleY(0); transform-origin:top;
  transition:transform 260ms var(--lagd);
}
.vag:hover::after,.vag:focus-within::after{ transform:scaleY(1); }
.vag--b{ margin-top:40px; }
.vag h3{ margin:0 0 16px; }
.pris{
  font:400 12px/1 var(--mono); letter-spacing:.02em; font-variant-numeric:tabular-nums;
  color:var(--cinnober-text); border-top:1px solid var(--linje);
  border-bottom:1px solid var(--linje); padding:12px 0; margin:0 0 26px;
}
.vag ul{ margin:0 0 32px; }
.vag li,.vag > p:not(.pris):not(.etikett){ max-width:58ch; }
.vag li{ color:var(--mull); font-size:.94em; padding:14px 0; border-bottom:1px solid var(--rutnat); }
.vag li:first-child{ padding-top:0; }

/* ---------- 8. Knappen ---------- */
.knapp{
  position:relative; display:inline-block; text-decoration:none;
  background:var(--black); color:var(--papper);
  font:500 13px/1 var(--mono); letter-spacing:.07em; text-transform:uppercase;
  padding:19px 26px; border:0; border-radius:1px; cursor:pointer;
  min-height:48px;
}
.knapp::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--cinnober); transform:scaleX(0); transform-origin:left;
  transition:transform 200ms var(--lagd);
}
.knapp:hover::after,.knapp:focus-visible::after{ transform:scaleX(1); }
.knapp:active{ transform:translateY(1px); transition:transform 90ms var(--driven); }

/* ---------- 9. Ark 06. Forfragan ---------- */
.kapacitet{
  grid-column:1 / 9; justify-self:start; font:500 11px/1.3 var(--mono); letter-spacing:.09em;
  text-transform:uppercase; color:var(--cinnober-text);
  border-top:1px solid var(--linje); padding-top:14px; margin:0 0 clamp(24px,4vh,44px);
}
#forfragan > .grid > .ingress{ grid-column:1 / 7; max-width:54ch; color:var(--mull); margin:0 0 clamp(40px,6vh,72px); }
.panel{ grid-column:1 / 11; }
.falt{
  display:grid; grid-template-columns:190px minmax(0,1fr); gap:0 var(--ranna);
  align-items:start; padding:22px 0; border-top:1px solid var(--rutnat);
}
.falt > .etikett{ margin:14px 0 0; }
.falt__in{ display:grid; position:relative; }
.falt__in > input,.falt__in > textarea,.falt__in > select{
  grid-area:1 / 1; width:100%; background:transparent; color:var(--black);
  border:0; border-bottom:1px solid var(--linje); border-radius:0;
  font:400 17px/1.5 var(--sans); padding:13px 0; min-height:52px;
}
.falt__in > textarea{ resize:vertical; min-height:118px; }
.falt__in > select{ appearance:none; -webkit-appearance:none; cursor:pointer; }
.falt__in::after{
  content:""; grid-area:1 / 1; align-self:end; height:1.4px; background:var(--black);
  transform:scaleX(0); transform-origin:left; pointer-events:none;
  transition:transform 180ms var(--lagd);
}
.falt__in:focus-within::after{ transform:scaleX(1); }
.falt__in:has(> select)::before{
  content:""; position:absolute; right:3px; top:24px; z-index:1; pointer-events:none;
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:6px solid var(--annot);
}
.falt__in > input:focus:not(:focus-visible),
.falt__in > textarea:focus:not(:focus-visible),
.falt__in > select:focus:not(:focus-visible){ outline:0; }
.falt:focus-within > .etikett{ color:var(--black); }
.hjalp{ margin:12px 0 0; font:400 13px/1.5 var(--sans); color:var(--annot); max-width:52ch; }
.fel{ margin:10px 0 0; font:500 13px/1.4 var(--mono); color:var(--cinnober-text); }
.fel:empty{ display:none; }
.falt--rad{ border-top:0; padding-top:0; }
.val label{
  display:inline-flex; align-items:center; gap:11px; margin-right:30px;
  cursor:pointer; min-height:48px; font-size:15px;
}
.val input{ position:absolute; opacity:0; width:1px; height:1px; }
.ruta{
  width:16px; height:16px; border:1px solid var(--linje);
  display:inline-grid; place-items:center; flex:0 0 auto;
}
.ruta::after{
  content:""; width:8px; height:8px; background:var(--black);
  transform:scale(0); transition:transform 140ms var(--driven);
}
.val input:checked + .ruta::after{ transform:scale(1); }
.val input:focus-visible + .ruta{ outline:2px solid var(--black); outline-offset:3px; }
.falt--slut{ border-top:1px solid var(--linje); }
.falt--slut .hjalp{ margin-top:18px; }
.knapp--skicka{ justify-self:start; }
.kvitto{
  font-family:var(--disp); font-size:var(--t-m); line-height:1.36;
  letter-spacing:-.01em; margin:0; max-width:24ch;
}

/* ---------- 10. Titelfaltet ---------- */
.titelfalt{ background:var(--sandsten); padding-bottom:36px; }
.tf{
  grid-column:1 / 13; display:grid; grid-template-columns:3fr 4fr 3fr 2fr;
  border-top:1px solid var(--linje); border-bottom:1px solid var(--linje);
}
.tf__cell{ padding:26px 22px 30px; border-left:1px solid var(--linje); }
.tf__cell:first-child{ border-left:0; padding-left:0; }
.tf__cell p{ font-size:14px; color:var(--mull); margin:0 0 6px; }
.tf__namn{ font-family:var(--disp); font-size:22px !important; color:var(--black) !important; letter-spacing:-.01em; }
.tf__post{
  position:relative; display:inline-block; font-family:var(--disp);
  font-size:clamp(1.2rem,1.85vw,1.85rem); line-height:1.36; letter-spacing:-.015em;
  color:var(--black); text-decoration:none; padding:11px 0; min-height:44px;
}
.tf__post .rits{
  position:absolute; left:0; right:0; bottom:7px; height:1.4px; background:var(--cinnober);
  transform:scaleX(0); transform-origin:left; transition:transform 200ms var(--lagd);
}
.tf__post:hover .rits,.tf__post:focus-visible .rits{ transform:scaleX(1); }
.tf__tel{ font:400 14px/1.5 var(--mono); color:var(--mull); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; }
.tf__data{ font:400 12px/1.9 var(--mono) !important; letter-spacing:.04em; color:var(--annot) !important; }
.tf__cell--sigill{ display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-start; gap:12px; }
.tf__cell--sigill svg{ width:64px; height:64px; }
.sig-obj{ fill:var(--papper); stroke:var(--linje); stroke-width:1.4px; vector-effect:non-scaling-stroke; }
.sig-hjalp{ fill:none; stroke:var(--linje); stroke-width:.5px; vector-effect:non-scaling-stroke; }
.sig-matt{ fill:none; stroke:var(--cinnober); stroke-width:.75px; vector-effect:non-scaling-stroke; }
.tf__cell--sigill .etikett{ margin:0; }
.demo{ grid-column:1 / 13; margin:22px 0 0; font:400 11px/1 var(--mono); letter-spacing:.09em; color:var(--annot); }

/* ---------- 11. Rorelse ---------- */
.js [data-in]{ opacity:0; transform:translateY(14px); }
.js [data-in].syns{
  opacity:1; transform:none;
  transition:opacity 600ms var(--lagd) calc(var(--d,0) * 1ms),
             transform 600ms var(--lagd) calc(var(--d,0) * 1ms);
}
.js .ritning__svg path,.js .snitt__svg path,.js .tf__cell--sigill path{
  stroke-dasharray:1000; stroke-dashoffset:1000;
  transition:stroke-dashoffset 620ms var(--ritad) calc(var(--d,0) * 1ms);
}
.js .ritning__svg.drar path,.js .snitt__svg.drar path,.js .tf__cell--sigill.drar path{ stroke-dashoffset:0; }
.js .snitt__svg .snitt-obj path,.js .tf__cell--sigill .sig-obj{
  fill-opacity:0;
  transition:stroke-dashoffset 620ms var(--ritad) calc(var(--d,0) * 1ms),
             fill-opacity 460ms var(--lagd) calc(var(--d,0) * 1ms + 400ms);
}
.js .snitt__svg.drar .snitt-obj path,.js .tf__cell--sigill.drar .sig-obj{ fill-opacity:1; }
.js .stock__linje{ transform:scaleX(0); transition:transform 700ms var(--lagd); }
.js .stock.syns .stock__linje{ transform:scaleX(1); }
.js .stock__streck i{ opacity:0; transition:opacity 240ms var(--lagd) calc(var(--d,0) * 1ms + 300ms); }
.js .stock.syns .stock__streck i{ opacity:1; }

/* ---------- 12. Under 1080 ---------- */
@media (max-width:1079px){
  .ritning{ grid-column:1 / 13; grid-row:auto; margin-top:clamp(40px,6vh,72px); }
  .ritning__box{ width:132vw; }
  .hero__ingress{ grid-column:1 / 9; }
  .rit-tal--l{ left:38%; }
}

/* ---------- 13. Under 900 ---------- */
@media (max-width:899px){
  .sek > .grid > h2,.etikett--sek,.manifest,.kapacitet,.panel{ grid-column:1 / 13; }
  #forfragan > .grid > .ingress{ grid-column:1 / 13; }
  .konst{ grid-column:1 / 13; grid-template-columns:minmax(0,1fr); row-gap:40px; }
  .konst__del{ padding-right:0; max-width:60ch; }
  .konst__del--b{ margin-left:16px; }
  .konst__del--c{ margin-left:32px; }
  .snitt,.snitt__text{ grid-column:1 / 13; grid-row:auto; }
  .snitt__text{ margin-top:34px; max-width:62ch; }
  .skeden{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:42px; }
  .vagar{ grid-template-columns:minmax(0,1fr); }
  .vag--b{ margin-top:48px; margin-left:20px; }
  .tf{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tf__cell:nth-child(3){ border-left:0; padding-left:0; }
  .tf__cell:nth-child(3),.tf__cell:nth-child(4){ border-top:1px solid var(--linje); }
}

/* ---------- 14. Under 768 ---------- */
@media (max-width:767px){
  .topp__knapp{ display:block; }
  .topp__ark{ display:none; }
  .ledare{ display:none; }
  .topp__nav{
    position:fixed; inset:var(--topph) 0 0 0; z-index:59; margin:0;
    background:var(--papper); flex-direction:column; align-items:stretch;
    justify-content:flex-start; gap:0; overflow-y:auto;
    padding:clamp(20px,4vh,44px) var(--marg) 48px;
    visibility:hidden; opacity:0; transform:translateY(-8px);
    transition:opacity 240ms var(--lagd),transform 240ms var(--lagd),visibility 0s 240ms;
  }
  body.meny-oppen{ overflow:hidden; }
  body.meny-oppen .topp__nav{
    visibility:visible; opacity:1; transform:none;
    transition:opacity 240ms var(--lagd),transform 240ms var(--lagd),visibility 0s;
  }
  .topp__nav ul{ flex-direction:column; gap:0; }
  .topp__nav ul a,.topp__cta{
    font:400 clamp(1.7rem,7vw,2.1rem)/1.36 var(--disp) !important;
    letter-spacing:-.01em; padding:15px 0 !important;
    border-bottom:1px solid var(--rutnat); display:block !important;
  }
  .topp__nav a i{
    font:500 11px/1 var(--mono); letter-spacing:.09em;
    color:var(--annot); margin-right:14px; vertical-align:middle;
  }
  .topp__nav a::after{ display:none; }

  .titelruta,.hero__rad,.hero__rad--2,.hero__ingress,.ritning{ grid-column:1 / 13; }
  .hero__rad--2{ padding-left:56px; }
  .ritning__box{ width:100%; aspect-ratio:380 / 620; }
  .rit-tal--l{ display:none; }
  .rit-tal--h{ left:14%; top:44%; }
  .visa-stor{ display:none; }
  .visa-liten{ display:block; }

  .snitt__box{ aspect-ratio:400 / 300; }
  .snitt__reglage{ flex-direction:column; align-items:stretch; gap:0; }
  .snitt__reglage input[type=range]{ flex:none; width:100%; }
  .skeden{ grid-template-columns:minmax(0,1fr); row-gap:34px; }
  .stock{ height:70px; }
  .vag--b{ margin-left:0; padding-left:14px; }
  .vag--b::before,.vag--b::after{ left:0; }

  .falt{ grid-template-columns:minmax(0,1fr); }
  .falt > .etikett{ margin:0 0 8px; }
  .knapp{ display:block; width:100%; text-align:center; min-height:52px; }
  .knapp--skicka{ justify-self:stretch; }

  .tf{ grid-template-columns:minmax(0,1fr); }
  .tf__cell{ border-left:0; padding-left:0; border-top:1px solid var(--linje); }
  .tf__cell:first-child{ border-top:0; }
  .tf__cell:nth-child(3){ border-top:1px solid var(--linje); }
  .tf__cell--sigill{ flex-direction:row; align-items:center; justify-content:flex-start; gap:18px; }
}

/* ---------- 15. Stillhet ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
  }
}