:root{
  /* ---------- färg ---------- */
  --ground:#F4F0EC;          /* sidans botten */
  --surface:#FFFFFF;         /* kort och paneler */
  --surface-hover:#FFFDFC;   /* kortets hovertillstånd */
  --ink:#262525;             /* brödtext och rubriker */
  --muted:#6B6461;           /* stödtext, bildtexter */
  --rose:#DC9692;            /* accent, knappfyllning, LET-bokstäver */
  --rose-soft:#E6BDB6;       /* knapphover */
  --rose-deep:#A55752;       /* länkar, kursiv i rubriker, ramar */
  --rose-pale:#F6E6E2;       /* kategorimärkets botten */
  --glow:#F9D1C6;            /* reserverad, svaga washar */
  --gold:#D4AF7C;
  --gold-soft:#E6C894;   /* ljusare guld, hovertillstand */            /* sekundär knappram */
  --rule:#EBC3BA;            /* sektionslinjer */
  --line:#E4DAD5;            /* kortramar, tunna avdelare */

  /* semantiska farger, bara for verktyg som maste skilja utfall at.
     De ar medvetet skilda fran accentfargen och far aldrig anvandas
     som dekor. Alla tre klarar 4.5:1 mot vitt, mot krem och mot sin
     egen mjuka botten. */
  --pass:#507446;       --pass-soft:#EAEEE9;
  --warn:#7F6530;       --warn-soft:#EDE9E2;
  --fail:#B84738;       --fail-soft:#F8EDEB;

  /* ---------- typsnitt ---------- */
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;  /* prompter och kod pa resurssidorna */

  /* ---------- typskala, fasta ---------- */
  --fs-micro:10px;           /* kategorimärke på kort */
  --fs-eyebrow:11px;         /* sektionsetikett */
  --fs-xs:13px;              /* sidfot, finstilt */
  --fs-nav:13.5px;           /* navlänkar */
  --fs-sm:14px;              /* kortbrödtext, metodtext */
  --fs-sm-lead:14.5px;       /* raden under korten */
  --fs-btn:15px;             /* knappar */
  --fs-body:16px;            /* brödtext */
  --fs-body-lg:16.5px;       /* sektionsingress */
  --fs-lead:17px;            /* inledande rad i Who I am */
  --fs-h3:18px;              /* metodord */
  --fs-card-title:19px;      /* kortrubrik */
  --fs-wordmark:21px;        /* logotypen i navigeringen */
  --fs-letter-sm:34px;       /* LET-bokstav, mobil */
  --fs-letter-md:38px;       /* LET-bokstav, tablet */
  --fs-letter:40px;          /* LET-bokstav, desktop */
  --fs-h1-fixed:46px;        /* rubrik, låst på tablet */

  /* ---------- typskala, flytande ---------- */
  --fs-sub:clamp(16px,1.5vw,19px);        /* underrubrik i hero */
  --fs-tagline:clamp(23px,3.1vw,36px);    /* Create. Automate. Grow. */
  --fs-h2:clamp(26px,3.4vw,38px);         /* sektionsrubriker */
  --fs-h1:clamp(27px,3.6vw,46px);         /* hero-rubrik */
  --fs-h1-lg:clamp(38px,8.5vw,58px);      /* rubrik pa resurssidorna */
  --fs-h2-name:clamp(30px,3.9vw,44px);    /* Christina Stamberg */

  /* ---------- avstånd, fasta ---------- */
  --sp-4:4px;    --sp-6:6px;    --sp-7:7px;    --sp-9:9px;
  --sp-10:10px;  --sp-11:11px;  --sp-14:14px;  --sp-15:15px;
  --sp-16:16px;  --sp-18:18px;  --sp-20:20px;  --sp-22:22px;
  --sp-24:24px;  --sp-26:26px;  --sp-28:28px;  --sp-30:30px;
  --sp-32:32px;  --sp-34:34px;  --sp-44:44px;  --sp-46:46px;

  /* ---------- avstånd, flytande ---------- */
  --sp-pad:clamp(20px,5vw,40px);            /* sidmarginal i .shell */
  --sp-band:clamp(72px,10vw,124px);         /* höjd mellan sektioner */
  --sp-hero-top:clamp(24px,4vw,44px);
  --sp-hero-bottom:clamp(36px,5vw,64px);
  --sp-hero-gap:clamp(32px,5vw,64px);
  --sp-tagline-y:clamp(26px,4vw,44px);
  --sp-tagline-gap:clamp(24px,6vw,80px);
  --sp-about-gap:clamp(30px,4vw,56px);
  --sp-lab-pad:clamp(34px,5vw,56px);
  --sp-lab-gap:clamp(36px,5vw,64px);
  --sp-close-bottom:clamp(40px,5vw,64px);

  /* ---------- hörnradie ---------- */
  --r-xs:2px;      /* fokusring */
  --r-sm:3px;      /* bilder, community-kortet */
  --r-md:6px;      /* resurskort */
  --r-lg:16px;     /* stora ytor pa resurssidorna: prompt-kort, stegkort */
  --r-pill:999px;  /* knappar, kategorimärken */

  /* ---------- skuggor ---------- */
  /* Sidan använder i dag ingen skugga. Skalan finns för framtida sidor. */
  --shadow-none:none;
  --shadow-sm:0 1px 2px rgba(38,37,37,.05);
  --shadow-md:0 2px 10px rgba(38,37,37,.06);

  /* ---------- mått ---------- */
  --max:1120px;    /* innehållets maxbredd */
  --max-read:720px;/* lasbredd for en textspalt, resurssidorna */
  --max-narrow:620px;/* insatta rutor inuti lasspalten */

  /* aliaser som CSS:en nedan använder */
  --pad:var(--sp-pad);
  /* landningssidans eget sektionsavstand. Resurssidorna laser --sp-band
     direkt och paverkas inte av att den har krymper. */
  --gap:clamp(44px,6vw,76px);

  color-scheme:light;
}


*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--rose-deep);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--rose-deep);outline-offset:3px;border-radius:var(--r-xs)}

.shell{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ---------- 1. nav ---------- */
.nav{padding:var(--sp-26) 0 var(--sp-6)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-24);flex-wrap:wrap}
.wordmark{
  font-family:var(--serif);font-size:var(--fs-wordmark);font-weight:500;letter-spacing:.01em;
  color:var(--ink);text-decoration:none;white-space:nowrap;
}
.wordmark em{font-style:italic;font-weight:400;letter-spacing:.005em;color:var(--rose-deep)}
.wordmark:hover{color:var(--ink)}
.nav-links{display:flex;gap:var(--sp-26);align-items:center}
.nav-links a{
  display:inline-block;
  font-size:var(--fs-nav);font-weight:500;color:var(--ink);text-decoration:none;letter-spacing:.01em;
}
.nav-links a:hover{color:var(--rose-deep)}
/* fylld, inte kontur: communityt ar sidans viktigaste steg och navknappen
   ska darfor vara det tyngsta elementet i navigeringen.
   Guld bar ink-text, 7.44:1. Vit pa guld ar 2.05:1 och underkands.
   Ramen ar rose-deep, inte guld: guldet ar ljust och nar bara 1.81:1 mot
   kramen, sa knappens form skulle inte ga att urskilja. Rose-deep ar 4.53:1. */
.nav-links a.quiet{
  color:var(--ink);font-weight:600;background:var(--gold);
  /* Ingen synlig ram. Den ligger kvar som transparent sa knappens matt
     inte andras, och guldet lyser igenom eftersom bakgrunden klipps mot
     border-box. Knappen bar darfor ingen egen kant mot kramen, 1.81:1.
     Medvetet val. */
  border:1px solid transparent;border-radius:var(--r-pill);padding:var(--sp-7) var(--sp-16);
}
.nav-links a.quiet:hover{color:var(--ink);background:var(--gold-soft)}

/* ---------- 2. hero ---------- */
/* section-prefix: resurssidorna anvander .hero och .tagline pa egna
   element, och landningssidans mattsattning far inte lacka dit */
section.hero{padding:var(--sp-hero-top) 0 var(--sp-hero-bottom)}
.hero-in{display:grid;grid-template-columns:1fr .95fr;gap:var(--sp-hero-gap);align-items:center}
.hero-in>*{min-width:0}
h1{
  font-family:var(--serif);font-weight:400;
  font-size:var(--fs-h1);
  line-height:1.16;letter-spacing:-.015em;
  margin:0 0 var(--sp-26);
}
h1>span{display:block}
h1 em,h2 em{
  font-style:italic;font-weight:400;color:var(--rose-deep);
  font-synthesis:none;               /* faux italic ar forbjuden: aer den riktiga inte laddad blir texten upprätt och felet syns */
}
section.hero p.sub{
  font-size:var(--fs-sub);font-weight:300;line-height:1.65;
  color:var(--muted);max-width:40ch;margin:0 0 var(--sp-30);
  /* jamnar ut radlangderna. Utan den blir sista raden ett ensamt ord. */
  text-wrap:balance;
}
/* sista meningen far en egen rad. Riktad mot underrubriken, inte mot h1,
   som anvander samma klass for sin egen radbrytning pa tablet. */
section.hero p.sub .t-rad2{display:block}
.hero-photo-wrap{display:block;min-width:0}
.hero-photo{border-radius:var(--r-sm);width:100%;height:auto}

.btn{
  display:inline-block;background:var(--rose);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-btn);font-weight:600;letter-spacing:.01em;
  padding:var(--sp-15) var(--sp-30);border-radius:var(--r-pill);text-decoration:none;border:1px solid var(--rose-deep);
}
.btn:hover{background:var(--rose-soft);border-color:var(--rose-deep);color:var(--ink)}
.btn-quiet{
  display:inline-block;background:transparent;color:var(--ink);
  font-size:var(--fs-btn);font-weight:500;padding:var(--sp-14) var(--sp-28);border-radius:var(--r-pill);
  border:1px solid var(--gold);text-decoration:none;
}
.btn-quiet:hover{background:var(--surface);color:var(--ink)}
.under-btn{font-size:var(--fs-xs);color:var(--muted);margin:var(--sp-16) 0 0}

/* ---------- 3. tagline ---------- */
section.tagline{padding:var(--sp-tagline-y) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.tagline-in{
  display:flex;justify-content:center;gap:var(--sp-tagline-gap);flex-wrap:wrap;
  font-family:var(--serif);font-size:var(--fs-tagline);font-weight:400;color:var(--ink);
}

/* ---------- section furniture ---------- */
.band{padding:var(--gap) 0}
.eyebrow{
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--rose-deep);margin:0 0 var(--sp-14);
}
h2{
  font-family:var(--serif);font-weight:400;
  font-size:var(--fs-h2);line-height:1.2;letter-spacing:-.01em;
  margin:0 0 var(--sp-18);text-wrap:balance;
}
.intro{font-size:var(--fs-body-lg);font-weight:300;color:var(--muted);max-width:52ch;margin:0}
#resources .intro{max-width:none}

/* ---------- 4. resources ---------- */
.res{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(286px,100%),1fr));gap:var(--sp-14);margin:var(--sp-44) 0 0}
.res-item{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-18) var(--sp-20) var(--sp-16);text-decoration:none;color:var(--ink);
}
.res-tag{
  align-self:flex-start;
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);background:var(--rose-pale);
  padding:var(--sp-4) var(--sp-9);border-radius:var(--r-pill);margin:0 0 var(--sp-11);
}
.res-name{font-family:var(--serif);font-size:var(--fs-card-title);font-weight:500;line-height:1.3;margin:0 0 var(--sp-7)}
.res-line{font-size:var(--fs-sm);font-weight:300;line-height:1.55;color:var(--muted);margin:0 0 var(--sp-14)}
.res-go{
  margin-top:auto;font-size:var(--fs-xs);font-weight:600;color:var(--rose-deep);
  display:flex;align-items:center;gap:var(--sp-7);
}
.res-go span{display:inline-block}
a.res-item:hover{border-color:var(--rose);background:var(--surface-hover)}
a.res-item:hover .res-go span:last-child{transform:translateX(3px)}
.res-more-line{font-size:var(--fs-sm-lead);font-weight:300;color:var(--muted);margin:var(--sp-22) 0 0}
.res-after{margin-top:var(--sp-26)}

/* ---------- 5. about ---------- */
.about-in{
  display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);
  column-gap:var(--sp-about-gap);row-gap:0;align-items:start;
}
.about-in>.portrait-wrap{grid-row:1/3}
.about-head,.about-body{grid-column:2}
.about-in p{font-size:var(--fs-body-lg);font-weight:300;margin:0 0 var(--sp-18);max-width:56ch}
.about-in p:last-child{margin-bottom:0}
.about-in b{font-weight:600}
#about h2{font-size:var(--fs-h2-name);line-height:1.12}
#about h2 em{display:block}
.about-lead{font-size:var(--fs-lead);font-weight:300;line-height:1.6;margin:0 0 var(--sp-4);max-width:56ch}
.method-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-26);margin:var(--sp-6) 0 var(--sp-30);
  padding:var(--sp-22) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.m-col{display:flex;flex-direction:column}
.m-let{font-family:var(--serif);font-size:var(--fs-letter);font-weight:400;line-height:.85;color:var(--rose);margin-bottom:var(--sp-10)}
.m-word{font-family:var(--serif);font-size:var(--fs-h3);font-weight:500;margin:0 0 var(--sp-6)}
.m-txt{font-size:var(--fs-sm);font-weight:300;line-height:1.55;color:var(--muted);margin:0}
@media (max-width:860px){
  .method-cols{grid-template-columns:1fr;gap:var(--sp-18)}
  .m-col{display:grid;grid-template-columns:44px 1fr;column-gap:var(--sp-16);align-items:baseline}
  .m-let{grid-row:span 2;margin:0;font-size:var(--fs-letter-sm);text-align:center}
}
.portrait-wrap{display:block}
.portrait{width:100%;height:auto;border-radius:var(--r-sm);display:block}

/* ---------- 6. community ---------- */
.lab{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--sp-lab-pad);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  column-gap:var(--sp-lab-gap);align-items:start;
}
.lab-text{grid-column:1;grid-row:1}
/* logotypen centreras mot rubrik och stycken, knappen raknas inte in */
.lab-logo{grid-column:2;grid-row:1;align-self:center;width:260px;height:auto;display:block}
.lab-cta{grid-column:1;grid-row:2;justify-self:start;margin-top:var(--sp-28)}
/* gra botten: samma behandling som CTA-banden, sa communityt laser som
   sidans tyngsta block */
.lab{background:var(--ink);border-color:var(--ink)}
.lab h2{color:var(--surface)}
.lab h2 em{color:var(--rose)}
.lab .btn-quiet{
  background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:600;
}
.lab .btn-quiet:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--ink)}
.lab p:last-of-type{margin-bottom:0}
.lab h2{margin-bottom:var(--sp-14)}
.lab p{font-size:var(--fs-body);font-weight:300;color:var(--ground);max-width:56ch;margin:0 0 var(--sp-14)}
.lab p:last-of-type{margin-bottom:0}

/* ---------- 7. close + footer ---------- */
.close{text-align:center;padding:var(--gap) 0 var(--sp-close-bottom)}
.close h2{max-width:20ch;margin-left:auto;margin-right:auto}
.close .intro{margin:0 auto var(--sp-32)}
.close .intro span{display:block}
/* en sidfot for hela sajten: wordmark, ikonrad, copyright */
footer{border-top:1px solid var(--rule);padding-top:var(--sp-34);text-align:center}
body>footer{padding-bottom:var(--sp-46)}   /* bara landningssidan, dar footer ar barn till body */

/* ---------- sociala ikoner, delade av alla resurssidor ---------- */
.socials{display:flex;justify-content:center;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin:0}
.socials a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;              /* tryckyta, inte ikonstorlek */
  border-radius:var(--r-pill);
  color:var(--muted);text-decoration:none;
}
.socials a:hover{color:var(--rose-deep)}
.socials svg{
  width:20px;height:20px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  /* farg via currentColor, sa ikonerna foljer sidans token pa bade ljus och mork botten */
}
@media (prefers-reduced-motion:no-preference){
  .socials a{transition:color .18s ease,transform .2s ease}
  .socials a:hover{transform:translateY(-3px)}
}

/* ---------- CTA-band, delas av landningssidan och resurssidorna ----------
   Medveten avbrott i paletten. Ink-botten ar den enda ytan pa sajten som
   inte ar krem eller vit, och det ar hela poangen: blocket ska bryta floden.
   Knappen bar ink-text, aldrig vit. Vit pa rosa ar 2.38:1 och underkands. */
.cta-band{
  background:var(--ink);border-radius:var(--r-lg);
  padding:var(--sp-lab-pad) var(--sp-30);text-align:center;
}
.cta-band h2,.cta-band .cta-title{
  font-family:var(--serif);font-weight:400;font-size:var(--fs-h2);
  line-height:1.2;letter-spacing:-.01em;color:var(--surface);
  /* nollar .close h2 sin 20ch-bredd, annars hamnar rubriken till vanster */
  max-width:none;margin:0 0 var(--sp-14);text-wrap:balance;
}
.cta-band h2 em,.cta-band .cta-title em{
  font-style:italic;font-synthesis:none;color:var(--rose);
}
.cta-band p{
  font-size:var(--fs-body-lg);font-weight:300;color:var(--ground);
  max-width:46ch;margin:0 auto var(--sp-28);text-wrap:balance;
}
.cta-band .btn{
  background:var(--gold);color:var(--ink);border-color:var(--gold);
  font-size:var(--fs-btn);font-weight:600;
}
.cta-band .btn:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--ink)}
.cta-band p span{display:block}
/* ljus variant: mellansteget ska inte konkurrera med de gra banden */
.cta-band.cta-light{background:var(--surface);border:1px solid var(--line)}
.cta-band.cta-light h2,.cta-band.cta-light .cta-title{color:var(--ink)}
.cta-band.cta-light h2 em,.cta-band.cta-light .cta-title em{color:var(--rose-deep)}
.cta-band.cta-light p{color:var(--muted)}
.cta-band.cta-light .cta-note{color:var(--muted)}
.cta-band .cta-note{
  font-size:var(--fs-xs);color:var(--rose-pale);margin:var(--sp-16) auto 0;
}
/* mitt pa sidan: samma komponent, men smalare och tystare marginaler */
/* samma bredd som slut-CTA:n, sa de tva laser som samma komponent */
.cta-mid{margin:var(--sp-band) auto 0}

/* =========================================================
   Resurssidor, gemensamma komponenter.
   Landningssidan anvander ingen av klasserna nedan.
   ========================================================= */
/* ---------- sidspecifikt, bygger pa /assets/style.css ---------- */
  html{scroll-behavior:smooth}
  /* paddingen lag pa body och lackte till landningssidan. Den ligger nu
     pa .wrap, som bara resurssidorna har. max-width ar kompenserad med
     sidmarginalen sa innehallsbredden blir exakt densamma som forut. */
  .wrap{max-width:calc(var(--max-read) + var(--sp-pad)*2);margin:0 auto;padding:var(--sp-46) var(--sp-pad) var(--sp-band)}
  /* :where ger noll specificitet, sa klassreglerna nedan behaller sina marginaler */
  :where(.wrap) :where(p,ol,li,pre){margin:0}
  :where(.wrap) :where(ol){padding:0;list-style:none}

  /* ---------- sidhuvud ---------- */
  .top{text-align:center;margin-bottom:var(--sp-44)}
  .avatar{
    width:100px;height:100px;border-radius:50%;object-fit:cover;
    border:2px solid var(--rose);background:var(--rose-pale);
    /* block, inte inline-block: annars lagger sig taggen bredvid bilden
       nu nar det centrerade namnet mellan dem ar borta */
    display:block;margin:0 auto var(--sp-22);
  }
  .pill{
    display:inline-block;font-size:var(--fs-eyebrow);font-weight:600;
    letter-spacing:.19em;text-transform:uppercase;
    color:var(--muted);background:var(--rose-pale);   /* samma par som .res-tag, 4.79:1 */
    padding:var(--sp-9) var(--sp-20);border-radius:var(--r-pill);margin-bottom:var(--sp-16);
  }
  .top h1{font-size:var(--fs-h1-lg);margin-bottom:var(--sp-22)}
  /* .wrap-prefix: resurssidorna centrerar sin ingress, landningssidan
     vansterstaller sin. Utan prefix vinner den har regeln pa bada. */
  .wrap .intro{margin-left:auto;margin-right:auto;text-align:center}
  .scroll-hint{
    font-family:var(--serif);font-style:italic;font-synthesis:none;
    font-size:var(--fs-btn);color:var(--rose-deep);margin-top:var(--sp-14);
  }

  /* ---------- kortet med hela listan ---------- */
  .card{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
    overflow:hidden;box-shadow:var(--shadow-sm);margin-top:var(--sp-14);
  }
  .card-top{
    display:flex;align-items:center;justify-content:space-between;gap:var(--sp-14);
    padding:var(--sp-18) var(--sp-22);border-bottom:1px solid var(--line);background:var(--ground);
  }
  .card-label{
    font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.19em;
    text-transform:uppercase;color:var(--muted);
  }
  .copy-btn{
    font-family:var(--sans);font-size:var(--fs-btn);font-weight:600;letter-spacing:.01em;
    color:var(--ink);background:var(--rose);border:1px solid var(--rose-deep);
    border-radius:var(--r-pill);padding:var(--sp-10) var(--sp-24);cursor:pointer;white-space:nowrap;
  }
  .copy-btn:hover{background:var(--rose-soft)}
  .copy-btn.copied{background:var(--rose-soft)}
  .prompt-box{max-height:420px;overflow-y:auto;padding:var(--sp-22);background:var(--surface)}
  .prompt-box pre{
    font-family:var(--mono);font-size:var(--fs-xs);line-height:1.75;
    color:var(--ink);white-space:pre-wrap;word-wrap:break-word;
  }
  .prompt-box::-webkit-scrollbar{width:8px}
  .prompt-box::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-md)}

  /* ---------- sektioner ---------- */
  /* .wrap-prefix: annars far aven landningssidans sektioner 72-124px
     extra toppmarginal, vilket den inte ska ha. */
  .wrap section{margin-top:var(--sp-band)}
  .wrap h2{text-align:center;margin-bottom:var(--sp-9)}
  .wrap .sub{
    text-align:center;color:var(--muted);font-size:var(--fs-sm-lead);
    font-weight:300;margin:0 auto var(--sp-26);max-width:52ch;
  }
  section p+p{margin-top:var(--sp-14)}
  section>p{font-weight:300;color:var(--muted);max-width:56ch;margin-left:auto;margin-right:auto}

  .try{
    margin-top:var(--sp-16);background:var(--ground);border:1px solid var(--line);border-radius:var(--r-md);
    padding:var(--sp-14) var(--sp-16);display:flex;gap:var(--sp-14);
    align-items:center;justify-content:space-between;flex-wrap:wrap;
  }
  .try code{
    font-family:var(--mono);font-size:var(--fs-xs);line-height:1.6;color:var(--ink);
    flex:1 1 58%;word-break:break-word;
  }
  .copy-mini{
    font-family:var(--sans);font-size:var(--fs-xs);font-weight:600;
    color:var(--ink);background:var(--rose);border:1px solid var(--rose-deep);
    border-radius:var(--r-pill);padding:var(--sp-9) var(--sp-18);cursor:pointer;white-space:nowrap;
  }
  .copy-mini:hover{background:var(--rose-soft)}
  .copy-mini.copied{background:var(--rose-soft)}

  /* liten kursiv rad under ett kort eller en sektion. Bar ett forbehall
     eller ett sidospar, aldrig sidans huvudpoang. */
  .note-line{
    text-align:center;color:var(--muted);font-size:var(--fs-sm-lead);
    font-weight:300;font-style:italic;margin-top:var(--sp-16);
  }

  /* ---------- stegkortet ---------- */
  .steps-card{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
    padding:var(--sp-28) var(--sp-26) var(--sp-14);box-shadow:var(--shadow-sm);
  }
  .steps{counter-reset:step}
  .steps li{counter-increment:step;position:relative;padding:0 0 var(--sp-24) 54px}
  /* Det runda stegnumret. Definieras en gang och anvands pa tva satt:
     som markor i .steps, och som fristaende .step-num dar det inte finns
     nagon lista att hanga det pa. Ink pa rose-pale ar 12.62:1. */
  .steps li::before,.step-num{
    width:36px;height:36px;border-radius:50%;
    background:var(--rose-pale);border:1px solid var(--rose);color:var(--ink);
    font-family:var(--sans);font-weight:600;font-size:var(--fs-btn);
    display:flex;align-items:center;justify-content:center;
    flex:0 0 auto;
  }
  .steps li::before{content:counter(step);position:absolute;left:0;top:0}
  .steps li strong{
    display:block;font-family:var(--serif);font-size:var(--fs-h3);
    font-weight:500;color:var(--ink);margin-bottom:var(--sp-4);
  }
  .steps li span{color:var(--muted);font-weight:300;font-size:var(--fs-sm-lead)}

  /* ---------- back ---------- */
  /* avslutningsrad, star sist i innehallet fore back-lanken */
  .sign{
    text-align:center;font-family:var(--serif);font-style:italic;font-synthesis:none;
    font-size:var(--fs-h3);color:var(--rose-deep);margin-top:var(--sp-30);
  }

  .back{
    display:inline-block;margin-top:var(--sp-44);
    font-size:var(--fs-sm);font-weight:600;color:var(--rose-deep);text-decoration:none;
  }
  .back-top{display:block;margin:0 0 var(--sp-30)}

  /* ---------- AI Creator Lab ---------- */
  /* mork botten, samma som landningssidans block langst ner: mork betyder
     AI Creator Lab pa hela sajten */
  .community{
    max-width:520px;margin:var(--sp-band) auto 0;
    background:var(--ink);border:1px solid var(--ink);border-radius:var(--r-lg);
    padding:var(--sp-lab-pad) var(--sp-26);text-align:center;
  }
  .community .acl-logo{width:180px;max-width:70%;height:auto;display:block;margin:0 auto var(--sp-14)}
  .community-line{
    color:var(--ground);font-weight:300;font-size:var(--fs-body);
    line-height:1.6;margin:0 auto var(--sp-22);max-width:34ch;
  }
  /* serif kursiv: Montserrat italic laddas inte, och font-synthesis:none
     forbjuder fejkad kursiv, sa emfasen skulle annars bli uppratt */
  .community-line em{font-family:var(--serif);font-style:italic;font-synthesis:none;color:var(--rose)}
  .community-btn{
    display:inline-block;background:var(--gold);color:var(--ink);
    font-size:var(--fs-btn);font-weight:600;letter-spacing:.01em;
    padding:var(--sp-15) var(--sp-30);border-radius:var(--r-pill);
    text-decoration:none;border:1px solid var(--gold);
  }
  .community-btn:hover{background:var(--gold-soft);color:var(--ink)}

  /* ---------- sidfot ---------- */
  .wrap footer{margin-top:var(--sp-band)}
  footer .brand{font-family:var(--serif);font-size:var(--fs-h3);font-weight:500;margin-bottom:var(--sp-10)}
  footer .socials{margin-bottom:var(--sp-6)}
  footer .brand em{font-style:italic;font-weight:400;letter-spacing:.005em;font-synthesis:none;color:var(--rose-deep)}
  footer .note{color:var(--muted);font-size:var(--fs-xs)}

  /* ---------- rorelse, samma monster som landningssidan ---------- */
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  @media (prefers-reduced-motion:no-preference){
    .copy-btn,.copy-mini,.community-btn,.back{
      transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .2s ease;
    }
    
    .copy-btn:hover,.copy-mini:hover,.community-btn:hover,.back:hover{transform:translateY(-3px)}
  }

/* ---------- responsive ---------- */
@media (max-width:860px){
  .hero-in{grid-template-columns:1fr;gap:var(--sp-32)}
  /* centrerad text sa fort layouten staplas: tablet och mobil */
  .hero-text{text-align:center}
  .hero p.sub{margin-left:auto;margin-right:auto}
  /* 4. tablet-heron: storre och centrerad */
  .hero-photo-wrap{order:-1;max-width:min(560px,100%);margin-inline:auto}
  .res{grid-template-columns:1fr}
  .method-cols{grid-template-columns:1fr}
}
/* tablet: texten ligger kvar bredvid ansiktet i About */
@media (max-width:860px) and (min-width:621px){
  .portrait-wrap{max-width:180px}
  /* logotypen far samma vikt mot texten som pa desktop, ~28% av kortets innermatt */
  .lab{column-gap:var(--sp-44)}
  .lab-logo{width:176px}
  /* WHO I AM centreras som grupp: sparen blir innehallsbaserade och griden centreras */
  .about-in{
    grid-template-columns:auto minmax(0,1fr);
    max-width:687px;margin-left:auto;margin-right:auto;
    align-items:stretch;
  }
  /* head och lead mots i mitten sa gruppen hamnar mitt for portrattet */
  .about-head{align-self:end}
  .about-lead{align-self:start}
  .about-body{align-self:start}
  /* hero: storre rubrik, centreringen ligger i regeln ovanfor */
  .hero-text h1{font-size:var(--fs-h1-fixed)}
  /* 2 + 3: extra radbrytning som bara galler tablet */
  .hero-text .t-rad2{display:block}
  /* 5: bara rubrik och lead bredvid portrattet, metoden under i tre kolumner */
  .about-in>.portrait-wrap{grid-row:1/3}
  .about-head{grid-column:2;grid-row:1}
  /* about-body loses upp sa dess barn blir egna grid-items, bara har */
  .about-body{display:contents}
  .about-lead{grid-column:2;grid-row:2;align-self:start}
  .method-cols{grid-column:1/-1;grid-row:3;grid-template-columns:repeat(3,1fr);gap:var(--sp-22);margin-top:var(--sp-18)}
  .about-body>p:not(.about-lead){grid-column:1/-1}
  .m-col{display:flex;flex-direction:column}
  .m-let{grid-row:auto;margin:0 0 var(--sp-10);text-align:left;font-size:var(--fs-letter-md)}
}
/* 2. mobil: rubriken bredvid ansiktet, resten under */
@media (max-width:620px){
  /* logotypen ryms inte bredvid: den laggs over rubriken i mindre storlek */
  .lab{grid-template-columns:1fr;row-gap:0}
  /* 150px, inte 76: den nya loggan bar ordbilden "AI CREATOR LAB" under
     monogrammet, och den ar 7.3%% av filens hojd. Vid 76px blir versalhojden
     5px och texten grotig. Vid 150px blir den 10px och laslig. */
  .lab-logo{grid-column:1;grid-row:1;width:150px;margin-bottom:var(--sp-20)}
  .lab-text{grid-column:1;grid-row:2}
  .lab-cta{grid-column:1;grid-row:3;margin-top:var(--sp-24)}
  .about-in{grid-template-columns:auto minmax(0,1fr);column-gap:var(--sp-18);row-gap:var(--sp-22)}
  .about-in>.portrait-wrap{grid-row:1;max-width:132px}
  .about-head{align-self:center}
  .about-head h2{margin-bottom:0}
  .about-body{grid-column:1/-1}
}
@media (max-width:520px){
  .nav-in{gap:var(--sp-14)}
  .nav-links{gap:var(--sp-18)}
  .btn,.btn-quiet{display:block;text-align:center}
}
@media (prefers-reduced-motion:no-preference){
  .btn,.btn-quiet,.nav-links a{transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .2s ease}
  a.res-item{transition:border-color .18s ease,background-color .18s ease,transform .2s ease}
  /* lyftet ligger inuti no-preference, sa reduced-motion far ingen forflyttning alls */
  .btn:hover,.btn-quiet:hover,.nav-links a:hover,a.res-item:hover{transform:translateY(-3px)}
  .res-go span:last-child{transition:transform .18s ease}

  /* ---------- scroll reveal ---------- */
  .js-reveal .reveal{opacity:0;transform:translateY(14px)}
  .js-reveal .reveal.is-in{
    opacity:1;transform:none;
    transition:opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
  }
}