/* =============================================================================
   NEW DAVID JONE FASHION, designsystem
   Godkand av Thomas 2026-09-18 mot docs/design-preview.html

   Tokens och @font-face inlinas i head av inc/design/class-assets.php eftersom
   de behovs fore forsta malningen. Den har filen ar allt ovrigt, och den ska
   cachas, inte inlinas.

   Ordningen ar medveten och foljer kaskaden:
     1. Astra-neutralisering
     2. Bas och typografi
     3. Layout och rytm
     4. Komponenter
     5. Rorelse och tillganglighet
   ============================================================================= */


/* 1. ASTRA-NEUTRALISERING
   ---------------------------------------------------------------------------
   Astra satter egen typografi, egna behallarbredder och egna knappstilar via
   sin dynamiska CSS. Vi tar over de delarna i stallet for att slass med dem pa
   varje enskild regel. Det som inte rors har ar Astras rutnat och responsivitet,
   som fungerar bra och inte ska byggas om.                                     */

.ast-container,
.ast-container-fluid,
.site-content .ast-container {
	max-width: var(--ndj-site-width);
	padding-left: var(--ndj-gutter);
	padding-right: var(--ndj-gutter);
}

.entry-content > * {
	max-width: none;
}

/* Astras standardknapp far inte lacka in i vart innehall. */
.entry-content .wp-block-button__link {
	border-radius: 0;
}


/* 2. BAS OCH TYPOGRAFI
   ---------------------------------------------------------------------------
   Radlangd ar viktigare an teckenstorlek. En brodtext bredare an cirka 66
   tecken lases samre och ser billigare ut, oavsett hur fin typsnittet ar.      */

body {
	font-family: var(--ndj-font-body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--ndj-text);
	background: var(--ndj-white);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	font-family: var(--ndj-font-heading);
	font-weight: 700;
	color: var(--ndj-dark);
	line-height: 1.14;
}

h1, .ndj-d1 { font-size: clamp(40px, 5.4vw, 66px); letter-spacing: -.005em; }
h2, .ndj-d2 { font-size: clamp(28px, 3.6vw, 42px); }
h3, .ndj-d3 { font-size: clamp(21px, 2.4vw, 27px); }
h4          { font-size: 20px; }

.entry-content p,
.entry-content ul,
.entry-content ol {
	max-width: 66ch;
}

.entry-content > * + * { margin-top: 1.15em; }
.entry-content > * + h2 { margin-top: 2.4em; }
.entry-content > * + h3 { margin-top: 1.9em; }

.entry-content a {
	color: var(--ndj-dark);
	text-decoration: none;
	border-bottom: 1px solid var(--ndj-gold);
	padding-bottom: 1px;
	transition: border-color 320ms var(--ndj-ease), color 320ms var(--ndj-ease);
}

.entry-content a:hover,
.entry-content a:focus-visible {
	color: var(--ndj-gray);
	border-color: var(--ndj-dark);
}

/**
 * Etiketten. Liten spard versal ovanfor en rubrik.
 * Kostar ingenting och ar det enskilt billigaste greppet i hela systemet.
 */
.ndj-eyebrow {
	font-family: var(--ndj-font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ndj-gray);
	margin-bottom: 14px;
}

.ndj-lead { font-size: 20px; line-height: 1.6; max-width: 62ch; }
.ndj-small { font-size: 14px; color: var(--ndj-gray); }


/* 3. LAYOUT OCH RYTM
   ---------------------------------------------------------------------------
   Rytmen ar det som gor en sida dyr. En sajt dar varje sektion har samma hojd
   laser platt. Darfor tre hojder, inte en.                                     */

.ndj-wrap { max-width: var(--ndj-site-width); margin: 0 auto; padding: 0 var(--ndj-gutter); }
.ndj-narrow { max-width: 780px; margin-inline: auto; }

.ndj-sec { padding: 96px 0; }
.ndj-sec--tight { padding: 62px 0; }
.ndj-sec--tall { padding: 132px 0; }
.ndj-sec--dark { background: var(--ndj-dark); color: rgba(255, 255, 255, .8); }
.ndj-sec--dark h1,
.ndj-sec--dark h2,
.ndj-sec--dark h3 { color: var(--ndj-white); }
.ndj-sec--light { background: var(--ndj-light); }

@media (max-width: 782px) {
	.ndj-sec { padding: 62px 0; }
	.ndj-sec--tall { padding: 78px 0; }
}


/* 4. KOMPONENTER
   --------------------------------------------------------------------------- */

/* 4a. Hero. Tar hela vyn, som hos LV och Armani. */
.ndj-hero {
	position: relative;
	min-height: 76vh;
	display: grid;
	place-items: center;
	text-align: center;
	color: var(--ndj-white);
	/* Reservbakgrund om ingen hero-bild ar satt. Den riktiga regeln, med
	   bilden och dampningen, star i avsnitt 6f. */
	background-color: #1b1c1e;
}

.ndj-hero__in { position: relative; z-index: 1; padding: 120px 30px 90px; max-width: 840px; }
.ndj-hero h1 { color: var(--ndj-white); }
.ndj-hero .ndj-eyebrow { color: var(--ndj-gold); }
.ndj-hero .ndj-lead { color: rgba(255, 255, 255, .78); margin: 22px auto 30px; }

/* Ligger en bild bakom behovs en dampning for att texten ska na 4,5:1. */
.ndj-hero--bild::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(12, 12, 13, .52);
}

/* 4b. Knappar. Minst 48px hoga. Guldet bar ALDRIG vit text, se DESIGN-DECISIONS. */
.ndj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 14px 32px;
	font-family: var(--ndj-font-heading);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 320ms var(--ndj-ease), color 320ms var(--ndj-ease), border-color 320ms var(--ndj-ease);
}

.ndj-btn--gold { background: var(--ndj-gold); color: var(--ndj-btn-text); }
.ndj-btn--gold:hover,
.ndj-btn--gold:focus-visible { background: var(--ndj-dark); color: var(--ndj-gold); }

.ndj-btn--line { background: transparent; color: var(--ndj-dark); border-color: var(--ndj-dark); }
.ndj-btn--line:hover,
.ndj-btn--line:focus-visible { background: var(--ndj-dark); color: var(--ndj-gold); }

/* 4c. Textlank som CTA. LV-greppet: lyx skriker inte pa knappar. */
.ndj-tlink {
	display: inline-block;
	font-family: var(--ndj-font-body);
	font-size: 15px;
	letter-spacing: .04em;
	color: var(--ndj-dark);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
	transition: color 320ms var(--ndj-ease), border-color 320ms var(--ndj-ease);
}

.ndj-tlink:hover,
.ndj-tlink:focus-visible { color: var(--ndj-gray); border-color: var(--ndj-gold); }

.ndj-hero .ndj-tlink,
.ndj-sec--dark .ndj-tlink { color: var(--ndj-white); border-color: rgba(255, 255, 255, .6); }
.ndj-hero .ndj-tlink:hover,
.ndj-sec--dark .ndj-tlink:hover { color: var(--ndj-gold); border-color: var(--ndj-gold); }

/* 4d. Bevisraden.
   Alternativet till konkurrentens fem identiska svarta lador. Harfina
   avgransare, inga lador, siffran bar. */
.ndj-proof {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	border-top: 1px solid var(--ndj-border);
	border-bottom: 1px solid var(--ndj-border);
}

.ndj-proof__i { padding: 34px 26px; border-right: 1px solid var(--ndj-border); }
.ndj-proof__i:last-child { border-right: 0; }

.ndj-proof strong {
	display: block;
	font-family: var(--ndj-font-heading);
	font-size: 27px;
	font-weight: 700;
	color: var(--ndj-dark);
	margin-bottom: 4px;
}

.ndj-proof span { font-size: 14px; color: var(--ndj-gray); line-height: 1.45; }

@media (max-width: 600px) {
	.ndj-proof__i { border-right: 0; border-bottom: 1px solid var(--ndj-border); }
	.ndj-proof__i:last-child { border-bottom: 0; }
}

/* 4e. Artikelkort, till bloggen och relaterat. */
.ndj-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 44px 34px; }
.ndj-card a { text-decoration: none; border: 0; }
.ndj-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 18px; }
.ndj-card h3 { font-size: 21px; margin-bottom: 8px; }
.ndj-card h3 a { color: var(--ndj-dark); transition: color 320ms var(--ndj-ease); }
.ndj-card a:hover h3, .ndj-card h3 a:hover { color: var(--ndj-gold); }
.ndj-card p { font-size: 15px; color: var(--ndj-gray); max-width: none; }

/* 5. RORELSE OCH TILLGANGLIGHET
   --------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--ndj-dark);
	outline-offset: 3px;
}

.ndj-sec--dark :focus-visible,
.ndj-hero :focus-visible { outline-color: var(--ndj-gold); }

/* Hoppa till innehall. Syns bara vid tangentbord. */
.ndj-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--ndj-dark);
	color: var(--ndj-gold);
	padding: 12px 20px;
	font-size: 14px;
}

.ndj-skip:focus { left: 0; }

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


/* 6. HEADER, PANEL OCH LAYOUT
   ---------------------------------------------------------------------------
   🔴 FLYTTAD HIT 2026-09-18. Reglerna lag tidigare inlinade i <head> via
   wp_head. Det var fel, och felet var svart att se:

   wp_head skriver ut inline-stilen TIDIGT. Astras egen stilmall kos med
   wp_enqueue_style och skrivs ut SENARE i samma <head>. Vid samma specificitet
   vinner den som kommer sist. Alltsa vann Astra varje gang.

   Resultatet var synligt men obegripligt: hamburgaren blev en BLA KNAPP, for
   Astras button-regel tog over, och headerns text blev vit pa vitt eftersom
   layoutreglerna aldrig gallde.

   Den har filen beror pa astra-theme-css och laddas darfor efter den. Da
   behovs inga !important och inga uppskruvade selektorer.                     */

/* 6a. Slapp Astras behallare pa sidor som bygger sin egen layout. */
.ndj-full .ast-container,
.ndj-full .site-content > .ast-container{max-width:none;padding-left:0;padding-right:0}
/* #primary ar det Astra kallar content-area, och den bar
   .ast-plain-container.ast-no-sidebar #primary{margin-top:60px;margin-bottom:60px}
   Det var de 60 px vit remsa ovanfor hero. Jag nollstallde .site-main och
   .entry-content men missade behallaren ovanfor dem. */
/* SPECIFICITET, matt och inte gissad.
   Astras regel ar:
     .ast-plain-container.ast-no-sidebar #primary{margin-top:60px;margin-bottom:60px}
   Det ar en id plus tva klasser, alltsa (1,2,0).
   Mitt forsta forsok var `.ndj-full #primary`, alltsa (1,1,0), och forlorade.
   Regeln fanns i filen, men den vann aldrig. Renderad matning visade
   marginTop:60px kvar.
   Andra forsoket var `body.ndj-full #primary`. Ocksa fel, och felet var mitt
   eget resonemang: `body` ar ett ELEMENT, inte en klass. Den selektorn ar
   (1,1,1), och vid jamforelse gar id forst, sedan klasser, sedan element.
   1=1 pa id, sedan 1 mot 2 pa klasser. Astra vann igen. Renderad matning
   visade marginTop:60px kvar bada gangerna.
   Tredje forsoket matchar Astras EGEN behallarklass plus var egen:
   (1,2,1) mot (1,2,0). Klar vinst pa element-niva, ingen tie, inget
   !important, och det syns i selektorn vad som overstyrs. */
body.ndj-full.ast-plain-container #primary,
body.ndj-full.ast-separate-container #primary,
body.ndj-full.ast-narrow-container #primary,
body.ndj-full.ast-plain-container .content-area,
body.ndj-full.ast-separate-container .content-area,
.ndj-full .site-main,
.ndj-full .entry-content,
.ndj-full .ast-article-single{max-width:none;padding:0;margin:0}
.ndj-full .entry-content > *{max-width:none;margin-top:0}
.ndj-full .entry-header{display:none}
.ndj-full .site-content{padding-top:0}
.ndj-full .ast-plain-container.ast-no-sidebar .entry-content .alignfull{margin:0}

/* 6b. Headern. */
.ndj-head{position:relative;width:100%;z-index:90}
.ndj-head__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  max-width:none;padding:22px 34px}

/* Astras button-regler far inte rora var trigger. */
.ndj-head__menu,
.ndj-panel__close{display:inline-flex;align-items:center;gap:11px;background:none;border:0;
  border-radius:0;box-shadow:none;padding:6px 2px;margin:0;cursor:pointer;color:inherit;
  font-family:var(--ndj-font-body);font-size:13px;letter-spacing:.09em;text-transform:none;
  line-height:1;min-height:44px;-webkit-appearance:none;appearance:none}
.ndj-head__menu:hover,.ndj-panel__close:hover,
.ndj-head__menu:focus,.ndj-panel__close:focus{background:none;color:inherit;box-shadow:none}
.ndj-head__menu{justify-self:start}

.ndj-burger{display:block;width:18px;flex:0 0 18px}
.ndj-burger i{display:block;height:1px;background:currentColor;margin:5px 0;
  transition:transform 320ms var(--ndj-ease),opacity 320ms var(--ndj-ease)}
.ndj-head__menu:hover .ndj-burger i:first-child{transform:translateX(3px)}
.ndj-head__menu:hover .ndj-burger i:last-child{transform:translateX(-3px)}

.ndj-head__word{font-family:var(--ndj-font-body);font-size:13px;letter-spacing:.09em;color:inherit}

/* 6c. Logotypen. Tva varianter i markupen, CSS visar ratt en. */
.ndj-head__mark{justify-self:center;display:flex;align-items:center;text-decoration:none;
  border:0;line-height:0;color:inherit}
.ndj-logo{display:none;width:auto;height:51px;max-width:none}
.ndj-head__ordmarke{font-family:var(--ndj-font-heading);font-size:20px;letter-spacing:.17em;
  text-transform:uppercase;white-space:nowrap;color:inherit}
.ndj-har-hero .ndj-logo--ljus{display:block}
body:not(.ndj-har-hero) .ndj-logo--mork{display:block;height:58px}

/* 6d. Hogersidan. */
.ndj-head__right{display:flex;align-items:center;gap:28px;justify-self:end}
.ndj-head__word--link{text-decoration:none;position:relative;padding-bottom:4px;
  color:inherit;border:0}
.ndj-head__word--link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform 320ms var(--ndj-ease)}
.ndj-head__word--link:hover::after,
.ndj-head__word--link:focus-visible::after{transform:scaleX(1);transform-origin:left}
.ndj-head__wa{display:inline-flex;color:inherit;opacity:.8;border:0;
  transition:opacity 320ms var(--ndj-ease),transform 320ms var(--ndj-ease)}
.ndj-head__wa:hover{opacity:1;transform:translateY(-1px)}

/* 6e. HEADERNS TVA LAGEN
   ---------------------------------------------------------------------------
   ANALYS av varfor forsta versionen kandes grov, och vad som ratades:

   1. Headern lag `absolute` och scrollade darmed BORT med sidan. Vid troskeln
      slog den om till `fixed` och kom TILLBAKA. Det ar inte en intoning, det
      ar ett ateruppdykande, och det upplevs som ett hopp hur mjuk fargen an ar.
      Rattat: headern ar ALLTID fixed. Da flyttar den sig aldrig, och det enda
      som andras ar farg och storlek.

   2. Binar troskel. Allt hande i en punkt. Rattat med scroll-driven animation
      dar den stods, sa att bakgrunden folier scrollpositionen kontinuerligt i
      stallet for att sla om.

   3. Allt rorde sig pa samma kurva och samma tid. Rattat: bakgrunden leder
      (0 till 180px) och storleken foljer strax efter (60 till 260px). Den
      forskjutningen ar hela skillnaden mellan "allt hander nu" och nagot som
      kanns komponerat.

   Stodet ar uppmatt, inte antaget: node _scripts/matt-stod.js.
   Chrome 153 har animation-timeline, animation-range och linear(). Webblasare
   utan stod faller tillbaka pa klassvaxlingen nedan, som ar samma design men
   i tva steg i stallet for kontinuerligt.                                      */

.ndj-har-hero .ndj-head{position:fixed;top:0;left:0;color:var(--ndj-white)}

/* --- Reserv: klassvaxling for webblasare utan scroll-timeline --- */
.ndj-har-hero .ndj-head{
  background-color:rgba(14,14,15,0);
  box-shadow:0 1px 0 rgba(255,255,255,0);
  transition:background-color 520ms cubic-bezier(.4,0,.2,1),
             box-shadow 520ms cubic-bezier(.4,0,.2,1)}
.ndj-har-hero .ndj-head .ndj-head__in{
  transition:padding 560ms cubic-bezier(.4,0,.2,1) 80ms}
.ndj-har-hero .ndj-head .ndj-logo{
  transition:height 560ms cubic-bezier(.4,0,.2,1) 80ms}

.ndj-har-hero .ndj-head.ar-fast{
  background-color:rgba(14,14,15,.95);
  box-shadow:0 1px 0 rgba(255,255,255,.07)}
.ndj-har-hero .ndj-head.ar-fast .ndj-head__in{padding-top:13px;padding-bottom:13px}
.ndj-har-hero .ndj-head.ar-fast .ndj-logo{height:42px}

/* --- Det sofistikerade laget: bunden till scrollpositionen, noll JS --- */
@supports (animation-timeline: scroll()){
  .ndj-har-hero .ndj-head{
    animation:ndj-head-bakgrund linear both;
    animation-timeline:scroll(root block);
    animation-range:0 180px;
    transition:none}

  .ndj-har-hero .ndj-head .ndj-head__in{
    animation:ndj-head-hojd linear both;
    animation-timeline:scroll(root block);
    animation-range:60px 260px;
    transition:none}

  .ndj-har-hero .ndj-head .ndj-logo{
    animation:ndj-logo-hojd linear both;
    animation-timeline:scroll(root block);
    animation-range:60px 260px;
    transition:none}

  /* Klassen far inte ta over nar animationen styr. */
  .ndj-har-hero .ndj-head.ar-fast{background-color:transparent;box-shadow:none}
}

@keyframes ndj-head-bakgrund{
  from{background-color:rgba(14,14,15,0);box-shadow:0 1px 0 rgba(255,255,255,0)}
  to{background-color:rgba(14,14,15,.95);box-shadow:0 1px 0 rgba(255,255,255,.07)}
}
@keyframes ndj-head-hojd{
  from{padding-top:22px;padding-bottom:22px}
  to{padding-top:13px;padding-bottom:13px}
}
@keyframes ndj-logo-hojd{
  from{height:51px}
  to{height:42px}
}

/* Pa ovriga sidor ligger headern kvar i flodet, mork text pa vitt. */
body:not(.ndj-har-hero) .ndj-head{color:var(--ndj-dark);border-bottom:1px solid var(--ndj-border)}

@media(max-width:860px){
  .ndj-head__in{padding:16px 20px;gap:12px}
  .ndj-head__right .ndj-head__word--link{display:none}
  .ndj-logo{height:40px}
  .ndj-head__menu .ndj-head__word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}

/* 6f. Hero. Bilden kommer som custom property fran pluginet.
   Tva lager ligger ovanpa bilden, och bada har ett skal:

   1. En toppgradient. Headern star ovanpa bilden, och om kunden byter till en
      ljus bild blir vit logotyp och vit text olasbar. Gradienten garanterar
      kontrast i de oversta 220 px oavsett vilken bild som valjs. Den ar
      dessutom osynlig pa en redan mork bild.
   2. En jamn dampning pa 52 procent, sa att H1 och lanken nar 4,5:1 aven pa
      bildens ljusaste parti.

   Ordningen spelar roll: forsta angivna gradienten ligger overst.              */
.ndj-hero{width:100%;max-width:100%;
  background-image:
    linear-gradient(to bottom,rgba(10,10,11,.55) 0,rgba(10,10,11,.22) 130px,rgba(10,10,11,0) 220px),
    linear-gradient(rgba(12,12,13,.52),rgba(12,12,13,.52)),
    var(--ndj-hero-img,none);
  background-size:cover;background-position:center;background-repeat:no-repeat}

/* 6g. Overlagget och panelen. */
.ndj-overlay{position:fixed;inset:0;background:rgba(10,10,10,.62);opacity:0;z-index:100;
  transition:opacity 320ms var(--ndj-ease)}
.ndj-overlay.ar-oppen{opacity:1}

.ndj-panel{position:fixed;top:0;left:0;height:100%;width:100%;max-width:440px;
  background:var(--ndj-white);color:var(--ndj-dark);z-index:101;overflow-y:auto;
  overscroll-behavior:contain;transform:translate3d(-100%,0,0);
  transition:transform 600ms var(--ndj-ease);padding:22px 34px 60px}
@media(min-width:1024px){.ndj-panel{width:33.3333%;min-width:330px;max-width:none}}
.ndj-panel.ar-oppen{transform:translate3d(0,0,0)}
.ndj-panel__close{color:var(--ndj-dark);margin-bottom:54px}
.ndj-x{position:relative;display:block;width:16px;height:16px;flex:0 0 16px}
.ndj-x::before,.ndj-x::after{content:"";position:absolute;top:7px;left:0;width:16px;height:1px;
  background:currentColor;transition:transform 320ms var(--ndj-ease)}
.ndj-x::before{transform:rotate(45deg)}
.ndj-x::after{transform:rotate(-45deg)}
.ndj-panel__close:hover .ndj-x::before{transform:rotate(135deg)}
.ndj-panel__close:hover .ndj-x::after{transform:rotate(45deg)}

.ndj-panel__nav ul{list-style:none;margin:0 0 46px;padding:0}
.ndj-panel__nav ul:last-child{margin-bottom:0}
.ndj-panel__nav a{display:block;padding:9px 0;text-decoration:none;border:0;
  color:var(--ndj-dark);font-family:var(--ndj-font-body);line-height:1.25;
  transition:color 320ms var(--ndj-ease),transform 320ms var(--ndj-ease)}
.ndj-grp--primar a{font-size:20px}
.ndj-grp--sekundar a{font-size:14px;color:var(--ndj-gray)}
.ndj-panel__nav a:hover,.ndj-panel__nav a:focus-visible{color:var(--ndj-gold);transform:translateX(5px)}
.ndj-panel__nav [aria-current=page]{text-decoration:underline;text-underline-offset:6px;
  text-decoration-thickness:1px;text-decoration-color:var(--ndj-gold)}

.ndj-panel li{opacity:0;transform:translateY(8px)}
.ndj-panel.ar-oppen li{opacity:1;transform:none;
  transition:opacity 420ms var(--ndj-ease),transform 420ms var(--ndj-ease);
  transition-delay:calc(var(--i) * 45ms + 140ms)}

/* Panelens egen rorelse ar sidans storsta. Ingen av de atta granskade
   lyxsajterna skyddade den med prefers-reduced-motion. Vi gor det. */
@media(prefers-reduced-motion:reduce){
  .ndj-panel,.ndj-overlay,.ndj-panel li{transition-duration:1ms !important;transition-delay:0ms !important}
}


/* 7. HERO, SKARPT LAGE
   ---------------------------------------------------------------------------
   Andringar mot forsta versionen, alla harledda ur referenssajterna:

   - Blocket ankras LAGRE i stallet for i exakt mitten. Bilden far andas ovanfor,
     och blicken landar dar innehallet borjar i stallet for mitt i motivet.
   - Negativ tracking pa rubriken. En serif pa 60px spretar utan den. Det ar en
     av de detaljer som skiljer satt text fran skriven text.
   - Radlangden begransas i tecken, inte med ett hardkodat <br>. Ett radbrott
     som fungerar pa 1440px bryter fel pa 1180px.
   - Entre. Innehallet stiger in i stallet for att bara finnas dar. Fyra
     element med 90ms mellanrum, alltsa en komposition och inte en animation.  */

.ndj-hero--lagt{place-items:end center}
.ndj-hero--lagt .ndj-hero__in{padding-bottom:clamp(90px,14vh,150px);padding-top:160px}

.ndj-hero h1{
  letter-spacing:-.018em;
  /* 26ch ger tva rader for en mening pa cirka 50 tecken. 18ch gav tre, och
     tre rader i ett hero laser som en text i stallet for som ett pastaende. */
  max-width:26ch;
  margin-inline:auto;
  text-wrap:balance}

.ndj-hero__kalla{
  font-family:var(--ndj-font-body);
  font-size:14px;
  letter-spacing:.06em;
  color:rgba(255,255,255,.62);
  margin:18px auto 30px}

/* Entren. `--d` satts per element i markupen, sa ordningen ar redigerbar
   tillsammans med innehallet och inte gomd i CSS. */
.ndj-stig{opacity:0;transform:translateY(14px);
  animation:ndj-stig 900ms cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:var(--d,0ms)}

@keyframes ndj-stig{to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .ndj-stig{animation:none;opacity:1;transform:none}
}


/* 8. PARALLAX
   ---------------------------------------------------------------------------
   Gen 2 anvander `background-attachment: fixed`. Det ar fel pa tva satt:
   det tvingar fram ommalning vid varje scroll-frame, och flera mobila
   webblasare ignorerar vardet helt, sa effekten syns inte dar den kostar mest.

   Har ligger bilden i ett eget lager som forskjuts med `translate3d` bundet
   till `animation-timeline: view()`. Alltsa elementets position i vyn styr
   forskjutningen. Det kors pa kompositorn, utan layout och utan ommalning,
   och utan en enda rad JavaScript.

   Bilden ar 120 procent hog och forskjuts 10 procent i vardera riktningen, sa
   att inga kanter nagonsin syns.

   Webblasare utan `animation-timeline` far en stillastaende bild. Det ar en
   fullt godtagbar sida, bara utan rorelsen. Ingen polyfill: den kostar 16,3 kB
   for en effekt som ar dekor.

   Stodet ar uppmatt, se node _scripts/matt-stod.js.                            */

.ndj-par{position:relative;overflow:hidden;display:grid;place-items:center;
  isolation:isolate;color:var(--ndj-white)}
.ndj-par--citat{min-height:min(80vh,680px)}
.ndj-par--bred{min-height:min(62vh,540px)}

/* Bilden ligger som <img> i en forskjuten behallare, inte som CSS-bakgrund.
   Skalet: en bakgrund kan inte ha srcset, sa telefonen hade hamtat samma fil
   som en 27-tumsskarm. Nu valjer webblasaren sjalv, och vi far alt-text och
   lazy loading pa kopet. */
.ndj-par__bild{position:absolute;left:0;right:0;top:-10%;height:120%;z-index:-2;
  will-change:transform}
.ndj-par__img{width:100%;height:100%;object-fit:cover;display:block}

/* Dampningen. Utan den klarar vit text inte 4,5:1 pa bildens ljusa partier. */
/* 58 procent racker pa en mork bild men inte pa butiksfasaden, som ar ljus och
   full av farg. Citatet ar sidans starkaste pastaende och far inte tavla med
   motivet. En radiell dampning morkar mitten dar texten star och slapper upp
   kanterna, sa bilden syns men texten vinner. */
.ndj-par::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 80% 70% at 50% 50%,rgba(8,8,9,.82) 0,rgba(8,8,9,.62) 55%,rgba(8,8,9,.5) 100%)}
.ndj-par--bred::after{background:linear-gradient(90deg,rgba(10,10,11,.78) 0,rgba(10,10,11,.42) 62%,rgba(10,10,11,.3) 100%)}

.ndj-par__in{position:relative;z-index:1;max-width:900px;padding:60px 30px;text-align:center}
.ndj-par--bred .ndj-par__in{text-align:left;max-width:var(--ndj-site-width);width:100%;
  margin-inline:auto;padding-inline:var(--ndj-gutter)}
.ndj-par--bred h2{color:var(--ndj-white);max-width:20ch}
.ndj-par--bred .ndj-eyebrow{color:var(--ndj-gold)}

.ndj-par blockquote{margin:0}
.ndj-par blockquote p{font-family:var(--ndj-font-heading);font-weight:700;
  font-size:clamp(30px,4.4vw,54px);line-height:1.16;letter-spacing:-.018em;
  color:var(--ndj-white);max-width:22ch;margin:0 auto;text-wrap:balance}
.ndj-par blockquote cite{display:block;margin-top:26px;font-family:var(--ndj-font-body);
  font-style:normal;font-size:14px;letter-spacing:.06em;color:rgba(255,255,255,.62)}

@supports (animation-timeline: view()){
  .ndj-par__bild{
    animation:ndj-parallax linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%}
}

@keyframes ndj-parallax{
  from{transform:translate3d(0,-8%,0)}
  to{transform:translate3d(0,8%,0)}
}

@media(prefers-reduced-motion:reduce){
  .ndj-par__bild{animation:none;transform:none;top:0;height:100%}
}


/* 9. SEKTIONER FRAN MICHAEL ANDREWS-UPPLAGGET
   ---------------------------------------------------------------------------
   Ordningen ar deras, innehallet vart. Uppmatt med node _scripts/matt-struktur.js.

   Genomgaende: mer luft. Deras sida ar 13 810px och tal det. Var ar en tredjedel
   sa lang, och da maste luften gora jobbet i stallet for langden.              */

/* Sektionens egen topp. Etikett, rubrik, ingress, som ett block med eget andrum. */
.ndj-sec__topp{max-width:64ch;margin:0 auto 72px;text-align:center}
.ndj-sec__topp .ndj-lead{margin-inline:auto;margin-top:22px}
.ndj-sec__fot{margin-top:66px;text-align:center}

/* 9a. Konstruktionsnivaerna. Tre spalter, hårfina avgransare, inga lador. */
.ndj-nivaer{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:0;border-top:1px solid var(--ndj-border)}
.ndj-niva{padding:48px 40px 44px;border-right:1px solid var(--ndj-border);
  border-bottom:1px solid var(--ndj-border)}
.ndj-niva:last-child{border-right:0}
.ndj-niva__nr{font-family:var(--ndj-font-body);font-size:12px;letter-spacing:.24em;
  color:var(--ndj-gold);margin-bottom:22px}
.ndj-niva h3{font-size:25px;margin-bottom:16px}
.ndj-niva p{font-size:16px;line-height:1.7;max-width:none}
.ndj-niva__for{margin-top:20px;padding-top:20px;border-top:1px solid var(--ndj-border);
  font-size:14px;color:var(--ndj-gray)}

@media(max-width:860px){
  .ndj-niva{border-right:0;padding:36px 0 32px}
  .ndj-niva:last-child{border-bottom:0}
}

/* 9b. Processen. En numrerad sekvens, inte en punktlista. */
.ndj-steg{list-style:none;margin:0;padding:0;counter-reset:steg;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:54px 48px}
.ndj-steg li{position:relative;padding-left:64px}
.ndj-steg__nr{position:absolute;left:0;top:2px;font-family:var(--ndj-font-heading);
  font-size:15px;font-weight:700;letter-spacing:.1em;color:var(--ndj-gold);
  padding-bottom:8px;border-bottom:1px solid var(--ndj-gold)}
.ndj-steg h3{font-size:21px;margin-bottom:10px}
.ndj-steg p{font-size:16px;line-height:1.7;color:var(--ndj-gray);max-width:none}

@media(max-width:600px){
  .ndj-steg{gap:40px}
  .ndj-steg li{padding-left:52px}
}

/* 9c. Tvaspalt med bild. Manniskorna och materialet far plats. */
.ndj-tva{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.ndj-tva--omvand .ndj-tva__bild{order:2}
.ndj-tva__bild{margin:0}
.ndj-bild{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
.ndj-tva__text h2{margin-bottom:22px}
.ndj-tva__text p{max-width:52ch}
.ndj-tva__text p + p{margin-top:18px}
.ndj-tva__text .ndj-lead{margin-bottom:22px}
.ndj-tva__text .ndj-tlink{margin-top:14px}

@media(max-width:860px){
  .ndj-tva{grid-template-columns:1fr;gap:36px}
  .ndj-tva--omvand .ndj-tva__bild{order:0}
}

/* 9d. Knappar bredvid varandra, med luft. */
.ndj-knappar{display:flex;gap:18px;flex-wrap:wrap;margin-top:38px}
.ndj-btn--ljus{color:var(--ndj-white);border-color:rgba(255,255,255,.45)}
.ndj-btn--ljus:hover,.ndj-btn--ljus:focus-visible{background:var(--ndj-white);
  color:var(--ndj-dark);border-color:var(--ndj-white)}

/* 9e. Mer luft overallt. Var sida ar kortare an referensens, sa luften far
   gora det langden gor dar. */
.ndj-sec--tall{padding:150px 0}
@media(max-width:782px){.ndj-sec--tall{padding:86px 0}}


/* 10. INNERSIDOR
   ---------------------------------------------------------------------------
   Sidor utan hero. De borjar med en textblock i stallet, och headern ligger da
   i flodet med mork text pa vitt.                                             */

/* 190px var raknat for en header OVANPA innehallet. Pa innersidorna ligger
   den i flodet och ar redan 100px, sa 190 gav ca 250px tomt fore etiketten
   (uppmatt 2026-09-25). 120 behaller luften utan att sidan ser tom ut. */
.ndj-sida__topp{padding:120px 0 96px;text-align:center}
.ndj-sida__topp h1{max-width:20ch;margin-inline:auto;letter-spacing:-.018em;text-wrap:balance}
.ndj-sida__topp .ndj-lead{margin:26px auto 0;color:var(--ndj-gray)}

@media(max-width:782px){.ndj-sida__topp{padding:72px 0 56px}}

/* Loptext i en sektion. Radlangden ar det som avgor lasbarhet, inte storleken. */
.ndj-text p{max-width:62ch}
.ndj-text p + p{margin-top:20px}
.ndj-text h2{margin-bottom:24px}
.ndj-text .ndj-eyebrow{margin-bottom:16px}
.ndj-sec--dark .ndj-text p{color:rgba(255,255,255,.82)}
.ndj-sec--dark .ndj-eyebrow{color:var(--ndj-gold)}

/* Aret som rubrik. En etikett med siffror bar mer an ett ord gor. */
.ndj-sec--dark .ndj-text h2{font-size:clamp(32px,4.2vw,48px)}


/* 11. MATDIAGRAM
   ---------------------------------------------------------------------------
   Diagrammet och listan ar samma sak, visad pa tva satt. Att peka pa en rad
   tander linjen, och tvartom.

   Tillganglighet: SVG:en ar aria-hidden och ren dekor. All information finns i
   listan som vanlig text. Raderna ar fokuserbara sa att kopplingen finns aven
   for den som anvander tangentbord, men ingen information gar forlorad utan
   den.                                                                         */

.ndj-matt{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:64px;align-items:start}

.ndj-matt__fig{position:sticky;top:120px}
.ndj-matt__fig svg{width:100%;height:auto;display:block}

.ndj-matt__kontur .ndj-fig{fill:none;stroke:#c9ccd1;stroke-width:1.6;
  stroke-linejoin:round}
.ndj-matt__kontur .ndj-fig--tunn{stroke-width:1}

/* Linjerna ligger dampade tills nagot pekas ut. Alla samtidigt i full styrka
   ar en spagettiteckning, inte en karta. */
.ndj-matt__linje{opacity:.62;transition:opacity 320ms var(--ndj-ease)}
.ndj-matt__linje line,
.ndj-matt__linje path{stroke:var(--ndj-gold);stroke-width:1.5;fill:none}
.ndj-matt__linje circle{fill:var(--ndj-gold)}
.ndj-matt__linje text{fill:var(--ndj-dark);font-family:var(--ndj-font-body);
  font-size:15px;font-weight:500}

.ndj-matt.ar-aktiv .ndj-matt__linje{opacity:.14}
.ndj-matt__linje.ar-tand,
.ndj-matt.ar-aktiv .ndj-matt__linje.ar-tand{opacity:1}
.ndj-matt__linje.ar-tand line,
.ndj-matt__linje.ar-tand path{stroke-width:2.5}
.ndj-matt__linje.ar-tand text{font-weight:700}

.ndj-matt__lista{list-style:none;margin:0;padding:0;counter-reset:matt}
.ndj-matt__lista li{counter-increment:matt;position:relative;padding:20px 0 20px 54px;
  border-bottom:1px solid var(--ndj-border);cursor:default;
  transition:background 320ms var(--ndj-ease)}
.ndj-matt__lista li:first-child{border-top:1px solid var(--ndj-border)}
.ndj-matt__lista li::before{content:counter(matt,decimal-leading-zero);
  position:absolute;left:0;top:22px;font-family:var(--ndj-font-body);font-size:12px;
  letter-spacing:.2em;color:var(--ndj-gold)}
.ndj-matt__lista li:hover,
.ndj-matt__lista li:focus-visible{background:var(--ndj-light);outline:none}
.ndj-matt__lista li.ar-tand{background:var(--ndj-light)}
.ndj-matt__lista strong{display:block;font-family:var(--ndj-font-heading);font-size:19px;
  font-weight:700;color:var(--ndj-dark);margin-bottom:5px}
.ndj-matt__lista span{font-size:16px;line-height:1.65;color:var(--ndj-gray)}

@media(max-width:860px){
  .ndj-matt{grid-template-columns:1fr;gap:40px}
  .ndj-matt__fig{position:static;max-width:320px;margin-inline:auto}
}

/* Tat variant av stegen, till listor som inte ar en process. */
.ndj-steg--tat{gap:34px 44px}
.ndj-steg--tat li{padding-left:56px}


/* 12. FOTEN
   ---------------------------------------------------------------------------
   LJUS, pa Thomas instruktion. Sajten ska vara light, och en ljus fot later
   dessutom de morka sektionerna inne pa sidorna behalla sin tyngd. En sajt dar
   bade sektioner och fot ar morka har inga morka sektioner, bara en mork sajt.

   Hierarkin foljer samma princip som panelen och nivaerna: luft och
   teckenstorlek, harfina avgransare, inga lador.                               */

.ndj-fot{background:var(--ndj-light);border-top:1px solid var(--ndj-border);
  padding:96px 0 40px;color:var(--ndj-gray)}

/* Husblocket far mer bredd an ovriga. Adressen ar 58 tecken och brot pa tre
   rader nar kolumnen var 1.5fr. Med 2.1fr far den tva, vilket ar rimligt for
   en gatuadress. `align-items:start` hindrar att korta kolumner strackas ut. */
.ndj-fot__rutnat{display:grid;
  grid-template-columns:2.1fr repeat(4,1fr);gap:48px 44px;
  align-items:start;
  padding-bottom:52px;border-bottom:1px solid var(--ndj-border)}

.ndj-fot__logo{width:170px;height:auto;margin-bottom:22px;display:block}

.ndj-fot address{font-style:normal;font-size:15px;line-height:1.7;color:var(--ndj-gray);
  max-width:34ch}
.ndj-fot__oppet{margin-top:14px;font-size:15px;color:var(--ndj-dark)}

.ndj-fot__grupp h2{font-family:var(--ndj-font-body);font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ndj-dark);margin-bottom:20px}
.ndj-fot__grupp ul{list-style:none;margin:0;padding:0}
.ndj-fot__grupp li{margin-bottom:11px}
.ndj-fot a{color:var(--ndj-gray);text-decoration:none;border-bottom:1px solid transparent;
  padding-bottom:1px;transition:color 320ms var(--ndj-ease),border-color 320ms var(--ndj-ease)}
.ndj-fot a:hover,.ndj-fot a:focus-visible{color:var(--ndj-dark);border-color:var(--ndj-gold)}
.ndj-fot__grupp li a{font-size:15px}

.ndj-fot__sociala{margin-top:24px;display:flex;gap:18px}
.ndj-fot__sociala li{margin:0}

/* Tygraden. Det enda vi tog rakt av fran live-foten. Nio ord som sager vad
   huset arbetar med, och nio interna lankar till tygsidan. */
.ndj-fot__tyger{padding:44px 0;border-bottom:1px solid var(--ndj-border)}
.ndj-fot__tyger h2{font-family:var(--ndj-font-body);font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ndj-dark);margin-bottom:20px}
.ndj-fot__tyger ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:10px 0}
.ndj-fot__tyger li{position:relative;padding:0 20px 0 0;margin-right:20px}
.ndj-fot__tyger li::after{content:"";position:absolute;right:0;top:6px;bottom:6px;
  width:1px;background:var(--ndj-border)}
.ndj-fot__tyger li:last-child::after{display:none}
.ndj-fot__tyger a{font-family:var(--ndj-font-heading);font-size:19px;color:var(--ndj-dark)}
.ndj-fot__tyger a:hover{color:var(--ndj-gold);border-color:transparent}

.ndj-fot__botten{display:flex;align-items:center;justify-content:space-between;
  gap:30px;flex-wrap:wrap;padding-top:34px}

/* Badgen ar TripAdvisors, i original och ofargad. Deras villkor tillater inte
   att den fargas om, och den gronna ar darfor medvetet frammande i paletten.
   Diskret storlek och nere i foten ar ratt plats for nagon annans sigill. */
.ndj-fot__badge{display:inline-flex;align-items:center;gap:14px;border:0}
.ndj-fot__badge img{width:44px;height:auto;display:block;flex:0 0 44px}
/* Texten ska sta pa EN rad bredvid ikonen. Tva rader bredvid en 52px-ikon
   laser som en trasig bildtext, inte som ett sigill. */
.ndj-fot__badge span{font-size:14px;color:var(--ndj-gray);line-height:1.35;white-space:nowrap}
.ndj-fot__badge:hover span{color:var(--ndj-dark)}

.ndj-fot__legal{font-size:13px;color:var(--ndj-gray);margin:0}
.ndj-fot__legal a{margin-left:10px}

@media(max-width:1100px){
  .ndj-fot__rutnat{grid-template-columns:1fr 1fr 1fr;gap:48px 36px}
  .ndj-fot__hus{grid-column:1 / -1}
}
@media(max-width:700px){
  .ndj-fot{padding:64px 0 32px}
  .ndj-fot__rutnat{grid-template-columns:1fr 1fr;gap:40px 28px}
  .ndj-fot__tyger a{font-size:17px}
  .ndj-fot__botten{flex-direction:column;align-items:flex-start}
}


/* 13. SAMTALET
   ---------------------------------------------------------------------------
   Varje steg ar en lank, inte ett JavaScript-tillstand. Det syns i CSS:en pa
   att det inte finns nagot dolt: ett steg som inte ska visas an renderas inte
   alls av servern. Inga `display:none`, inga klasser som slas pa och av.

   Konsekvens: sidan fungerar identiskt med skript avstangt, och tillbakaknappen
   gor det man forvantar sig.                                                   */

.ndj-sam{max-width:var(--ndj-site-width);margin-inline:auto}
.ndj-sam__steg{padding:56px 0;border-top:1px solid var(--ndj-border)}
.ndj-sam__steg:first-child{border-top:0;padding-top:0}
.ndj-sam__steg h2{font-size:clamp(25px,3vw,34px);margin-bottom:10px}
.ndj-sam__ingress{font-size:16px;color:var(--ndj-gray);max-width:56ch;margin-bottom:30px}
.ndj-sam__steg h2 + .ndj-sam__val{margin-top:30px}

.ndj-sam__val{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;
  background:var(--ndj-border);border:1px solid var(--ndj-border)}

/* Korten ar lankar, och de ska se ut som val, inte som knappar. Bakgrunden ar
   vit och avgransaren ar rutnatets egen bakgrund som lyser igenom i springan. */
.ndj-sam__kort{display:flex;flex-direction:column;gap:6px;padding:26px 24px;
  background:var(--ndj-white);text-decoration:none;border:0;
  transition:background 320ms var(--ndj-ease)}
.ndj-sam__kort:hover,.ndj-sam__kort:focus-visible{background:var(--ndj-light)}
.ndj-sam__kort.ar-vald{background:var(--ndj-dark)}

.ndj-sam__titel{font-family:var(--ndj-font-heading);font-size:20px;font-weight:700;
  color:var(--ndj-dark);line-height:1.2}
.ndj-sam__text{font-size:15px;line-height:1.55;color:var(--ndj-gray)}
.ndj-sam__kort.ar-vald .ndj-sam__titel{color:var(--ndj-white)}
.ndj-sam__kort.ar-vald .ndj-sam__text{color:rgba(255,255,255,.7)}

/* Riktningskorten har en bild, en rendering ur konfiguratorns lager. Den ar
   genomskinlig och star pa kortets egen botten, ljus eller mork. */
.ndj-sam__val--figur .ndj-sam__kort{padding-top:22px;align-items:center;text-align:center}
.ndj-sam__fig{width:100%;max-width:170px;height:auto;margin:0 auto 12px;display:block;
  transition:transform 420ms var(--ndj-ease)}
.ndj-sam__kort:hover .ndj-sam__fig{transform:translateY(-3px)}

/* Korten ar lankar, och Astras `.ast-single-post .entry-content a` (0,2,1)
   stryker annars under all text i dem. */
.entry-content a.ndj-sam__kort,
.ast-single-post .entry-content a.ndj-sam__kort{text-decoration:none;border-bottom:0}

/* Svaret. Det besokaren FAR, och det ar poangen med hela flodet. */
.ndj-sam__svar{padding:56px 0 0;border-top:1px solid var(--ndj-dark)}
.ndj-sam__svar h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:34px}
.ndj-sam__rader{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px}
.ndj-sam__rad h3{font-size:19px;margin-bottom:9px}
.ndj-sam__rad p{font-size:16px;line-height:1.7;color:var(--ndj-gray);max-width:46ch}
.ndj-sam__vidare{margin-top:44px;display:flex;gap:30px;flex-wrap:wrap}
.ndj-sam__notis{margin-top:34px;font-size:13px;color:var(--ndj-gray);
  padding-top:18px;border-top:1px solid var(--ndj-border)}

@media(max-width:700px){
  .ndj-sam__steg{padding:38px 0}
  .ndj-sam__val{grid-template-columns:1fr}
  .ndj-sam__fig{max-width:140px}
}


/* 14. UTFALLBAR LISTA
   ---------------------------------------------------------------------------
   <details> och <summary>, alltsa native HTML. Noll JavaScript, fungerar utan
   skript, och webblasarens egen soknnig hittar innehallet aven nar det ar
   hopfallt.

   ✅ Baymard, 25 testrundor och over 4 400 deltagarsessioner: besokare missar
   upprepat karninnehall bakom horisontella FLIKAR, och pa mobil forsvinner
   flikarna vid scroll. 29 procent av sajterna anvander dem anda. Utfallbara
   avsnitt har inte det problemet, eftersom allt ligger i samma spalt.          */

.ndj-lista{border-top:1px solid var(--ndj-border)}
.ndj-lista details{border-bottom:1px solid var(--ndj-border)}
.ndj-lista summary{display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:26px 0;cursor:pointer;list-style:none;
  font-family:var(--ndj-font-heading);font-size:clamp(20px,2.4vw,26px);font-weight:700;
  color:var(--ndj-dark);transition:color 320ms var(--ndj-ease)}
.ndj-lista summary::-webkit-details-marker{display:none}
.ndj-lista summary:hover,.ndj-lista summary:focus-visible{color:var(--ndj-gold)}

/* Plustecknet, ritat med tva linjer i stallet for ett tecken, sa att det gar
   att rotera och sa att det aldrig paverkas av typsnittet. */
.ndj-lista summary::after{content:"";width:16px;height:16px;flex:0 0 16px;
  background:
    linear-gradient(var(--ndj-gold),var(--ndj-gold)) center/16px 1.5px no-repeat,
    linear-gradient(var(--ndj-gold),var(--ndj-gold)) center/1.5px 16px no-repeat;
  transition:transform 320ms var(--ndj-ease)}
.ndj-lista details[open] summary::after{transform:rotate(135deg)}

.ndj-lista details p{margin:0;padding:0 0 30px;max-width:66ch;font-size:16px;
  line-height:1.75;color:var(--ndj-gray)}

@media(prefers-reduced-motion:reduce){
  .ndj-lista summary::after{transition-duration:1ms}
}


/* 15. SAMTALET, DEN DIGITALA JOHNNY
   ---------------------------------------------------------------------------
   Hela samtalet utspelar sig har, overst i hero. Inte steg 1 av det, och inga
   lankar till andra sidor: sa fort den byter sida ar det inte ett samtal.

   Formen ar lanad fran bilindustrins segmentrader, och skalet ar inte mode
   utan att den ar EN RAD. Lyxspraket ar vagratt och aterhallsamt, och en rad
   som svavar kapar inte bilden under sig.

   ⚠️ Detta ar inte flikar. Baymards fynd galler innehall som GOMS bakom en
   flikrad. Har goms ingenting: en fraga i taget, och alla svaren pa den fragan
   syns samtidigt.

   EN RADIE FOR TVA FORMER. `border-radius:36px` ar halva hojden nar raden bara
   har en fraga och en knapprad, alltsa en piller-form, och laser som en mjuk
   rektangel nar den vaxt till framstegsmatare, chips, replik och tygkort. Vi
   slipper darfor byta radie mellan lagen, och slipper den lilla ryckning i
   hornen som ett sadant byte ger mitt i en overgang.                          */

.ndj-rad{position:relative;z-index:2;width:min(100% - 40px,1060px);
  margin:0 auto;padding:12px 14px;
  background:rgba(16,16,18,.82);
  border:1px solid rgba(255,255,255,.16);
  border-radius:36px;
  box-shadow:0 18px 50px rgba(0,0,0,.34);
  text-align:left;
  transition:border-color 420ms var(--ndj-ease)}

/* backdrop-filter kostar ett eget kompositeringslager per frame. Har ar det
   vart det: raden ligger over en fotografisk bild och utan oskarpa blir texten
   olaslig pa ljusa partier. Vi begransar den till EN yta pa hela sajten.

   .66 mattes fram till gratt over en ljus bildyta, inte till morkt glas.
   Oskarpan drar dessutom upp ljuset under raden. .78 haller den mork nog att
   guldet och den vita texten far vara det ljusaste i raden. */
@supports (backdrop-filter: blur(10px)){
  .ndj-rad{background:rgba(14,14,16,.78);backdrop-filter:blur(18px) saturate(130%)}
}

.ndj-rad__scen{display:flex;flex-direction:column;gap:10px;
  opacity:1;transform:none;
  transition:opacity 180ms var(--ndj-ease),transform 180ms var(--ndj-ease)}

/* Scenbytet. Den gamla fragan gar UPP och ut, den nya kommer NEDIFRAN in, sa
   att rorelsen laser som att bladdra framat och inte som att nagot blinkade. */
.ndj-rad__scen.ar-ute{opacity:0;transform:translateY(-6px)}
.ndj-rad__scen.ar-in{opacity:0;transform:translateY(7px)}
.ndj-rad__fraga:focus{outline:none}

/* ------------------------------------------------------------ framstegen */
/* En prick per steg i den vag besokaren har valt. Vagens langd kommer ur
   flodet, sa en vag som far en fraga till behover inget gjort har.          */

.ndj-rad__matare{display:flex;align-items:center;gap:5px;padding:2px 6px 0}
.ndj-rad__matare i{width:22px;height:2px;border-radius:2px;
  background:rgba(255,255,255,.18);
  transition:background 420ms var(--ndj-ease),width 420ms var(--ndj-ease)}
.ndj-rad__matare i.ar-klar{background:rgba(255,255,255,.44)}
.ndj-rad__matare i.ar-har{background:var(--ndj-gold);width:34px}

/* ---------------------------------------------------------------- minnet */
/* Besokarens egna svar, smatt. De ar KNAPPAR och backar till just den fragan,
   for annars ar enda vagen tillbaka ett steg i taget.                       */

.ndj-rad__minne{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 6px}

.ndj-chip,
.entry-content .ndj-chip,
.ast-single-post .entry-content .ndj-chip{
  border:1px solid rgba(255,255,255,.2);background:transparent;
  border-radius:999px;padding:3px 11px;
  font-family:var(--ndj-font-body);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.62);
  text-decoration:none;cursor:pointer;
  transition:color 320ms var(--ndj-ease),border-color 320ms var(--ndj-ease)}
.ndj-chip:hover,.ndj-chip:focus-visible{color:var(--ndj-white);
  border-color:rgba(255,255,255,.5)}

/* --------------------------------------------------------- replik + fråga */

/* Johnnys svar pa det som just sades. Guld, eftersom det ar den enda texten i
   raden som ar HANS och inte granssnittets. */
.ndj-rad__replik{margin:0;padding:0 6px;
  font-family:var(--ndj-font-body);font-size:13.5px;line-height:1.5;
  color:var(--ndj-gold)}

.ndj-rad__fraga{margin:0;padding:0 6px;font-family:var(--ndj-font-body);
  font-size:16px;letter-spacing:.01em;line-height:1.4;color:var(--ndj-white)}

/* ------------------------------------------------------------ alternativen */

.ndj-rad__val{display:flex;align-items:center;flex-wrap:wrap;gap:4px}

/* SPECIFICITET, och har gick jag fel TVA ganger innan jag matte.
   Det fanns namligen tva olika streck under alternativen, inte ett:

     1. `.entry-content a`  (0,2,0)  border-bottom:1px solid guld
        Den bojda guldbagen, eftersom segmenten har border-radius 999px.

     2. `.ast-single-post .entry-content a`  (0,2,1)  text-decoration:underline
        ASTRAS EGEN regel. Den ar (0,2,1) och slar (0,2,0) pa elementdelen.
        Jag pastod att understrykningen var borta tva ganger eftersom jag laste
        min egen regel i filen i stallet for vad webblasaren valde.
        `node _scripts/matt-rad.js` skriver ut bada, med kallfil och radnummer.

   Segmenten ar <button> nu och inte <a>, sa bagge traffar i teorin inte langre.
   Regeln star kvar anda: serverns steg 1 och en framtida lank i raden ska inte
   kunna ateruppliva felet, och kostnaden ar tre valjare. */
.ndj-rad__seg,
.entry-content .ndj-rad__seg,
.ast-single-post .entry-content .ndj-rad__seg{
  flex:0 0 auto;appearance:none;background:transparent;border:0;
  padding:11px 18px;border-radius:999px;cursor:pointer;
  font-family:var(--ndj-font-body);font-size:15px;line-height:1.2;
  color:rgba(255,255,255,.88);text-decoration:none;text-align:left;
  transition:background 320ms var(--ndj-ease),color 320ms var(--ndj-ease)}

.ndj-rad__seg:hover,.ndj-rad__seg:focus-visible,
.entry-content .ndj-rad__seg:hover,
.entry-content .ndj-rad__seg:focus-visible,
.ast-single-post .entry-content .ndj-rad__seg:hover,
.ast-single-post .entry-content .ndj-rad__seg:focus-visible{
  background:rgba(255,255,255,.16);color:var(--ndj-white);text-decoration:none}

.ndj-rad__seg.ar-vald{background:var(--ndj-gold);color:var(--ndj-dark)}

/* Alternativ med bild, riktningskorten, ligger i 15b under fokusringen. De
   maste sta EFTER sparets och svepets regler for att vinna utan !important. */

/* ----------------------------------------------------------- tygpanelen */
/* Korten far ta plats. Det ar har besokaren VALJER nagot i stallet for att
   svara pa en fraga, och det ar den skillnaden som ska synas.              */

/* Kolumnerna har ett TAK. Med `1fr` strackte tva traffar ut sig over hela
   raden och tygproverna blev 480px hoga (matt 2026-09-25). Farre traffar ska
   ge farre kort, inte storre kort. */
.ndj-rad__tyger{display:grid;gap:10px;padding:2px 2px 0;
  grid-template-columns:repeat(auto-fit,minmax(200px,244px));justify-content:center}

.ndj-tyg{display:flex;flex-direction:column;gap:8px;
  padding:10px 10px 12px;border-radius:18px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.1)}

/* Provet ar huvudbilden, inte en ikon. Det ar tyget som ska salja kortet,
   och det ar precis det researchen sager biter mot Patong-skepsisen:
   specificitet, inte adjektiv. Kvadratisk, sa raden inte hoppar i hojd nar
   traffarna vaxlar mellan liggande och stiende motiv. */
.ndj-tyg__bildknapp{appearance:none;border:0;padding:0;margin:0;cursor:zoom-in;
  display:block;width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;
  background:rgba(255,255,255,.04)}
.ndj-tyg__bild{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform 420ms var(--ndj-ease)}
.ndj-tyg__bildknapp:hover .ndj-tyg__bild,
.ndj-tyg__bildknapp:focus-visible .ndj-tyg__bild{transform:scale(1.05)}
.ndj-tyg__bildknapp:focus-visible{outline:2px solid var(--ndj-gold);outline-offset:2px}

.ndj-tyg__namn{margin:2px 2px 0;font-family:var(--ndj-font-rubrik);
  font-size:17px;font-weight:400;letter-spacing:0;color:var(--ndj-white)}

/* Fakta fore beskrivning, med flit. Researchen ar entydig: kopare i Patong
   misstanker att de blir lurade, och det enda som biter mot det ar att kunna
   namnge material, vikt och vav. Specificiteten imponerar, inte adjektiven. */
.ndj-tyg__fakta{margin:0;padding:0 2px;font-family:var(--ndj-font-body);font-size:12px;
  letter-spacing:.04em;color:rgba(255,255,255,.58)}

.ndj-tyg__knappar{display:flex;align-items:center;gap:6px;margin-top:auto;padding:4px 2px 0}

.ndj-tyg__valj{appearance:none;border:0;cursor:pointer;
  background:var(--ndj-gold);color:var(--ndj-dark);
  padding:9px 16px;border-radius:999px;
  font-family:var(--ndj-font-body);font-size:13px;letter-spacing:.06em;
  transition:filter 320ms var(--ndj-ease)}
.ndj-tyg__valj:hover,.ndj-tyg__valj:focus-visible{filter:brightness(1.1)}

.ndj-tyg__mer{appearance:none;border:0;background:transparent;cursor:pointer;
  padding:9px 6px;font-family:var(--ndj-font-body);font-size:12px;
  letter-spacing:.06em;color:rgba(255,255,255,.55);
  transition:color 320ms var(--ndj-ease)}
.ndj-tyg__mer:hover,.ndj-tyg__mer:focus-visible{color:var(--ndj-white)}

.ndj-rad__tom{margin:0;padding:6px;font-family:var(--ndj-font-body);
  font-size:14px;color:rgba(255,255,255,.7)}

/* "I have more like these". Tyst, i Johnnys rost, over hela rutnatets bredd.
   Den ska lasa som en mening han sager, inte som en paginering. */
.ndj-rad__fler,
.ast-single-post .entry-content .ndj-rad__fler{
  grid-column:1/-1;justify-self:center;margin-top:4px;
  appearance:none;background:transparent;cursor:pointer;
  border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:9px 20px;
  font-family:var(--ndj-font-body);font-size:13.5px;letter-spacing:.02em;
  color:var(--ndj-gold);text-decoration:none;
  transition:border-color 320ms var(--ndj-ease),color 320ms var(--ndj-ease)}
.ndj-rad__fler:hover,.ndj-rad__fler:focus-visible{
  border-color:var(--ndj-gold);color:var(--ndj-white)}
.ndj-rad__fler:focus-visible{outline:none;
  box-shadow:0 0 0 2px rgba(12,12,14,1),0 0 0 3px rgba(255,255,255,.62)}

/* --------------------------------------------------------- forstoringen */
/* Delad dialog for alla tygkort, se oppnaForstoring() i samtal.js. Ligger
   utanfor .ndj-rad i document.body, sa ett scenbyte i samtalet inte river
   ner den om nagon hann oppna en. */

.ndj-forstoring{position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(8,8,9,.78);opacity:0;
  transition:opacity 240ms var(--ndj-ease)}
.ndj-forstoring.ar-oppen{opacity:1}
/* `display:flex` ovan slar ut webblasarens egen [hidden]{display:none}. Utan
   raden nedan lag den stangda dialogen kvar OSYNLIG over hela sidan pa z-index
   300 och at varje klick, sa att inget tyg gick att oppna igen (Thomas,
   2026-09-25). */
.ndj-forstoring[hidden]{display:none}

.ndj-forstoring__ruta{position:relative;width:min(880px,100%);max-height:92vh;
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--ndj-dark);border:1px solid rgba(255,255,255,.12);
  border-radius:20px;padding:20px;
  display:grid;gap:18px;grid-template-columns:minmax(0,1fr) minmax(220px,280px);
  transform:translateY(10px) scale(.98);
  transition:transform 280ms var(--ndj-ease)}
.ndj-forstoring.ar-oppen .ndj-forstoring__ruta{transform:none}
.ndj-forstoring__ruta:focus{outline:none}

.ndj-forstoring__stang{position:absolute;top:10px;right:10px;z-index:1;
  appearance:none;border:0;cursor:pointer;width:36px;height:36px;
  border-radius:999px;background:rgba(255,255,255,.1);color:var(--ndj-white);
  font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background 320ms var(--ndj-ease)}
.ndj-forstoring__stang:hover,.ndj-forstoring__stang:focus-visible{
  background:var(--ndj-gold);color:var(--ndj-dark)}

.ndj-forstoring__bilder{display:flex;flex-direction:column;gap:10px}

/* Vaxlaren. En bild i sanders, inte tva staplade: tva stora kvadrater rymdes
   inte i 1440x900 utan scroll, och det ar dessutom battre att granska en bild
   i taget an att bladdra forbi en for att komma till den andra. */
.ndj-forstoring__vaxlare{display:flex;gap:6px}
.ndj-forstoring__flik{appearance:none;cursor:pointer;
  background:transparent;color:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.18);border-radius:999px;
  padding:7px 14px;font-family:var(--ndj-font-body);font-size:12px;
  letter-spacing:.05em;
  transition:background 320ms var(--ndj-ease),color 320ms var(--ndj-ease),border-color 320ms var(--ndj-ease)}
.ndj-forstoring__flik:hover,.ndj-forstoring__flik:focus-visible{
  color:var(--ndj-white);border-color:rgba(255,255,255,.4)}
.ndj-forstoring__flik.ar-aktiv{background:var(--ndj-gold);color:var(--ndj-dark);
  border-color:var(--ndj-gold)}
.ndj-forstoring__flik[hidden]{display:none}

/* Den gemensamma ytan. Zoomyta och jackayta ligger i samma ruta och byts med
   ar-dold, sa storleken star still nar nagon vaxlar mellan dem. */
.ndj-forstoring__yta{position:relative;width:100%;aspect-ratio:1;
  border-radius:14px;overflow:hidden;background:rgba(255,255,255,.04)}

/* Zoomytan. Peka eller dra for att se vaven pa nara hall, se kopplaZoom() i
   samtal.js. Sjalva zoomningen ar en transform-origin som foljer pekaren,
   inget bibliotek. */
.ndj-forstoring__zoomyta{position:absolute;inset:0;touch-action:none;cursor:zoom-in}
.ndj-forstoring__zoomyta.ar-dold{display:none}
.ndj-forstoring__bild{display:block;width:100%;height:100%;object-fit:cover;
  transform:scale(1);transition:transform 220ms var(--ndj-ease)}
.ndj-forstoring__zoomyta.ar-zoomad .ndj-forstoring__bild{transform:scale(2.2)}
.ndj-forstoring__zoomyta.ar-zoomad{cursor:zoom-out}

.ndj-forstoring__jackayta{position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;padding:16px}
.ndj-forstoring__jackayta.ar-dold{display:none}
.ndj-forstoring__jacka{display:block;max-width:100%;max-height:100%;object-fit:contain}

.ndj-forstoring__info{display:flex;flex-direction:column;gap:8px;min-width:0}
.ndj-forstoring__namn{margin:26px 0 0;font-family:var(--ndj-font-rubrik);
  font-size:22px;font-weight:400;color:var(--ndj-white)}
.ndj-forstoring__fakta{margin:0;font-family:var(--ndj-font-body);font-size:13px;
  letter-spacing:.04em;color:rgba(255,255,255,.6)}
.ndj-forstoring__rad{margin:2px 0 0;font-family:var(--ndj-font-body);
  font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.85)}
.ndj-forstoring__valj{align-self:flex-start;margin-top:10px}

@media(max-width:760px){
  .ndj-forstoring{padding:0}
  .ndj-forstoring__ruta{width:100%;height:100%;max-height:none;
    border-radius:0;grid-template-columns:1fr;padding:16px}
  .ndj-forstoring__namn{margin-top:30px}
}

@media(prefers-reduced-motion:reduce){
  .ndj-forstoring,.ndj-forstoring__ruta,.ndj-forstoring__bild,.ndj-tyg__bild{
    transition-duration:1ms !important}
}

/* ------------------------------------------------------------- sparandet */
/* Tre falt, och inget av dem ar e-post. Se docs/IDE-VISIT-PLANNER.md: utan
   kanal finns ingen misstanke om spam, och da kan fragan vara gastfrihet.   */

.ndj-rad__spara{display:flex;flex-direction:column;gap:8px;padding:0 6px}

.ndj-rad__spara-text,.ndj-rad__spara-dryck{margin:0;
  font-family:var(--ndj-font-body);font-size:13px;color:rgba(255,255,255,.62)}
.ndj-rad__spara-dryck{margin-top:4px;color:var(--ndj-gold)}

.ndj-falt{display:flex;flex-direction:column;gap:4px}
.ndj-falt span{font-family:var(--ndj-font-body);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ndj-falt input{appearance:none;width:100%;
  background:rgba(255,255,255,.07);color:var(--ndj-white);
  border:1px solid rgba(255,255,255,.16);border-radius:12px;
  padding:10px 14px;font-family:var(--ndj-font-body);font-size:15px;
  transition:border-color 320ms var(--ndj-ease)}
.ndj-falt input:focus{outline:none;border-color:var(--ndj-gold)}

.ndj-rad__skicka{align-self:flex-start;margin-top:4px;padding:11px 22px;font-size:14px}
.ndj-rad__skicka[disabled]{opacity:.6;cursor:default}

/* ------------------------------------------------------------------ foten */

.ndj-rad__fot{display:flex;align-items:center;gap:14px;padding:2px 6px 0}

.ndj-rad__tillbaka,.ndj-rad__hoppa,
.ast-single-post .entry-content .ndj-rad__tillbaka,
.ast-single-post .entry-content .ndj-rad__hoppa{
  appearance:none;border:0;background:transparent;cursor:pointer;padding:4px 0;
  font-family:var(--ndj-font-body);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.45);text-decoration:none;
  transition:color 320ms var(--ndj-ease)}
.ndj-rad__tillbaka:hover,.ndj-rad__hoppa:hover,
.ndj-rad__tillbaka:focus-visible,.ndj-rad__hoppa:focus-visible{
  color:rgba(255,255,255,.9)}
.ndj-rad__hoppa{margin-left:auto}

.ndj-rad__utan-js{margin:8px 6px 2px;font-family:var(--ndj-font-body);font-size:14px}

/* PLACERING. Raden ligger OVERST i hero-blocket, ovanfor etiketten.

   Den har flyttats tva ganger, och bada gangerna var felet detsamma: jag
   tankte pa den som en list vid bildens underkant. Forst hangde den utanfor
   (bottom:-34px, matt till 37px nedanfor hero), sedan innanfor (bottom:44px).
   Langst ned laser raden som sidans avslut. Overst laser den som dess oppning,
   och det ar vad den ar.

   Den ar darfor i FLODET nu, inte absolutpositionerad. Hero ar ett rutnat med
   `place-items:end center`; ett absolut barn stod utanfor kompositionen och
   krokade fast i pixelvarden som bara stamde vid en viss hojd. */
.ndj-hero__rad{position:relative;z-index:3;
  margin:0 0 clamp(30px,4.5vh,50px)}

/* Raden behover mer bredd an textkolumnen. 840px tvingade steg 1:s sex segment
   i vagratt scroll direkt vid forsta anblicken, och en rad man maste dra i har
   inte sagt vad den innehaller.

   ⚠️ `width:100%` ar inte overflodig. Hero ar ett rutnat med
   `place-items:end center`, och `center` blir `justify-self:center`, vilket gor
   barnet KRYMPT TILL INNEHALLET. Utan `width:100%` blev blocket 937px trots
   `max-width:1140px`, och raden inuti, vars bredd ar procentbaserad, rakhades
   ut for smal sa att sista segmentet klipptes. Matt, inte antaget. */
.ndj-hero--medrad{padding-bottom:0}
.ndj-hero--medrad .ndj-hero__in{max-width:1140px;width:100%}

/* Rubriken och kallraden har `margin-inline:auto` sedan tidigare, etiketten
   hade det inte. Den ar ett krympt block och lag darfor kvar i vansterkant
   medan allt annat centrerades. Det syntes knappt i en 840px-kolumn och blev
   uppenbart i en 1140px-kolumn: felet fanns hela tiden, bredden avslojade det. */
.ndj-hero .ndj-eyebrow{margin-inline:auto}

@media(max-width:860px){
  .ndj-rad{border-radius:24px;padding:14px}
  .ndj-rad__val{gap:4px}
  .ndj-rad__seg{padding:11px 15px;font-size:14.5px}
  .ndj-rad__tyger{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Tva kort i bredd lamnar ca 130px per kort. Knapparna staplas darfor, annars
     bryts "About this cloth" pa tre rader bredvid Choose. */
  .ndj-tyg__knappar{flex-direction:column;align-items:stretch;gap:2px}
  .ndj-tyg__valj{text-align:center}
  .ndj-tyg__namn{font-size:16px}
  .ndj-rad__matare i{width:16px}
  .ndj-rad__matare i.ar-har{width:26px}
  .ndj-hero__rad{margin-bottom:26px}
}

/* Rorelsen ar liten men den upprepas vid varje svar, och det ar upprepningen
   som gor folk illamaende, inte amplituden. */
@media(prefers-reduced-motion:reduce){
  .ndj-rad__scen,.ndj-rad__matare i{transition-duration:1ms !important}
  .ndj-rad__scen.ar-ute,.ndj-rad__scen.ar-in{transform:none}
}

/* Honungsfallan. Utanfor bild i stallet for display:none, eftersom en del
   robotar hoppar over dolda falt men fyller i det de kan na. */
.ndj-falla{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* 15b. SKALET, hamtat fran ankarpanelen pa Bylundsbil
   ---------------------------------------------------------------------------
   Formsprak och effekter lanade fran ett bygge som redan ar genomfort och
   uppmatt i webblasare, inte uppskattat. Vi tar SKALET, alltsa spar, kanttoning,
   kantljus, silversvep och fokusring. Ankarlogiken och Avada-lagningarna hor
   inte hemma har och foljer inte med.

   Tre fallgropar foljer med fran deras anteckningar, och alla tre ar sadana som
   kostar en timme var att hitta sjalv:

   1. SVEPETS RIKTNING. Basfargen ska vara den man vill se i VILA, glimten
      ljusare. Med ljus bas och dampad strimma blir det ett morkt svep som laser
      som en skugga. Darfor rgba(255,255,255,.88) i bada andar, alltsa segmentets
      vanliga farg, och ren vit i mitten.

   2. background-size:300% ger ett fonster pa en tredjedel, sa strimman ligger
      helt utanfor bilden bade vid 0 och vid 100 procent. Fargen ar darfor jamn,
      det ar bara ljuset som ror sig.

   3. animationend BUBBLAR. En lyssnare med {once:true} pa raden slacks av
      forsta basta frammande animation som tar slut. Motorn kontrollerar
      animationName och avregistrerar sjalv, se samtal.js.                     */

/* Glasets ovankant. En harfin ljus linje innanfor ramen, som pa riktigt glas. */
.ndj-rad{box-shadow:0 18px 50px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.07)}

/* ------------------------------------------------------------- kantljuset */
/* Ett ljus som vandrar at hoger langs radens kant nar en ny fraga kommer. Det
   sager "det har fortsatter" utan att nagot blinkar eller pilar pekar.

   Ringen ar radens 1px-ram: en gradient over hela rutan, maskad sa att bara
   kanten blir kvar (content-box XOR border-box). Utan masken skulle ljuset
   ligga over hela raden i stallet for langs den. */
.ndj-rad::after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;padding:1px;opacity:0;
  background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 38%,
    rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 62%,rgba(255,255,255,0) 100%);
  background-size:300% 100%;background-position:100% 0;background-repeat:no-repeat;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude}

.ndj-rad.ar-kantljus::after{animation:ndjKantljus 1.5s cubic-bezier(.65,0,.35,1) both}

@keyframes ndjKantljus{
  0%{opacity:0;background-position:100% 0}
  14%{opacity:1}
  86%{opacity:1}
  100%{opacity:0;background-position:0 0}
}

/* -------------------------------------------------------- silversvepet */
/* Segmentets text far samma glimt vid hovring. Fargen byts inte, ljuset
   vandrar over den. Bara framat: nar pekaren lamnar nollstalls positionen
   utan overgang, och da ligger strimman redan utanfor texten. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .ndj-rad__seg span{
    background-image:linear-gradient(105deg,
      rgba(255,255,255,.88) 0%,rgba(255,255,255,.88) 34%,
      #fff 46%,#fff 54%,
      rgba(255,255,255,.88) 66%,rgba(255,255,255,.88) 100%);
    background-size:250% 100%;background-position:100% 0;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    transition:background-position 0s}

  @media (hover:hover) and (pointer:fine){
    .ndj-rad__seg:hover span,.ndj-rad__seg:focus-visible span{
      background-position:0 0;
      transition:background-position 1.3s cubic-bezier(.65,0,.35,1)}
  }

  /* Det valda segmentet har mork text pa guld. Ett vitt svep dar vore osynligt
     i ena andan och olasligt i den andra. */
  .ndj-rad__seg.ar-vald span{background-image:none;
    -webkit-text-fill-color:var(--ndj-dark);color:var(--ndj-dark)}
}

/* ------------------------------------------------------- sparet och kanten */
/* Alternativen ligger i ett EGET spar som rullar, inte i raden sjalv. Da star
   radens bakgrund, skugga och rundning stilla medan innehallet glider, och
   kanttoningen kan laggas pa innehallet utan att tona bort raden.

   De tre pixlarnas padding, som marginalen tar tillbaka, finns for att
   rullytan annars klipper fokusringen runt det yttersta segmentet. */
.ndj-rad__val{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  padding:3px;margin:-3px;min-width:0}
.ndj-rad__val::-webkit-scrollbar{display:none}

/* Kanten tonar ut at det hall det finns mer att svepa till, aldrig i anden.
   Langderna satts av motorn ur verklig scrollWidth. */
@property --ndj-tonv{syntax:'<length>';inherits:false;initial-value:0px}
@property --ndj-tonh{syntax:'<length>';inherits:false;initial-value:0px}

.ndj-rad__val.ar-rullbar{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--ndj-tonv,0px),
    #000 calc(100% - var(--ndj-tonh,0px)),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 var(--ndj-tonv,0px),
    #000 calc(100% - var(--ndj-tonh,0px)),transparent 100%)}

@media (prefers-reduced-motion:no-preference){
  .ndj-rad__val.ar-rullbar{transition:--ndj-tonv .35s ease,--ndj-tonh .35s ease}
}

/* ------------------------------------------------------------ fokusringen */
/* Mork ring med en harfin ljus kant utanfor. En helt mork ring mot den morka
   raden nar inte 3:1, harkanten bar kontrasten utan att synas som en vit ram. */
.ndj-rad__seg:focus-visible,.ndj-chip:focus-visible,
.ndj-tyg__valj:focus-visible,.ndj-tyg__mer:focus-visible,
.ndj-rad__tillbaka:focus-visible,.ndj-rad__hoppa:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(12,12,14,1),0 0 0 3px rgba(255,255,255,.62)}

/* ------------------------------------------------------- riktningskorten */
/* Tre kavajer i ett rutnat, inte i det rullande sparet: de ska jamforas sida
   vid sida, och tre kort far alltid plats.

   Kortet ar en rundad rektangel med egen kant. Segmentets pill-form (999px)
   gav en stor gra oval runt ett hogt kort, darfor satts radien har om, med
   hogre specificitet an de tre segmentreglerna i 15b.

   Kavajen star pa ett svagt ljus i kortets ovre halft. Utan det forsvinner
   ett morkt tyg mot den morka raden. */
.ndj-rad .ndj-rad__scen .ndj-rad__val.ndj-rad__val--figur{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;overflow:visible;width:100%;max-width:520px;margin:4px auto 0;padding:0;flex:0 1 auto}

.ndj-rad .ndj-rad__val--figur .ndj-rad__seg.ndj-rad__seg--figur{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:16px 10px 14px;border-radius:16px;text-align:center;
  background:radial-gradient(ellipse 70% 55% at 50% 38%,rgba(255,255,255,.1),transparent 72%),
    rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.09);
  transition:border-color 320ms var(--ndj-ease),background-color 320ms var(--ndj-ease)}

.ndj-rad .ndj-rad__val--figur .ndj-rad__seg.ndj-rad__seg--figur:hover,
.ndj-rad .ndj-rad__val--figur .ndj-rad__seg.ndj-rad__seg--figur:focus-visible{
  background-color:rgba(255,255,255,.06);border-color:rgba(206,193,138,.55)}

.ndj-rad .ndj-rad__val--figur .ndj-rad__seg.ndj-rad__seg--figur.ar-vald{
  background-color:rgba(206,193,138,.1);border-color:var(--ndj-gold)}

.ndj-rad__bild{display:block;width:100%;max-width:132px;height:auto;filter:brightness(1.12);
  transition:transform 420ms var(--ndj-ease)}
.ndj-rad__seg--figur:hover .ndj-rad__bild{transform:translateY(-3px)}

.ndj-rad .ndj-rad__val--figur .ndj-rad__seg--figur span{
  font-size:15px;letter-spacing:.04em;line-height:1.2}
.ndj-rad .ndj-rad__val--figur .ndj-rad__seg--figur.ar-vald span{
  -webkit-text-fill-color:var(--ndj-gold);color:var(--ndj-gold)}

@media(max-width:860px){
  .ndj-rad .ndj-rad__scen .ndj-rad__val.ndj-rad__val--figur{gap:8px}
  .ndj-rad .ndj-rad__val--figur .ndj-rad__seg.ndj-rad__seg--figur{
    padding:12px 6px 11px;border-radius:14px;gap:8px}
  .ndj-rad__bild{max-width:92px}
  .ndj-rad .ndj-rad__val--figur .ndj-rad__seg--figur span{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .ndj-rad__bild{transition:none}
  .ndj-rad__seg--figur:hover .ndj-rad__bild{transform:none}
}

@media (prefers-reduced-motion:reduce){
  .ndj-rad::after{display:none}
  .ndj-rad__seg span{transition:none}
}

@media (forced-colors:active){
  .ndj-rad__seg span{background-image:none;
    -webkit-text-fill-color:CanvasText;color:CanvasText}
  .ndj-rad::after{display:none}
}

/* 15c. TVA LAGEN, EN RAD
   ---------------------------------------------------------------------------
   Steg 1 har varken framstegsmatare, chips eller replik. Da ska fragan och
   alternativen ligga pa SAMMA rad, sa att raden ar ett piller: en rad som
   staller en fraga i forbifarten.

   Fran steg 2 finns det mer att visa an som ryms vagratt, och da staplar den.
   Skillnaden markeras av matarens narvaro, inte av ett stegnummer, sa att en
   nod som slar av mataren (U2) ocksa far pillerformen. Det ar ratt: aven den
   fragan ar ett steg utan bagage.

   `:has()` galler fran Chrome 105, Safari 15.4 och Firefox 121. En webblasare
   utan stod far den staplade formen, vilket ar fullt laslig och inte ett fel. */
/* CENTRERAD, och etiketten utan marginal. Mattes 2026-09-25 med
   `node _scripts/matt-etikett.js`: Astras `.entry-content p` (0,1,1) gav fragan
   21.6px margin-bottom, vilket lyfte den 11px over knapparnas mittlinje. Och
   `flex:1` pa sparet lamnade 198px tomt till hoger mot 15px till vanster.
   Raden centrerar nu sitt innehall; sparet krymper och rullar fortfarande. */
.ndj-rad__scen:not(:has(.ndj-rad__matare)){flex-direction:row;align-items:center;
  justify-content:center;gap:8px}
.ndj-rad__scen:not(:has(.ndj-rad__matare)) .ndj-rad__fraga{flex:0 0 auto;margin:0;
  padding-left:12px;font-size:13.5px;letter-spacing:.07em;
  color:rgba(255,255,255,.82);white-space:nowrap}
.ndj-rad__scen:not(:has(.ndj-rad__matare)) .ndj-rad__val{flex:0 1 auto}
.ndj-rad__scen:not(:has(.ndj-rad__matare)) .ndj-rad__fot{flex:0 0 auto;padding:0 6px 0 0}

@media(max-width:860px){
  .ndj-rad__scen:not(:has(.ndj-rad__matare)){flex-direction:column;align-items:stretch;gap:8px}
  .ndj-rad__scen:not(:has(.ndj-rad__matare)) .ndj-rad__fraga{white-space:normal;padding-left:6px}
}

/* 15d. DET EXPANDERADE LAGET AR CENTRERAT
   ---------------------------------------------------------------------------
   Raden ar 1040px bred eftersom steg 1 behover det: sex plagg plus fragan.
   Fran steg 2 ar innehallet kortare, och vansterhangt blev hogra halvan en
   tom yta som laste som att nagot saknades.

   Vi andrar inte BREDDEN, for en rad som krymper och vaxer mellan varje fraga
   drar blicken till rorelsen i stallet for till texten, och den ligger overst
   i hero dar allt under den da skulle skuttra med. Vi centrerar innehallet
   i stallet. Da laser ytan som luft, vilket den ar, och kompositionen hamnar
   i samma mittlinje som rubriken under.

   Textblocken far en maxbredd i TECKEN och inte i pixlar. En replik pa 62ch
   ar lika lasbar oavsett radens bredd, en pa 620px ar det bara vid en zoom. */
.ndj-rad__scen:has(.ndj-rad__matare){align-items:center;text-align:center}
.ndj-rad__scen:has(.ndj-rad__matare) .ndj-rad__replik,
.ndj-rad__scen:has(.ndj-rad__matare) .ndj-rad__fraga{max-width:62ch}
.ndj-rad__scen:has(.ndj-rad__matare) .ndj-rad__val{justify-content:center;flex:0 0 auto;max-width:100%}
.ndj-rad__scen:has(.ndj-rad__matare) .ndj-rad__minne{justify-content:center}
.ndj-rad__scen:has(.ndj-rad__matare) .ndj-rad__fot{justify-content:center;gap:24px}
.ndj-rad__scen:has(.ndj-rad__matare) .ndj-rad__hoppa{margin-left:0}

/* Tygkorten ska daremot fylla bredden. Det ar sidans enda stalle dar besokaren
   jamfor saker med varandra, och en jamforelse vill ha plats. */
.ndj-rad__scen:has(.ndj-rad__matare) .ndj-rad__tyger{width:100%;text-align:left}
.ndj-rad__scen:has(.ndj-rad__matare) .ndj-rad__spara{width:min(100%,460px);text-align:left}


/* 16. PRISER OCH TIDSPLANERN
   ---------------------------------------------------------------------------
   Samma formsprak som konstruktionsnivaerna (9a): harfina linjer, inga lador,
   guldet bara som accent. Ett pris ska lasas som en uppgift i ett katalogblad,
   inte som ett erbjudande. Data fran inc/site/class-priser.php.              */

.ndj-priser__tabell{border-top:1px solid var(--ndj-border)}
.ndj-priser__rad{display:grid;grid-template-columns:minmax(180px,1.3fr) repeat(auto-fit,minmax(0,1fr));
  align-items:baseline;gap:0 24px;padding:26px 0;border-bottom:1px solid var(--ndj-border)}
.ndj-priser__rad > span:first-child{font-family:var(--ndj-font-heading);font-size:20px;color:var(--ndj-dark)}
.ndj-priser__rad > span{font-variant-numeric:tabular-nums;font-size:17px}
.ndj-priser__rad small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ndj-gray)}
.ndj-priser__rad--topp{padding:0 0 18px;align-items:end}
.ndj-priser__rad--topp strong{display:block;font-family:var(--ndj-font-body);font-size:12px;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ndj-gold)}
.ndj-priser__rad--topp small{display:block;margin-top:6px;text-transform:none;letter-spacing:0;font-size:13px}

.ndj-priser__enkla{list-style:none;margin:56px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 48px}
.ndj-priser__enkla li{display:flex;justify-content:space-between;gap:16px;
  padding:18px 0;border-bottom:1px solid var(--ndj-border);font-size:17px;font-variant-numeric:tabular-nums}
.ndj-priser__enkla small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ndj-gray)}
.ndj-priser__not{margin-top:40px;max-width:62ch;font-size:15px;color:var(--ndj-gray)}

/* Mobil: varje plagg blir ett eget block, nivan star bredvid priset. */
@media(max-width:860px){
  .ndj-priser__rad--topp{display:none}
  .ndj-priser__rad{grid-template-columns:1fr;gap:10px}
  .ndj-priser__rad > span:first-child{margin-bottom:6px}
  .ndj-priser__rad > span[data-niva]{display:flex;justify-content:space-between;align-items:baseline}
  .ndj-priser__rad > span[data-niva]::before{content:attr(data-niva);font-size:14px;color:var(--ndj-gray)}
}

.ndj-tid{max-width:760px;margin:0 auto}
.ndj-tid__form{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
.ndj-tid .ndj-falt{display:flex;flex-direction:column;gap:8px}
.ndj-tid .ndj-falt span{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ndj-gray)}
.ndj-tid .ndj-falt input{min-height:52px;padding:0 16px;border:1px solid var(--ndj-border);
  border-radius:0;background:var(--ndj-white);font:inherit;font-size:17px;color:var(--ndj-dark)}
.ndj-tid .ndj-falt input:focus{outline:none;border-color:var(--ndj-dark)}
.ndj-tid__kryss{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ndj-gray)}
.ndj-tid__kryss input{width:18px;height:18px;accent-color:var(--ndj-dark)}

.ndj-tid__svar:not(:empty){margin-top:48px}
.ndj-tid__kort{padding:44px 0 0;border-top:1px solid var(--ndj-dark)}
.ndj-tid__kort h3{font-size:clamp(26px,3vw,32px);margin:10px 0 14px}
.ndj-tid__niva{color:var(--ndj-gray);max-width:58ch}
.ndj-tid__schema{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid var(--ndj-border)}
.ndj-tid__schema li{display:grid;grid-template-columns:minmax(200px,260px) 1fr;gap:6px 24px;
  padding:18px 0;border-bottom:1px solid var(--ndj-border)}
.ndj-tid__dag{font-family:var(--ndj-font-heading);font-size:18px;color:var(--ndj-dark)}
.ndj-tid__marginal{color:var(--ndj-gray)}
.ndj-tid__marginal .ndj-tid__dag{color:var(--ndj-gray)}
.ndj-tid__not{margin-top:22px;padding-left:16px;border-left:2px solid var(--ndj-gold);max-width:58ch}
.ndj-tid__fel{color:var(--ndj-dark);font-weight:600}
.ndj-tid__utanjs{margin-top:24px}

@media(max-width:600px){
  .ndj-tid__form{grid-template-columns:1fr}
  .ndj-tid__schema li{grid-template-columns:1fr}
}

/* Temats `.entry-content ul, ol` har max-width 66ch och Astras egen vansterluft.
   Listorna har ar tabeller i forklaning och ska ga kant i kant. */
.entry-content .ndj-priser__enkla,
.entry-content .ndj-tid__schema{max-width:none;margin-left:0;padding-left:0}
.entry-content .ndj-tid__schema li{max-width:none}

/* Knappar i innehallet. `.entry-content a` ger alla lankar ett guldstreck och
   Astras `.ast-single-post .entry-content a` en understrykning. En knapp ar
   ingen textlank, sa bada tas bort, och linjeknappen far tillbaka sin ram. */
.entry-content a.ndj-btn,
.ast-single-post .entry-content a.ndj-btn{text-decoration:none;border-bottom:1px solid transparent;padding-bottom:14px}
.entry-content a.ndj-btn--line,
.ast-single-post .entry-content a.ndj-btn--line{border-bottom-color:var(--ndj-dark)}
.entry-content a.ndj-btn--gold:hover,.entry-content a.ndj-btn--gold:focus-visible{color:var(--ndj-gold)}

/* Etiketten ar ett krympt block (se .ndj-hero .ndj-eyebrow ovan). I varje
   centrerad topp maste den darfor centreras sjalv, annars hamnar den till
   vanster om rubriken den hor till. */
.ndj-sida__topp .ndj-eyebrow,
.ndj-sec__topp .ndj-eyebrow{margin-inline:auto}


/* 17. JOURNALEN, BLOGG OCH KATEGORIARKIV
   ---------------------------------------------------------------------------
   Astras standard var bla lankar, ljusbla bakgrund och vita lador med rundade
   horn. Det lasta som ett annat foretag. Samma formsprak som innersidorna nu:
   vit yta, harfina linjer, guldet som etikett, rubriken i serif.            */

.blog.ast-separate-container,
.archive.ast-separate-container,
.blog.ast-separate-container #content,
.archive.ast-separate-container #content{background:var(--ndj-white)}

.ast-separate-container .ast-archive-description{background:transparent;
  padding:120px 0 72px;margin:0 0 24px;text-align:center;border-bottom:1px solid var(--ndj-border)}
.ast-archive-description .ndj-eyebrow{margin:0 auto 18px}
.ast-archive-description .ast-archive-title{font-size:clamp(34px,4.4vw,52px);
  letter-spacing:-.018em;max-width:20ch;margin:0 auto;text-wrap:balance}
.ast-archive-description p:not(.ndj-eyebrow){max-width:58ch;margin:24px auto 0;
  font-size:18px;line-height:1.7;color:var(--ndj-gray)}

.blog .ast-article-post,
.archive .ast-article-post{background:transparent}
.ast-separate-container.blog .ast-article-inner,
.ast-separate-container.archive .ast-article-inner,
.ast-separate-container .ast-grid-common-col .ast-article-inner{background:transparent;
  box-shadow:none;border-radius:0;padding:0}
.blog .post-content,
.archive .post-content{padding:0 0 40px;border-bottom:1px solid var(--ndj-border)}
.blog .post-thumb-img-content img,
.archive .post-thumb-img-content img{border-radius:0;aspect-ratio:4/3;object-fit:cover;width:100%}
.blog .ast-blog-featured-section,
.archive .ast-blog-featured-section{margin-bottom:24px}

.blog .cat-links a,
.archive .cat-links a,
.blog .ast-taxonomy-container a,
.archive .ast-taxonomy-container a{font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ndj-gold);text-decoration:none}
.blog .entry-title,
.archive .entry-title{font-size:22px;line-height:1.3;margin:12px 0 10px}
.blog .entry-title a,
.archive .entry-title a{color:var(--ndj-dark);text-decoration:none}
.blog .entry-title a:hover,
.archive .entry-title a:hover{color:var(--ndj-gray)}
.blog .entry-meta,
.archive .entry-meta,
.blog .entry-meta a,
.archive .entry-meta a{font-size:13px;color:var(--ndj-gray);text-decoration:none}
.blog .ast-excerpt-container,
.archive .ast-excerpt-container,
.blog .entry-content p,
.archive .entry-content p{font-size:16px;line-height:1.7;color:var(--ndj-gray)}

.blog .ast-pagination a,
.archive .ast-pagination a,
.blog .ast-pagination .current,
.archive .ast-pagination .current{color:var(--ndj-dark);border-radius:0}
.ast-pagination .page-numbers.current{border-bottom:1px solid var(--ndj-gold)}

@media(max-width:782px){
  .ast-separate-container .ast-archive-description{padding:72px 0 48px}
}

/* Astra fargar meta med `.entry-meta *` och sin globala lankfarg, och satter
   egen storlek och justering pa arkivbeskrivningen i mobillaget. Darfor
   body-klassen forst, sa att vi vinner utan !important. */
body.ast-separate-container .entry-meta,
body.ast-separate-container .entry-meta *{color:var(--ndj-gray)}
body.ast-separate-container .ast-archive-description p.ndj-eyebrow{font-size:12px;
  letter-spacing:.24em;color:var(--ndj-gray);margin:0 auto 18px}
body.ast-separate-container .ast-archive-description,
body.ast-separate-container .ast-archive-description *{text-align:center}