/* Leseambisjon mockups, 13 September 2026.
   Tokens, typefaces and the masthead/entry/feature/article rules are carried over from the
   5 September preview (site/stil.css + preview.css). Direction files add only what differs. */
:root{
  --ink:#1c1913; --pap:#ebe5d6; --ark:#fffdf7; --card:#fbf8ef; --line:#d8d0bc; --line2:#b9b2a4;
  --acc:#a33b16; --rod:#e63e1f; --acc2:#264f3e; --gul:#f0c46a; --dim:#645d52; --tekst:#2a2620;
  --lys:#f2efe6; --lysdim:#bdb4a2; --mhdim:#cfc8ba;
  --kb-ink:#1A1A2E; --kb-deep:#0E0E1B; --kb-korall:#C52845; --kb-lys:#E94560; --kb-plomme:#6E294D; --kb-varm:#FAC47C;
  --kb-font:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --measure:40rem; --wide:78rem;
  --disp:'Space Grotesk','Inter',system-ui,sans-serif;
  --body:'Crimson Pro',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --gutter:1.6rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--pap);color:var(--ink);font-family:var(--body);font-size:20px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--acc);text-underline-offset:3px;text-decoration-thickness:1px;overflow-wrap:anywhere}
h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:-.035em;line-height:1.04;margin:0}
p{margin:0 0 1rem}
em{font-style:italic}
:focus-visible{outline:3px solid var(--acc2);outline-offset:4px}
.top :focus-visible,.dark :focus-visible{outline-color:var(--gul)}
.skip-link{position:absolute;top:-100px;left:1rem;background:var(--gul);color:var(--ink);z-index:40;padding:.4rem 1rem}
.skip-link:focus{top:1rem}
.wide{max-width:var(--wide);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* mockup status line — the preview's "Lokal forhåndsvisning" line, extended */
.mockbar{font:12px/1.5 var(--mono);color:var(--dim);background:var(--pap);border-bottom:1px solid var(--line);
  padding:.3rem var(--gutter);display:flex;justify-content:space-between;gap:.4rem 1rem;flex-wrap:wrap;align-items:center}
.mockbar>span{white-space:nowrap}
.mockbar a{color:var(--dim)}
.mockbar button{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--line2);border-radius:2px;padding:.05rem .5rem;cursor:pointer}
.mockbar button[aria-pressed="true"]{background:var(--ink);color:var(--lys);border-color:var(--ink)}

/* top navigation (preview) */
.top{background:var(--ink);color:var(--lys);position:sticky;top:0;z-index:20}
.top .wide{display:flex;gap:.3rem 1.5rem;align-items:baseline;flex-wrap:wrap;padding-top:.8rem;padding-bottom:.8rem;
  font:500 .74rem/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.brand{font-family:var(--disp);font-size:1.2rem;font-weight:700;letter-spacing:-.04em;text-transform:none;color:var(--lys);text-decoration:none;margin-right:auto}
.brand b{color:var(--rod);font-weight:700}
.top a:not(.brand){color:var(--lysdim);text-decoration:none;padding:.3rem 0;border-bottom:2px solid transparent}
.top a:not(.brand):hover{color:var(--lys)}
.top a[aria-current]{color:var(--lys);border-bottom-color:var(--gul)}
.top .nav-wide{display:inline}

/* shared small type */
.section-label{font:500 12px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--dim);margin:0 0 1rem}
.mono{font-family:var(--mono)}
.meta{font:12.5px/1.55 var(--mono);color:var(--dim);letter-spacing:.02em}
.read-link{font:700 1rem/1.4 var(--disp);text-underline-offset:5px}
.lbl{font:500 11.5px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--dim);display:inline-flex;align-items:center;gap:.45em;white-space:nowrap}
.lbl::before{content:"";width:.62em;height:.62em;display:inline-block;background:currentColor;flex:none}
.lbl-essay,.lbl-kaninhull{color:var(--acc)}
.lbl-argumentet{color:var(--ink)}
.lbl-argumentet::before{background:var(--ink)}
.lbl-notat{color:var(--dim)}
.lbl-notat::before{background:transparent;border:1.5px solid currentColor}
.dark .lbl-essay,.dark .lbl-kaninhull{color:#ff8a6b}
.dark .lbl-argumentet{color:var(--lys)}.dark .lbl-argumentet::before{background:var(--lys)}
.dark .lbl-notat{color:var(--lysdim)}

/* placeholders: grey boxes, never mistaken for copy */
.ph{font-family:var(--mono)!important;font-size:.82em!important;font-style:normal!important;letter-spacing:0!important;font-weight:400!important;text-transform:none!important;
  background:repeating-linear-gradient(135deg,rgba(100,93,82,.10) 0 6px,rgba(100,93,82,.04) 6px 12px);color:#4f493f!important;
  border:1px dashed #8c8474;padding:.05em .35em;border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.dark .ph{color:#e6dfcf!important;border-color:#8a8272;background:repeating-linear-gradient(135deg,rgba(242,239,230,.10) 0 6px,rgba(242,239,230,.03) 6px 12px)}

/* ---- masthead (preview) ---- */
.masthead{background:var(--ink);color:var(--lys);padding:2.4rem 0 2.8rem}
.mh{display:grid;grid-template-columns:1.15fr 1fr;gap:1.1rem 3rem;align-items:start}
.mh .author-line{grid-column:1/-1;font:500 12px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.13em;color:var(--lysdim);margin:0}
.mh h1{grid-column:1/-1;font-size:clamp(3.2rem,12.1vw,10.6rem);line-height:.84;letter-spacing:-.065em;margin:.4rem 0 1.2rem;color:var(--lys)}
.mh h1 em,.hat em{font-style:normal;color:var(--rod)}
.mh-t{align-self:end}
.hat{font-family:var(--disp);font-weight:700;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1;letter-spacing:-.045em;margin:.2rem 0 1.1rem;color:var(--lys)}
.mild{font-size:1.1rem;line-height:1.48;margin:0 0 1rem;max-width:36rem;color:var(--mhdim)}
.turn{font-family:var(--disp);font-weight:700;font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.12;letter-spacing:-.035em;margin:0 0 1.4rem;color:var(--gul);max-width:28ch}
.def{font-size:1.12rem;line-height:1.45;margin:0;max-width:36rem;color:var(--lys);border-top:1px solid #3a352c;padding-top:1rem}
.definition-link{display:inline-block;color:var(--gul);margin-top:.65rem;font-size:1rem;text-underline-offset:4px}
.mh figure{margin:0;position:relative;align-self:center}
.mh figure img{width:100%;aspect-ratio:1.12;object-fit:cover;filter:saturate(.95) contrast(1.05)}
.mh figcaption,.on-photo{position:absolute;left:.6rem;bottom:.6rem;background:var(--ink);color:var(--lysdim);font:11.5px/1.4 var(--mono);letter-spacing:.06em;padding:.3rem .55rem;text-transform:uppercase}

/* ---- three entrances (preview) ---- */
.entry-section{padding-top:2rem;padding-bottom:2.6rem}
.entry-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink);border-bottom:1px solid var(--line2)}
.entry{display:grid;grid-template-columns:1.5rem 1fr auto;gap:.6rem;padding:1.3rem 1rem 1.3rem 0;color:var(--ink);text-decoration:none}
.entry+.entry{border-left:1px solid var(--line2);padding-left:1.3rem}
.entry-num{font:12px/1.5 var(--mono);color:var(--acc);padding-top:3px}
.entry small{display:block;font:500 12px/1.5 var(--mono);color:var(--dim);margin-bottom:.5rem}
.entry b{font:700 1.5rem/1.08 var(--disp);letter-spacing:-.04em;display:block}
.entry-quote{display:block;font-size:1.03rem;line-height:1.4;margin-top:.8rem}
.entry-arrow{color:var(--acc);font-size:1.4rem;line-height:1}
.entry:hover b{color:var(--acc)}
.route-more{display:flex;gap:.4rem 1.4rem;flex-wrap:wrap;font:13px/1.7 var(--mono);margin:1rem 0 0}

/* ---- featured essay (preview) ---- */
.feature{display:grid;grid-template-columns:.82fr 1fr;gap:3.8rem;padding-top:2.7rem;padding-bottom:3rem;border-top:1px solid var(--line2)}
.feature figure{margin:0}
.feature img{width:100%;height:100%;max-height:490px;object-fit:cover}
.feature figcaption{margin-top:.4rem}
.feature h2{font-size:clamp(2.3rem,4vw,3.7rem);line-height:1;letter-spacing:-.055em;margin:0 0 1.4rem;max-width:12ch}
.feature h2 a{color:inherit;text-decoration:none}
.feature h2 a:hover{color:var(--acc)}
.feature p{font-size:1.16rem;line-height:1.55}
.feature .section-label,.try-one .section-label{font-size:12px;line-height:1.5}
figcaption{font:11.5px/1.5 var(--mono);letter-spacing:.04em;color:var(--dim);margin-top:.5rem}

/* ---- section heading ---- */
.section-heading{display:flex;gap:1rem;justify-content:space-between;align-items:baseline;flex-wrap:wrap;margin-bottom:1.3rem}
.section-heading h2{font-size:2rem;letter-spacing:-.04em}
.head-links{display:flex;gap:.3rem 1.2rem;align-items:baseline;flex-wrap:wrap;margin:0;font-size:.98rem}
.feed-link{font:500 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc);text-decoration:none;border:1px solid currentColor;padding:.12rem .45rem;border-radius:2px}
.feed-link:hover{background:var(--acc);color:var(--ark)}
.dark .feed-link{color:var(--gul)}

/* ---- try one thing (preview) ---- */
.try-one{display:grid;grid-template-columns:1.3fr 1fr;gap:3.5rem;padding-top:2.2rem;padding-bottom:2.2rem}
.try-one h2{font-size:2.2rem;letter-spacing:-.04em;margin:0 0 1rem}
.try-one p{font-size:1.12rem;line-height:1.5;margin-bottom:0}
.try-links{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.7rem}
.try-links a{font:700 1.15rem/1.4 var(--disp);text-underline-offset:5px}
.try-links span{font:12px/1.5 var(--mono);margin-bottom:1rem}
.dark{background:var(--ink);color:var(--lys)}
.dark .section-label{color:var(--gul)}
.dark a{color:var(--gul)}
.dark .try-links span{color:var(--lysdim)}

/* ---- library (preview) ---- */
.library{padding-top:3rem;padding-bottom:3rem}
.library h2{font-size:2rem;letter-spacing:-.04em}
.library-links{display:grid;grid-template-columns:repeat(3,1fr);gap:0 2.2rem;margin-top:1.3rem}
.library-links a{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;border-bottom:1px solid var(--line2);padding:.85rem 0;text-decoration:none;color:var(--ink);font:500 1rem/1.4 var(--disp)}
.library-links a span[aria-hidden]{color:var(--acc)}
.library-links a small{font:12px/1.4 var(--mono);color:var(--dim);margin-left:auto}
.library-links a:hover{color:var(--acc)}
.resource-links{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font:13px/1.7 var(--mono);margin-top:1.6rem}

/* ---- subscribe ---- */
.signup{display:grid;gap:.6rem}
.signup h2,.signup h3{font-size:1.5rem;letter-spacing:-.035em}
.signup-form{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-end;margin-top:.4rem}
.signup-form label{flex-basis:100%;font:500 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.signup-form input{flex:1 1 14rem;min-width:0;font:1.05rem/1.3 var(--body);color:var(--ink);background:var(--ark);border:1px solid var(--line2);border-bottom:2px solid var(--ink);padding:.6rem .7rem;border-radius:0}
.signup-form input::placeholder{color:#8a8375}
.signup-form button{font:700 1rem/1 var(--disp);letter-spacing:-.01em;background:var(--ink);color:var(--lys);border:0;padding:.78rem 1.2rem;cursor:pointer;border-radius:0}
.signup-form button:hover{background:var(--acc)}
.signup .feeds{font:13px/1.6 var(--mono);color:var(--dim);margin:.3rem 0 0;display:flex;flex-wrap:wrap;gap:.3rem .8rem;align-items:center}
.signup .provider{font-size:12px;margin:0}
.signup .provider.ph,.meta .ph,.meta.ph,.lbl .ph{font-size:12px!important}
.signup>p.ph{font-size:14px!important;justify-self:start}

/* ---- Kulturbase lockup, kept in Kulturbase's own identity ---- */
.kb-mark{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--kb-ink);font:700 1.5rem/1 var(--kb-font);letter-spacing:-.01em}
.kb-mark img{width:2.6rem;height:2.6rem;border-radius:22%;object-fit:cover}
.kb-short{font:500 .95rem/1.4 var(--kb-font);color:#4a4a5e;margin:.5rem 0 0}
.kb-stats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;font:500 .9rem/1.4 var(--kb-font);color:#3d3d52}
.kb-stats b{font-weight:700;color:var(--kb-ink)}
.kb-cta{display:inline-flex;align-items:center;gap:.4rem;font:600 1rem/1 var(--kb-font);color:#fff;background:var(--kb-korall);text-decoration:none;padding:.72rem 1rem;border-radius:8px}
.kb-cta:hover{background:var(--kb-ink)}
.shot{border:1px solid rgba(26,26,46,.18);box-shadow:0 18px 40px -22px rgba(28,25,19,.55);background:#f5f5f7}

/* ---- article (preview reading column) ---- */
.article{padding-top:2.6rem}
.article .wrap{max-width:calc(var(--measure) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.kicker{font:500 12px/1.5 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--acc);margin:0 0 1rem}
.article h1{font-size:clamp(2.4rem,5.5vw,4rem);line-height:1.03;letter-spacing:-.045em;margin:0 0 1rem;max-width:18ch}
.source-date{font:12.5px/1.55 var(--mono);color:var(--dim);margin:0 0 1.8rem;padding-bottom:1rem;border-bottom:1px solid var(--line2)}
.prose{font-size:1.3rem;line-height:1.65}
.prose p{margin:0 0 1.2rem}
.reading-next{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;border-top:2px solid var(--ink);margin-top:2.6rem;padding:1.3rem 0 2rem}
.reading-next a{font:700 1.1rem/1.4 var(--disp);text-decoration:none;color:var(--ink)}
.reading-next a:hover{color:var(--acc)}
.reading-next small{display:block;font:500 12px/1.5 var(--mono);color:var(--dim);margin-bottom:.6rem;letter-spacing:.04em}

/* ---- footer (preview) ---- */
footer.site-foot{border-top:3px solid var(--ink);margin-top:0;padding:1.4rem 0 3rem;font-size:.95rem;color:var(--dim);line-height:1.6}
footer.site-foot .wide{display:flex;justify-content:space-between;align-items:baseline;gap:1rem 2rem;flex-wrap:wrap}
footer.site-foot p{margin:0}
footer.site-foot .brand{font-size:1.6rem;color:var(--ink);margin:0}
footer.site-foot a{color:var(--dim)}

/* ---- annotation view ---- */
html.merk [data-copy]{outline:2px dashed var(--mc,#888);outline-offset:1px}
html.merk [data-copy="kilde"]{--mc:#2f8a4e}
html.merk [data-copy="forhandsvisning"]{--mc:#5f8f95}
html.merk [data-copy="eksisterende"]{--mc:#d08a00}
html.merk [data-copy="kulturbase"]{--mc:#4b4bd6}
html.merk [data-copy="etikett"]{--mc:#c2188f}
html.merk [data-copy="plassholder"]{--mc:#6b6b6b}
.merk-chip{position:absolute;z-index:60;font:600 9.5px/1 var(--mono);letter-spacing:.02em;color:#fff;padding:2px 4px 2px;border-radius:2px;pointer-events:auto;white-space:nowrap;cursor:help}
.merk-legend{position:fixed;right:12px;bottom:12px;z-index:70;background:#fffdf7;color:#1c1913;border:1px solid #1c1913;padding:.6rem .75rem;font:11.5px/1.5 var(--mono);max-width:19rem;box-shadow:0 10px 30px -12px rgba(0,0,0,.5)}
.merk-legend b{display:block;font-size:12px;margin-bottom:.3rem}
.merk-legend span{display:inline-block;width:.7rem;height:.7rem;margin-right:.35rem;vertical-align:-1px}
.merk-note{display:none}
html.merk .merk-note{display:block;font:600 12px/1.4 var(--mono);color:#fff;background:#c2188f;padding:.35rem .5rem;margin:.4rem 0 .8rem}

@media (max-width:760px){
  :root{--gutter:1.2rem}
  body{font-size:18px}
  .top .wide{gap:.1rem 1.05rem;padding-top:.55rem;padding-bottom:.55rem;font-size:.72rem;letter-spacing:.1em}
  .top .brand{width:100%;margin-right:0;font-size:1.15rem}
  .top .nav-wide{display:none}
  .mockbar{font-size:11px;padding:.25rem var(--gutter);flex-wrap:nowrap;overflow-x:auto}
  .mockbar .mb-desc{display:none}
  .masthead{padding:1.5rem 0 1.8rem}
  .mh{display:block}
  .mh h1{font-size:clamp(2.8rem,12.1vw,5.4rem);margin:1rem 0 1.6rem}
  .hat{font-size:2rem;line-height:1.02}
  .mild{font-size:1.04rem}
  .turn{font-size:1.4rem;margin:1rem 0}
  .def{font-size:1.07rem}
  .mh figure{display:none}
  .entry-section{padding-top:1.5rem;padding-bottom:2rem}
  .entry-grid{grid-template-columns:1fr}
  .entry{padding:1.1rem 0}
  .entry+.entry{border-left:0;border-top:1px solid var(--line2);padding-left:0}
  .entry b{font-size:1.4rem}
  .entry-quote{font-size:1.05rem;margin-top:.5rem}
  .route-more{font-size:12px;gap:.5rem 1.2rem}
  .feature{grid-template-columns:1fr;gap:1.3rem;padding-top:1.8rem;padding-bottom:2rem}
  .feature img{height:210px;object-position:center 42%}
  .feature h2{font-size:2.6rem;max-width:14ch}
  .feature p{font-size:1.12rem}
  .section-heading h2{font-size:1.75rem}
  .try-one{grid-template-columns:1fr;gap:1.4rem;padding-top:1.7rem;padding-bottom:1.7rem}
  .library{padding-top:2rem;padding-bottom:2rem}
  .library-links{grid-template-columns:1fr 1fr;gap:0 1.2rem}
  .library-links a{font-size:.95rem}
  .library-links a small{display:none}
  .prose{font-size:1.2rem;line-height:1.6}
  .reading-next{grid-template-columns:1fr;gap:1.2rem}
  .article{padding-top:1.7rem}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}