/* Landningssidan — R1 "Boken" (landningsbygget 2026-08-19): tvåkolumnshero
   med CSS-bokobjekt på desktop, staplad mobil. Husets varma palett (AA-paren
   i egengranskningen, rapportens tabell), ljust + mörkt via
   prefers-color-scheme (ingen växlare — sidan är en dörr, inte ett rum).
   Kortet bär husets svala kant (6d-kantspråket). F6-footerns klickyta paddad
   ≥44 px (konceptrundans 201×19-fynd) utan visuellt hopp.
   EXTERN fil av nödvändighet: CSP:ns style-src 'self' blockerar inline-<style>. */
@font-face{
  font-family:"Atkinson Hyperlegible Next";
  font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/fonts/atkinson-hyperlegible-next-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Atkinson Hyperlegible Next";
  font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/fonts/atkinson-hyperlegible-next-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root{
  /* Ljust tema — VÄG B (samma AA-verifierade värden som /start/, aa-6e).
     Mörka blocket nedan är hex-oförändrat mot före passet. */
  color-scheme:light;
  --bg:#efe9df; --text:#232323; --muted:#615e57;
  --panel:#e2ddd2; --edge-i:#3f6f8f; --accent:#2f6fed; --accent-strong:#1c4fd6;
  --btn-bg:#1c4fd6; --border:#d8cdb9;
  /* R1-bokobjektets ljusa material (dekorativa ytor — kantregeln: pärmen bärs
     av kant + skugga + innehåll, ingen 3:1-tröskel på fyllnaden) */
  --parm-a:#fbf8f2; --parm-b:#f1ebdf; --parm-text:#3d3a35; --parm-svag:#6f6a61;
  --rygg-a:#8a7a63; --rygg-b:#6f6350; --sidkant-a:#fffdf8; --sidkant-b:#e8e1d2;
  --grek:#d9d2c2; --glod:rgba(156,95,69,.10); --bokskugga:rgba(60,50,40,.28);
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --bg:#1b1d21; --text:#e9e7e2; --muted:#a9a7a0;
    --panel:#17181c; --edge-i:#6f8fb0; --accent:#5b8cff; --accent-strong:#9db9ff;
    --btn-bg:#1c4fd6; --border:#33363b;
    /* Mörka bokformen — KONTRASTLYFT (tweak 2026-08-19, Darios medskick på
       L-04b: pärmen smälte in, 1,15:1 mot bg). Lyft till 1,65/1,39:1 — mörk
       LYFT yta, ljusare inte ljus; namn 8,3:1 och S2 4,2:1 mot nya pärmen
       (över golven, mätt). Grek/sidkant följer proportionellt. */
    --parm-a:#3d414b; --parm-b:#32363d; --parm-text:#e9e7e2; --parm-svag:#a9a7a0;
    --rygg-a:#4a4238; --rygg-b:#332d26; --sidkant-a:#4a4e57; --sidkant-b:#383c45;
    --grek:#565b66; --glod:rgba(210,154,127,.09); --bokskugga:rgba(0,0,0,.45);
  }
}
*{box-sizing:border-box}
/* F9 (designputsen): scrollbar i husets ton, ingen blå tap-blixt, selektion
   i husets färger. */
html{scrollbar-color:var(--border) transparent;-webkit-tap-highlight-color:transparent}
::selection{background:var(--accent-strong);color:#fff}
body{margin:0;min-height:100svh;
  font-family:"Atkinson Hyperlegible Next",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6}
.scen{min-height:100svh;display:grid;grid-template-rows:1fr auto}
.komp{max-width:76rem;margin:0 auto;width:100%;
  padding:clamp(1.2rem,4vw,3.5rem) clamp(1.2rem,4vw,3.5rem) 0;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,5rem);align-items:center}
.tag{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.9rem}
.lockup{display:flex;align-items:center;gap:.75rem}
.s2{color:var(--text);flex:none}
.s2-rygg{stroke:var(--accent-strong)}
.wm-block{display:flex;flex-direction:column}
.wm{font-weight:700;letter-spacing:-.01em;white-space:nowrap;font-size:1.55rem;line-height:1.15}
/* Ordmärkets stående gradientform ("My" i textfärg, "Backstory" i husets
   accentgradient). Fallback utan background-clip: solid accent-strong —
   AA-mätt i båda teman, degraderar läsbart. */
.wm .back{color:var(--accent-strong)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .wm .back{background:linear-gradient(90deg,var(--accent),var(--accent-strong));
    -webkit-background-clip:text;background-clip:text;color:transparent}
}
.undertitel{color:var(--muted);font-size:.92rem}
h1.hero{font-size:clamp(2.1rem,3.4vw,3.4rem);line-height:1.12;margin:1.4rem 0 .7rem;
  text-wrap:balance;font-weight:700}
.stod{color:var(--muted);font-size:1.08rem;max-width:34rem;margin:0 0 1.6rem}
/* Berättarens väg — stor och först. En förklaring, ingen knapp: ingången är
   länken hen redan fått (och den är hens väg tillbaka, varje gång). */
.narrator-card{background:var(--panel);border:1px solid var(--border);border-left:2px solid var(--edge-i);
  border-radius:.9rem;padding:1.2rem 1.3rem;margin:0 0 1.1rem;max-width:34rem}
.narrator-card h2{margin:0 0 .35rem;font-size:1.25rem}
.narrator-card p{margin:0;color:var(--muted)}
.orderer-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border:1px solid var(--border);border-radius:.9rem;padding:1rem 1.3rem;background:transparent;max-width:34rem}
.orderer-row p{margin:0;color:var(--muted);flex:1 1 12rem}
.btn{display:inline-block;background:var(--btn-bg);color:#fff;text-decoration:none;font-weight:600;
  padding:.8rem 1.5rem;border-radius:.7rem;min-height:48px;line-height:1.6;border:1px solid transparent}
/* F8 (designputsen): mörka temats "Logga in" — ringen bär komponentgränsen
   (#8a909b mot #1b1d21 = 4,68:1); basens transparenta kant gör att måtten
   inte hoppar mellan teman. Regeln står ordagrant — formlåst i designputs-test. */
@media (prefers-color-scheme: dark){
  .btn{border-color:#8a909b}
}
.btn:focus-visible{outline:3px solid var(--accent-strong);outline-offset:2px}
a{color:var(--accent-strong)}

/* --- R1-bokobjektet (ren CSS, inga bilder; dekorativt aria-hidden) -------- */
.bokscen{display:flex;justify-content:center;align-items:center;position:relative;min-height:24rem}
.glod{position:absolute;inset:0;background:radial-gradient(42% 46% at 55% 52%,var(--glod),transparent 70%)}
.bok{position:relative;width:min(19rem,72%);aspect-ratio:148/210;
  transform:perspective(1400px) rotateY(-17deg) rotateX(3deg);transform-style:preserve-3d;
  filter:drop-shadow(1.4rem 1.8rem 2.2rem var(--bokskugga))}
.parm{position:absolute;inset:0;background:linear-gradient(150deg,var(--parm-a),var(--parm-b));
  border:1px solid var(--border);border-radius:.35rem .8rem .8rem .35rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem}
.rygg{position:absolute;left:-1.05rem;top:.15rem;bottom:.15rem;width:1.1rem;
  background:linear-gradient(180deg,var(--rygg-a),var(--rygg-b));
  border-radius:.3rem 0 0 .3rem;transform:rotateY(38deg);transform-origin:right}
.sidkant{position:absolute;right:-.45rem;top:.5rem;bottom:.5rem;width:.5rem;border-radius:0 .2rem .2rem 0;
  background:repeating-linear-gradient(180deg,var(--sidkant-a) 0 2px,var(--sidkant-b) 2px 3px)}
.s2-parm{color:var(--parm-svag)}
.parm .namn{font-weight:600;font-size:1.05rem;color:var(--parm-text)}
.grek{width:70%;display:grid;gap:.45rem}
.grek i{display:block;height:.44rem;border-radius:.22rem;background:var(--grek)}
.grek i:last-child{width:62%;margin:0 auto}
.parm .marke{margin-top:auto;color:var(--parm-svag)}
.parm .wm{font-size:.92rem}

/* F6: integritetslänken — stilla footerrad i muted-klassens ton, färgen den
   AA-mätta --accent-strong. KLICKYTEFIXEN (konceptrundans 201×19-fynd):
   inline-block + padding lyfter träffytan till ≥44 px höjd; negativ margin
   kvittar padd:en så raden inte hoppar visuellt. */
.footrow{text-align:center;padding:1rem 0 1.4rem;font-size:.92rem}
.footrow a{display:inline-block;padding:13px 10px;margin:-13px -10px}

/* --- Responsivt 320 → 4K -------------------------------------------------- */
@media (max-width:900px){
  .komp{grid-template-columns:1fr;gap:1.6rem;padding-top:2rem;align-items:start}
  .bokscen{min-height:0;margin:.4rem 0 1rem}
  .bok{width:min(13rem,60%)}
}
@media (min-width:2000px){
  .komp{max-width:88rem}
}