/* STUDIO SEM · delad huvudnavigation
 *
 * Wordmark till vanster, lankarna staplade i TVA kolumner till hoger, som i
 * forlagan. En rad med fyra lankar tar hela hogerkanten i ansprak; tva korta
 * kolumner tar halva bredden och laser som ett block bredvid wordmarken.
 *
 * Egen fil av samma skal som footer.css: de tre sidorna kor olika stilmallar
 * (v2.css, services-v2.css, about.css), och en meny som ska se likadan ut
 * overallt far inte finnas i tre kopior som glider isar.
 *
 * LANKAS SIST i varje <head>, efter sidans eget ark.
 *
 * Filen satter LAYOUT och TYPOGRAFI, aldrig farg. Sidhuvudena star mot olika
 * bakgrunder (ink pa startsidan, paper pa tjanstesidan, foto pa about), och
 * fargen hor darfor hemma i respektive ark. Darfor bar <nav> bade sin gamla
 * klass och .site-nav: de gamla fargreglerna fortsatter galla.
 */

/* ---------- logotypen ----------
 *
 * Logotypen ar hela firmanamnet skrivet i "The Something Script", skriptypsnittet
 * ur Canva-decket. Det ar ett Canva-typsnitt utan webblicens, sa namnet ligger som
 * VEKTOR i assets/img/sem-wordmark.svg. Konturerna ar uttagna ur den inbaddade
 * teckensnittsdelmangden i deckets PDF-export, alltsa exakta bokstavsformer och
 * exakt samma spärrning som Canva satter, inte en efterliknande webbfont och inte
 * en kalkerad bild.
 *
 * Vill du andra ordet i logotypen gar det inte att skriva om har: texten ar
 * konturer. Da far en ny SVG tas ut ur Canva pa nytt.
 *
 * Den ritas som CSS-mask och inte som <img> med flit: sidhuvudena star mot olika
 * bakgrunder (svart pa startsidan, cream pa tjanstesidan, foto pa about) och
 * logotypen maste anta sidans fargton. currentColor inuti en <img> loser mot
 * bildens eget dokument, alltid svart, sa den vagen hade kravt en fil per farg.
 * Med mask ar det background-color som gor jobbet, och den arver.
 *
 * Sjalva ordet STUDIO SEM star kvar i markup som .sr-only. Utan det hade lanken
 * saknat tillgangligt namn, och namnet ska finnas i kallan aven nar det ritas
 * som grafik.
 *
 * Hor hemma har och inte i footer.css: logotypen sitter bade i sidhuvudet och i
 * sidfoten, och bada bar .wordmark. */
.wordmark {
  display: inline-flex;
  align-items: center;
}

.wordmark .sem-mark {
  /* Height in em so the logo follows the wordmark's font-size. Width follows from
     the SVG's own ratio. NEVER set both height and width: they stop following each
     other the moment a new SVG is exported at a different width.

     The ratio is 1752.84 / 189.16, taken from the viewBox of the current
     sem-wordmark.svg. It said 489.7 / 92.9 until 2026-08-05, which belonged to the
     retired script logo; with mask-size: contain that meant the box was nearly twice
     as tall as the artwork and the logo rendered smaller than the box it sat in. If
     the logo is ever re-exported, read the viewBox and change this with it. */
  height: 2.4em;
  aspect-ratio: 1752.84 / 189.16;
  width: auto;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url('img/sem-wordmark.svg') left center / contain no-repeat;
  mask: url('img/sem-wordmark.svg') left center / contain no-repeat;
}

/* Pa smala skarmar delar logotypen rad med menyn. Full bredd tar da hela
   raden, sa hojden gar ned ett steg. */
@media (max-width: 620px) {
  .wordmark .sem-mark { height: 1.95em; }
}

/* Finns redan i v2.css, men bara dar. Logotypen sitter pa alla tre sidorna och
   behover den overallt. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- sidhuvudets matt ----------
 *
 * De tre sidhuvudena satte sina egna varden och glred isar: startsidan hade
 * padding 20px och wordmark 1.05rem, tjanstesidan och about hade 26px och
 * 1.15rem. Foljden var att menyn hoppade sex pixlar nedat nar man gick fran
 * Home till Services, vilket syns direkt eftersom menyn star pa samma stalle i
 * ogat pa bada sidorna.
 *
 * Matten hor darfor hemma har, i den delade filen, av exakt samma skal som
 * layouten ovanfor: en meny som ska sta pa samma stalle overallt far inte ha
 * tre uppsattningar matt som ingen jamfor.
 *
 * FARG ar fortfarande sidans egen sak, se filhuvudet. Bara padding och grad.
 *
 * .v2 star med i tjanstesidans selektorer for att matcha specificiteten i
 * services-v2.css (.v2 .jc-head .wordmark). Utan den vinner den gamla regeln
 * trots att den har filen lanksas sist. */
.v2-head,
.v2 .jc-head,
.about-head {
  padding: 26px 0;
}
.v2-head .wordmark,
.v2 .jc-head .wordmark,
.about-head .wordmark {
  font-size: 1.15rem;
}

/* Samma steg ned pa smala skarmar pa alla tre. Tjanstesidan och about hade
   redan den har regeln var for sig, startsidan saknade den helt. */
@media (max-width: 620px) {
  .v2-head .wordmark,
  .v2 .jc-head .wordmark,
  .about-head .wordmark {
    font-size: 1rem;
    letter-spacing: .2em;
  }
}

.site-nav {
  display: flex;
  align-items: flex-start;
  /* Forlagan halller ett brett glapp mellan kolumnerna, ungefar en fjardedel
     av sidbredden i deras fall. */
  gap: clamp(2.4rem, 6vw, 7rem);
  flex-wrap: nowrap;
}

.site-nav .nav-col {
  display: grid;
  /* Nastan inget mellan raderna: forlagan satter dem tatt, det ar det som gor
     kolumnen till ett block i stallet for en lista. */
  gap: .1rem;
  align-content: start;
}

/* Grotesk och inte mono. Forsta forsoket satte lankarna i Courier pa .68rem
   med .16em sparrning, alltsa smatt, glest och skrivmaskin. Forlagan kor rak
   grotesk i ungefar 20px, versaler, UTAN sparrning och med tat radhojd. Det ar
   dar hela skillnaden satt. */
.site-nav a {
  font-family: var(--text);
  font-size: clamp(.95rem, 1.3vw, 1.22rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.18;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  /* De gamla arken satte en understruken bottenkant pa hover. Med staplade
     lankar hamnar den mitt i kolumnen, sa den bors bort har. */
  border-bottom: 0;
  padding-bottom: 0;
}

/* Under 620px blir tva kolumner smalare an lankarna sjalva. Da faller de
   ihop till en enda rad som far bryta. */
@media (max-width: 620px) {
  .site-nav {
    flex-wrap: wrap;
    gap: .4rem 1.2rem;
  }
  .site-nav .nav-col {
    display: contents;
  }
  .site-nav a { font-size: .82rem; }
}

/* ---------------------------------------------------------------------------
   The nav must sit in exactly the same place on all three pages.

   Two things were moving it.

   1. THE SCROLLBAR. No stylesheet reserved room for it, so a page tall enough
      to scroll lost about 15px of viewport width to the scrollbar and a page
      that fitted did not. Everything centred, including the nav, therefore
      shifted sideways between pages. `scrollbar-gutter: stable` reserves the
      space on every page whether it is needed or not, so the centre line stops
      moving. This is the fix for the jump Noras reported 2026-08-02.

   2. THE HEADER PADDING, which was 20px on the home page and 26px on the other
      two. Already normalised further up this file.
   --------------------------------------------------------------------------- */
html {
  scrollbar-gutter: stable;
}

/* ===========================================================================
   THE HEADER, FOR ALL THREE PAGES. A MASTHEAD, NOT A BAR.

   Rebuilt 2026-08-05 after Noras sent coastalcollectivemarketing.com as the
   reference: the wordmark runs the full width of the page, and the nav sits
   underneath it, spread evenly across the same width. It is a masthead, the way a
   newspaper sets one, not a logo with links beside it.

   Two consequences worth stating, because both are deliberate:

   1. THE HEADER NO LONGER STICKS. A full-bleed wordmark is around 150px tall at
      desktop width, and pinning that to the top would eat a fifth of the viewport
      on every scroll. The reference does not stick either. The trade is real: the
      old sticky header kept the CTA one glance away on a long page. If that turns
      out to matter more, the fix is a second compact bar that appears on scroll,
      not making this one sticky.

   2. IT CHANGES ON ALL THREE PAGES AT ONCE, which is the entire point of this file.
      Every page used to style its own header and they drifted apart four times in
      one afternoon. STRUCTURE lives here. COLOUR stays in each page's stylesheet,
      because the pages genuinely differ.

   Do not add position, padding, gap or font-size to a page's own header rule.
   =========================================================================== */
.v2-head,
.v2 .jc-head,
.about-head {
  position: relative;
  z-index: 40;
  padding: 24px 0 20px;
}

.v2-head .wrap,
.v2 .jc-head .wrap,
.about-head .wrap {
  display: block;
}

/* The wordmark is the masthead. It spans the measure, so it is sized by WIDTH here
   and the height follows from the ratio, the opposite of everywhere else. */
.v2-head .wordmark,
.v2 .jc-head .wordmark,
.about-head .wordmark {
  display: block;
  width: 100%;
  text-decoration: none;
}
.v2-head .wordmark .sem-mark,
.v2 .jc-head .wordmark .sem-mark,
.about-head .wordmark .sem-mark {
  display: block;
  /* Sized by HEIGHT and capped. It ran the full width of the page at first, which
     is what the reference does, and Noras cut it back on 2026-08-05: at 1440px the
     logo was 155px tall and the masthead ate the top fifth of every page before a
     word of content. The cap keeps the masthead proportion without the scale.

     Height, not width, so the ratio does the rest. contain rather than a stretched
     mask, so a re-exported SVG at a different width cannot distort it. */
  height: clamp(40px, 4.9vw, 72px);
  /* 96px cap until 2026-08-25. Noras had already cut this once, from full width,
     because the masthead ate the top fifth of every page. The hero became a single
     tall picture with the headline inside it on the same day, and against that the
     96px wordmark competed with the H1 for the first look instead of introducing
     it. The device is hers and unchanged; only the ceiling moved. */
  width: 100%;
  -webkit-mask-size: contain;
  mask-size: contain;
  /* Centred, Noras 2026-08-05. Left-aligned it sat off to one side while the nav
     row underneath spanned the whole measure, and the two did not read as one
     block. Centred, the masthead and the nav share a centre line. */
  -webkit-mask-position: center;
  mask-position: center;
}

/* The nav row: evenly spread across the full width under the wordmark. */
.site-nav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: nowrap;
  margin-top: 18px;
  width: 100%;
}

/* .nav-col is a leftover from the two-column layout. Kept working rather than
   removed from five files: it simply stops being a box and lets its links join
   the row directly. */
.site-nav .nav-col {
  display: contents;
}

/* Cormorant Garamond, the book's detail face, in caps. Not Anton: Anton is the
   display face and the book is explicit that it is used once per page, so spending
   it on five nav links would spend the loudest thing in the identity on the
   quietest part of the page. */
.site-nav a {
  font-family: var(--detail);
  font-size: clamp(.68rem, .82vw, .84rem);
  font-weight: 600;
  letter-spacing: .13em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  /* No border, on any state. v2.css gave the current link an accent-coloured bottom
     border, which worked when the nav was a small block beside the logo. Under a
     masthead it reads as a stray blue line, so the current page is marked by weight
     and the others are stepped back instead. Set with a border shorthand rather than
     border-bottom-color so the page stylesheets cannot put it back. */
  border: 0;
  padding-bottom: 2px;
  opacity: .62;
  transition: opacity .18s ease;
}
.site-nav a:hover,
.site-nav a:focus-visible { opacity: 1; border: 0; }
.site-nav a[aria-current="page"] {
  opacity: 1;
  font-weight: 700;
  border: 0;
}

/* First and last sit flush with the margins, so the row reads as justified to the
   same measure as the wordmark rather than as a centred group. */
.site-nav a:first-child { margin-left: 0; }
.site-nav a:last-child { margin-right: 0; }

@media (max-width: 860px) {
  .v2-head,
  .v2 .jc-head,
  .about-head { padding: 22px 0 16px; }
  .site-nav { gap: .6rem; }
}

/* Below this the five links cannot share one line without shrinking past legible.
   They wrap into a centred block under the wordmark instead. */
@media (max-width: 620px) {
  .site-nav {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .5rem 1.4rem;
    margin-top: 12px;
  }
  .site-nav a { font-size: .72rem; letter-spacing: .1em; }
}