/* ============================================================================
   Kveo — offentleg nettstad: «Varm» (lyst + mørkt)
   ----------------------------------------------------------------------------
   Erstattar Nocturne på dei offentlege sidene (sjå views/public/_head.ejs).
   Lyst og mørkt tema; følgjer systemet som standard (tema-veljar i menyen).
   Lastast ETTER system.css og style.css. Same prinsipp som Nocturne: fila
   overstyrer berre tokenverdiane frå system.css, pluss nokre få flate-
   spesifikke justeringar som gjer sida mjukare og mindre «teknisk":
   krem/sand-flater, terrakotta-aksent, serif-overskrifter, runde former,
   fylte knappar, ingen mono-etikettar, prikkrutenett eller lyskjegle.

   nocturne.css står att urørt (Kveo ID på yirmi-id-greina kopierer tokena derifrå).
   Motion polish-blokka nedst er flytta hit frå nocturne.css (test/motion.test.js).
   Kontrast (lys): --ink 15.3:1, --ink-2 10.9:1, --muted 6.6:1, --faint 5.5:1
   på --canvas; --accent-ink 6.5:1; --on-accent på --accent 4.6:1.
   ========================================================================= */

/* Skriftene (Fraunces, Nunito Sans) er sjølv-hosta: sjå /css/fonts.css, lasta frå _head.ejs.
   Ikkje legg til ein @import frå Google Fonts - han ville lasta før samtykke og bryt CSP-en. */

:root, :root[data-theme="light"] {
  color-scheme: light;

  --canvas:    #fbf6ef;
  --sunk:      #f4ece1;
  --surface:   #fffdf9;
  --surface-2: #f6eee3;
  --surface-3: #f0e4d4;
  --plate:     #f3e6d6;

  --ink:   #2a1c13;
  --ink-2: #47342a;
  --muted: #6a5446;
  --faint: #78604f;

  --line:        #e7d9c8;
  --line-strong: #a38a76;

  --accent:       #c4511f;
  --accent-hover: #a8431a;
  --accent-ink:   #983c15;
  --accent-soft:  #fbe6d8;
  --accent-line:  #eab89a;
  --on-accent:    #ffffff;
  --glow:         rgba(232, 140, 80, .22);
  --glow-a:       rgba(240, 160, 100, .35);
  --glow-b:       rgba(232, 196, 140, .32);
  --btn-shadow:   0 8px 20px -10px rgba(196, 81, 31, .6);
  --nav-shadow:   0 10px 28px -14px rgba(74, 44, 20, .28);

  --shadow-sm: 0 1px 2px rgba(74, 44, 20, .06);
  --shadow-md: 0 18px 40px -24px rgba(74, 44, 20, .28);
  --shadow-lg: 0 30px 70px -34px rgba(74, 44, 20, .34);
}

/* Mørkt: varm espresso i staden for kald grafitt. Same token-namn, så
   alle reglane under fungerer uendra. Duplisert som i system.css:
   éin blokk for systemvalet, éin for eksplisitt val i tema-veljaren.
   Kontrast (mørk): --ink 15.8:1, --ink-2 12.5:1, --muted 7.9:1, --faint 6.6:1
   på --canvas; --accent-ink 8.8:1; --on-accent på --accent 6.8:1. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas:#1a1410; --sunk:#15100d; --surface:#221a15; --surface-2:#271f19; --surface-3:#30261e; --plate:#2c231c;
    --ink:#f6ede3; --ink-2:#e2d3c4; --muted:#bba796; --faint:#ad9886;
    --line:#3d3128; --line-strong:#8c7664;
    --accent:#e8804a; --accent-hover:#f09a68; --accent-ink:#f2a173;
    --accent-soft:#3a2418; --accent-line:#7a4528; --on-accent:#1f0f06;
    --glow:rgba(232, 128, 74, .18); --glow-a:rgba(232, 128, 74, .16); --glow-b:rgba(200, 150, 90, .10);
    --btn-shadow:0 8px 22px -10px rgba(232, 128, 74, .45);
    --nav-shadow:0 10px 28px -14px rgba(0, 0, 0, .75);
    --shadow-sm:0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md:0 18px 42px -24px rgba(0, 0, 0, .7);
    --shadow-lg:0 30px 70px -30px rgba(0, 0, 0, .8);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas:#1a1410; --sunk:#15100d; --surface:#221a15; --surface-2:#271f19; --surface-3:#30261e; --plate:#2c231c;
  --ink:#f6ede3; --ink-2:#e2d3c4; --muted:#bba796; --faint:#ad9886;
  --line:#3d3128; --line-strong:#8c7664;
  --accent:#e8804a; --accent-hover:#f09a68; --accent-ink:#f2a173;
  --accent-soft:#3a2418; --accent-line:#7a4528; --on-accent:#1f0f06;
  --glow:rgba(232, 128, 74, .18); --glow-a:rgba(232, 128, 74, .16); --glow-b:rgba(200, 150, 90, .10);
  --btn-shadow:0 8px 22px -10px rgba(232, 128, 74, .45);
  --nav-shadow:0 10px 28px -14px rgba(0, 0, 0, .75);
  --shadow-sm:0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md:0 18px 42px -24px rgba(0, 0, 0, .7);
  --shadow-lg:0 30px 70px -30px rgba(0, 0, 0, .8);
}

/* Typografi og form — felles for begge tema. */
:root {
  --font:       'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono:  var(--font);

  --r-xs: 10px; --r-sm: 14px; --r-md: 22px; --r-lg: 32px;
}

body { background: var(--canvas); color: var(--ink); font-family: var(--font); }

/* — overskrifter i varm serif, med mjukare sporing enn den tette groteskane. */
h1, h2, h3,
.studio-intro h1,
.studio-section-intro h2, .studio-section-bar h2,
.project-info h3, .service-disclosures h3, .journal-list h3,
.studio-contact h2, .page-hero h1, .portfolio-card .portfolio-title,
.studio-timeline h3 {
  font-family: var(--font-serif);
  letter-spacing: -.015em;
  font-weight: 500;
}
.studio-intro h1 {
  font-size: clamp(3rem, 7vw, 6.25rem);
  line-height: 1.04;
  letter-spacing: -.025em;
}
.studio-intro h1 em {
  font-style: italic;
  color: var(--accent-ink);
  font-weight: 400;
}
.studio-hero-grid { grid-template-columns: minmax(0, 1fr); }
.studio-intro { max-width: 980px; }
.studio-lede { font-size: 1.1875rem; color: var(--ink-2); }

/* — skrivemarkøren: tynn, mjuk terrakotta-strek (overskrifta roterer). */
.type-caret { width: .045em; background: var(--accent); border-radius: 2px; }

/* — etikettar: vanleg tekst i aksentfarge, ikkje mono/versalar. */
.studio-eyebrow,
.disclosure-number, .directory-number, .directory-caption,
.project-window-bar, .portfolio-kind, .blog-date,
.footer-col-h, .hero-eye, .section-eye, .cta-eye, .section-tag {
  font-family: var(--font);
  text-transform: none;
  letter-spacing: .01em;
  font-weight: 700;
  font-size: .875rem;
}
.studio-eyebrow { color: var(--accent-ink); }
.studio-intro .studio-eyebrow span { color: var(--muted); font-weight: 600; border-left-color: var(--accent-line); }
.disclosure-number { color: var(--accent-ink); font-family: var(--font-serif); font-style: italic; font-size: 1.125rem; font-weight: 500; }

/* — knappar: fylte, runde, varme. */
.btn-primary, .nav-cta, .wizard-next {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  border-radius: var(--r-pill);
  font-weight: 700;
  box-shadow: var(--btn-shadow);
}
.btn-primary:hover:not(:disabled), .nav-cta:hover, .wizard-next:not(:disabled):hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
}
.studio-actions .btn-primary { border-radius: var(--r-pill); font-weight: 700; padding-inline: 28px; gap: 14px; }
.nav-cta { border-radius: var(--r-pill); }
.studio-text-link { text-decoration-color: var(--accent-line); }
.studio-text-link:hover { text-decoration-color: var(--accent); color: var(--accent-ink); }

/* — navigasjon */
.nav-logo img { height: 36px; }
.nav-links a.active { text-decoration-color: var(--accent); }

/* — hero: mjuk, varm solnedgangsglød i staden for prikkrutenett og lyskjegle. */
.studio-hero { position: relative; overflow: hidden; }
.studio-hero::before {
  content: '';
  position: absolute; z-index: 0; pointer-events: none;
  width: 720px; height: 720px; right: -220px; top: -260px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-a), transparent 68%);
}
.studio-hero::after {
  content: '';
  position: absolute; z-index: 0; pointer-events: none;
  width: 560px; height: 560px; left: -240px; bottom: -280px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-b), transparent 70%);
}
.studio-hero-grid, .studio-bottom { position: relative; z-index: 1; }
.studio-bottom { border-color: var(--line); }

/* — ticker: rolig, kursiv serif i små bokstavar i staden for versalar. */
.hero-marquee { position: relative; z-index: 1; background: var(--surface-3); border-color: transparent; }
.marquee-track span {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: lowercase;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ink-2);
}
.marquee-track .marquee-dot { color: var(--accent); font-style: normal; }

/* — tenester */
.service-disclosures summary:hover h3 { color: var(--accent-ink); }

/* — arbeid: kort i staden for «vindauge», ingen lyskjegle. */
.studio-work { background: var(--surface-2); }
.project-preview {
  border-radius: var(--r-lg);
  border-color: var(--line);
  padding: 22px;
  box-shadow: var(--shadow-md);
}
.project-preview::before { display: none; }
.project-window-bar { border-bottom: 0; padding-bottom: 6px; font-weight: 600; }
.project-art { border-radius: var(--r-md); background: var(--plate); }

/* — prosess: steg alltid synlege, varme tal-sirklar. */
.studio-timeline li { opacity: 1; }
.timeline-number {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-ink);
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
}
.studio-timeline li:not(:last-child)::before { background: var(--accent-line); }

/* — kundeord: mjuke kort med stort sitatteikn. */
.studio-quotes { background: var(--canvas); padding-block: 88px; }
.studio-quote-grid figure {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}
.studio-quote-grid figure + figure { border-top: 1px solid var(--line); }
.studio-quote-grid blockquote {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  letter-spacing: 0;
  line-height: 1.5;
}
.studio-quote-grid figcaption strong { color: var(--accent-ink); }

/* — blogg */
.journal-list a:hover h3 { color: var(--accent-ink); }

/* — kontakt-CTA: varm terrakotta-flate. */
.studio-contact {
  background: var(--surface-3);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.studio-contact-row { border-bottom-color: var(--accent-line); }
.contact-arrow {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.contact-arrow:hover { background: var(--accent-hover); color: var(--on-accent); }

/* — undersider */
.page-hero { background: var(--canvas); }
.portfolio-card .portfolio-visual { border-radius: var(--r-lg); }

/* — skjema og kort på undersidene får rundare hjørne. */
input, textarea, select { border-radius: var(--r-sm); }

@media (max-width: 860px) {
  .studio-intro h1 { font-size: clamp(2.5rem, 11vw, 3.75rem); }
  .studio-hero::before { width: 420px; height: 420px; right: -180px; top: -160px; }
  .studio-quote-grid figure { padding: 24px; }
  .studio-quote-grid figure + figure { padding-top: 24px; }
}

/* ============================================================================
   Motion polish (progressive enhancement; /js/motion.js, site.js, cookie-consent.js)
   Alt er CSS-først og animerer berre opacity/translate/transform. Ingenting er skjult
   utan at motion.js først har lagt på .rv, så sidene er fulle av innhald utan JS.
   Heile blokka ligg bak prefers-reduced-motion: no-preference.
   ========================================================================= */

/* Header: skuggen blir tona inn (opacity på eit pseudo-element, ingen layout-endring). */
.navbar::after {
  content: '';
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  box-shadow: var(--nav-shadow);
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .navbar::after { transition: opacity .25s var(--ease); }
  .navbar.is-scrolled::after { opacity: 1; }

  /* Scroll-avdekking: berre element under folda får .rv (sett av motion.js). */
  .rv {
    opacity: 0;
    translate: 0 18px;
    transition: opacity .6s var(--ease) var(--rv-d, 0ms), translate .6s var(--ease) var(--rv-d, 0ms);
    will-change: opacity, translate;
  }
  .rv.rv-in { opacity: 1; translate: 0 0; }

  /* Knappar og kontrollar: trykk-respons. */
  .btn-primary, .btn-secondary, .btn-ghost, .nav-cta, .wizard-next, .wizard-back,
  .chip, .type-card, .theme-toggle, .hamburger, .contact-arrow, .cc-close {
    transition-property: background-color, border-color, color, transform, opacity;
    transition-duration: .16s;
    transition-timing-function: var(--ease);
  }
  .btn-primary:active:not(:disabled), .btn-secondary:active:not(:disabled), .btn-ghost:active:not(:disabled),
  .nav-cta:active, .wizard-next:active:not(:disabled), .wizard-back:active:not(:disabled),
  .chip:active, .type-card:active, .theme-toggle:active, .hamburger:active, .contact-arrow:active {
    transform: scale(.97);
  }
  .tenester-card:active, .portfolio-card:active, .blog-card:active, .y-card:active { transform: translateY(-1px); }

  @media (hover: hover) {
    .btn-primary:hover:not(:disabled), .nav-cta:hover, .wizard-next:not(:disabled):hover { transform: translateY(-1px); }
    .btn-primary:active:not(:disabled), .nav-cta:active, .wizard-next:active:not(:disabled) { transform: scale(.97); }
    .project-preview { transition: transform .25s var(--ease), border-color .25s var(--ease); }
    .studio-project:hover .project-preview { transform: translateY(-3px); border-color: var(--accent-line); }
    .contact-arrow:hover { transform: scale(1.05); }
  }

  /* Lenker og navigasjon. */
  .footer-col a, .studio-text-link, .journal-list a, .journal-list h3, .journal-list a > span,
  .talk-line-link, .nav-phone, .lang-btn, .portfolio-link, .read-more, .blog-back, .studio-contact-bottom a {
    transition: color .16s var(--ease), text-decoration-color .16s var(--ease), translate .2s var(--ease), background-color .16s var(--ease);
  }
  .journal-list a > span[aria-hidden] { display: inline-block; }
  .journal-list a:hover > span[aria-hidden], .journal-list a:focus-visible > span[aria-hidden] { translate: 4px -4px; color: var(--accent-ink); }
  .journal-list a:hover h3, .journal-list a:focus-visible h3 { color: var(--accent-ink); }
  .portfolio-link:hover, .read-more:hover { translate: 3px 0; }
  .studio-text-link:hover { color: var(--accent-ink); }

  /* Bilete og illustrasjonar: lett zoom ved hover. */
  .portfolio-visual { overflow: hidden; }
  .portfolio-visual img, .project-art svg { transition: transform .5s var(--ease); }
  @media (hover: hover) {
    .portfolio-card:hover .portfolio-visual img, .studio-project:hover .project-art svg { transform: scale(1.04); }
  }

  /* Akkordion: plussen blir til minus med ei mjuk rotasjon, innhaldet tonar inn. */
  .disclosure-symbol::before, .disclosure-symbol::after { transition: transform .25s var(--ease), opacity .2s var(--ease); }
  .service-disclosures details[open] .disclosure-symbol::after { display: block; transform: rotate(0deg); }
  .service-disclosures details[open] .disclosure-content { animation: disc-in .32s var(--ease); }
  .service-disclosures summary h3 { transition: translate .2s var(--ease), color .16s var(--ease); }
  .service-disclosures summary:hover h3 { translate: 4px 0; }
  @keyframes disc-in { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }

  /* Mobilmeny: tonar og glir inn/ut (site.js legg på .closing før .open blir fjerna). */
  @media (max-width: 860px) {
    .nav-links.open, .nav-right.open { animation: menu-in .22s var(--ease); }
    .nav-links.closing, .nav-right.closing { animation: menu-out .18s var(--ease) forwards; }
  }
  @keyframes menu-in { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
  @keyframes menu-out { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -8px; } }

  /* Samtykkebanner: inn (finst frå før), ut, og mjuk overgang banner -> innstillingar. */
  .cc-backdrop { animation: cc-fade .2s var(--ease); }
  .cc.cc-leaving .cc-dialog { animation: cc-out .18s var(--ease) forwards; }
  .cc.cc-leaving .cc-backdrop { animation: cc-fade-out .18s var(--ease) forwards; }
  .cc-view-settings:not([hidden]) { animation: cc-in .2s var(--ease); }
  @keyframes cc-out { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 8px; } }
  @keyframes cc-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes cc-fade-out { from { opacity: 1; } to { opacity: 0; } }

  /* Skjema: etiketten får aksentfarge medan feltet er i fokus; stega i veiviseren tonar inn. */
  .field label { transition: color .16s var(--ease); }
  .field:focus-within label { color: var(--accent-ink); }
  .wizard-wrap.is-stepping [id^="step-"] { animation: step-in .3s var(--ease); }
  @keyframes step-in { from { opacity: 0; translate: 12px 0; } to { opacity: 1; translate: 0 0; } }
}