/* STUDIO SEM · about.html
 *
 * Layouten är en strukturkopia av jadandco.com/about, band för band:
 *   1. foto i full bredd, sidhuvudet ligger ovanpå det utan egen bakgrund
 *   2. ljust band: liten mono-etikett + ett enda långt serif-stycke
 *   3. hårfin linje
 *   4. berättelsen: foto till vänster, "Our Story" + fyra korta stycken höger,
 *      och en Connect-länk under fotot
 *   5. jättesidfot med wordmarken som grafiskt element
 *
 * Färg, typografi och innehåll är vårt eget. Fyra medvetna avvikelser:
 *   · Jad & Co kör varmbrunt/salvia. Vi kör ink + paper + the accent ur
 *     brand-identity.md. Sidfotens dämpade band finns inte i vår palett, så
 *     --stone nedan är härledd ur --grey och kontrastprövad mot cream.
 *   · Förlagan lägger en PDF-ikon i varje hörn som laddar ned deras
 *     prislista. Vi har ingen sådan PDF, och en ikon som inte gör något är
 *     värre än ingen ikon.
 *   · Bilderna är suddade med flit, se .slot nedan. Vi har inget porträtt av
 *     er två och inget eget miljöfoto ännu.
 *   · Inga em-dash någonstans i copyn (brand-identity.md, hårda regler).
 *     Förlagan använder dem i varje stycke; vi löser samma paus med komma
 *     och kolon.
 *
 * Fristående med flit: filen importerar varken styles.css eller
 * services-v2.css. Sidhuvudet och sidfoten liknar tjänstesidans version 2,
 * men den filen ska raderas så fort ni valt tjänstesideversion, och en sida
 * som ligger kvar ska inte dö med den. Dubbleringen är avsiktlig.
 */
/* Page-scoped grid. Palette and type come from tokens.css, loaded first. */
:root {
  --h1-max: 3rem;
  --gutter: 60px;
  --maxw: 1560px;
}



*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--espresso);
  font-family: var(--text);
  /* EB Garamond. Decket satter brodtexten i 300, och 300 ar en
     annan sak an 400 i EB Garamond: den ar markbart luftigare. */
  font-weight: var(--body-weight);
  font-size: var(--body-size);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow {
  font-family: var(--label);
  font-size: .73rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
  color: var(--espresso);
}

/* ---------- bildplatser ----------
   Suddan är inte ett filter över ett färdigt foto, den ÄR beskedet: vi har
   varken porträtt av er två eller eget miljöfoto, så det som ligger här är
   ett vikarierande motiv. Suddat läser det som en reserverad yta i stället
   för som fel bild. scale(1.06) finns bara för att blur annars suger in
   genomskinliga kanter och ger en ljus ram runt bilden.

   När de riktiga fotona finns: ta bort klassen .slot i markupen. Ingenting
   annat behöver ändras. Se assets/img/BILDER.md. */

.frame {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #D9D1C2 0%, #C6BCA9 48%, #B9AE99 100%);
  isolation: isolate;
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.frame.slot img,
.frame.slot video,
.about-hero.slot img,
.about-hero.slot video {
  filter: blur(22px) saturate(.85);
  transform: scale(1.06);
}
/* Heron är bredare än den är hög, så samma suddradie läser svagare där. */
.about-hero.slot img,
.about-hero.slot video { filter: blur(30px) saturate(.85); transform: scale(1.08); }
.slot-label {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  font-family: var(--label);
  font-size: .6rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
  padding: 14px 18px;
}
/* Över heron står etiketten på ett mörkt foto, inte på en ljus gradient. */
.about-hero .slot-label { color: rgba(253, 249, 240,.65); }

/* ---------- 1. hero ----------
   Fotot går ut i kant på alla fyra sidor och sidhuvudet ligger ovanpå det.
   Höjden är ett spann, inte 100vh: en hero som exakt fyller fönstret ser på
   en laptop ut som att sidan tar slut där. */

.about-hero {
  position: relative;
  width: 100%;
  height: clamp(380px, 66vh, 760px);
  /* Bilden nedan skalas 1.08 för att dölja suddkanterna. Utan klippning sticker
     de 8 procenten ut utanför fönstret och hela sidan får vågrät scroll på
     breda skärmar. Mätt: 1498px innehåll i ett 1440px fönster. */
  overflow: hidden;
}
.about-hero img,
.about-hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Skuggan under sidhuvudet. Förlagans wordmark ligger i vitt rakt på ett
   ljust foto och är på gränsen till oläslig. En mjuk toning uppifrån kostar
   ingenting visuellt och gör att navigationen håller oavsett vilket foto som
   till slut hamnar här. */
.about-hero::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 220px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0));
}

/* ---------- sidhuvud ----------
   Ligger ovanpå heron utan egen bakgrund, som i förlagan. Inte sticky: ett
   huvud som ska kunna klistra sig måste byta färg när fotot tar slut, och
   det kräver JS för en sida som ändå bär hela navigationen i sidfoten. */

/* Colour only. Structure is in nav.css, shared with the other two pages.
   This header used to be absolute inside .about-hero, so it floated over the
   image and scrolled away while the other two stayed pinned. It now sits before
   the hero in about.html and behaves like them. */
.about-nav a {
  color: var(--cream);
  text-decoration: none;
  text-underline-offset: 6px;
}
.about-nav a:hover { text-decoration: underline; }
.about-head { background: var(--espresso); color: var(--cream); }
.about-head .wordmark { color: var(--cream); }
.about-head .site-nav a { color: var(--cream); }
.about-nav a[aria-current="page"] { text-decoration: underline; }

/* ---------- 2. påståendet ----------
   Ett enda stycke, satt stort, nästan hela sidbredden. Förlagan låter det stå
   ensamt med mycket luft under, och luften är halva effekten. */

.about-statement {
  padding: 7rem 0 8.5rem;
  border-bottom: 1px solid var(--line);
}
/* Klass, inte `.about-statement p`: etiketten ovanför är också ett <p>, och en
   elementselektor här satte den i the old serif i rubrikstorlek. */
.about-statement .lede {
  font-family: var(--display);
  font-weight: var(--h1-weight);
  font-size: clamp(1.3rem, 2.35vw, 2.3rem);
  line-height: 1.3;
  letter-spacing: -.008em;
  color: var(--espresso);
  /* Ingen läsbredd. Förlagans mening går nästan hela sidbredden och landar på
     tre rader; kapar man den till en bekväm spaltbredd blir det fem rader och
     stycket slutar läsa som ett påstående. */
  max-width: none;
  margin: 0;
}

/* ---------- 3. berättelsen ----------
   Foto till vänster, text till höger. Texten börjar en bit ned, inte i linje
   med fotots överkant: det är den förskjutningen som gör att de två spalterna
   läser som ett uppslag. */

.story {
  padding: 5.5rem 0 6rem;
}
.story .wrap {
  display: grid;
  grid-template-columns: 45% 1fr;
  column-gap: 6%;
  align-items: start;
}
.story-figure { margin: 0; }
.story-figure .frame { aspect-ratio: 5 / 3; }

/* Connect. Förlagan sätter pilen före ordet och håller den i brödtypsnittet,
   inte i vår vanliga mono-pill. */
.connect {
  display: inline-flex;
  align-items: baseline;
  gap: .7rem;
  margin-top: 1.8rem;
  font-size: 1.15rem;
  color: var(--espresso);
  text-decoration: none;
}
.connect .arrow { transition: transform .2s ease; }
.connect:hover { text-decoration: underline; text-underline-offset: 6px; }
.connect:hover .arrow { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  .connect .arrow { transition: none; }
  .connect:hover .arrow { transform: none; }
}

.story-copy { padding-top: 3.2rem; }

/* ---------- 4. avslutet ----------
   Ett tyst band mellan berattelsen och sidfoten. Ligger dar varderingsbandet
   lag fore 2026-08-01.

   Samma .connect som under fotot och ingen fylld knapp: sidan har redan en
   Connect-lank, och tva olika knappformer for samma handling pa samma sida
   laser som tva olika erbjudanden. Linjen ovanfor gor avgransningen, inte en
   egen bakgrundsfarg. */

.about-cta {
  padding: 4.5rem 0 5.5rem;
  border-top: 1px solid var(--line);
}
.about-cta h2 {
  font-family: var(--display);
  font-weight: var(--h1-weight);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--espresso);
  margin: 0 0 .9rem;
}
.about-cta p {
  margin: 0;
  max-width: 56ch;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--espresso);
}
.about-cta .connect { margin-top: 1.6rem; }

@media (max-width: 900px) {
  .about-cta { padding: 3.2rem 0 3.8rem; }
}
.story-copy h1 {
  font-family: var(--display);
  font-weight: var(--h1-weight);
  font-size: clamp(1.9rem, 3.2vw, var(--h1-max));
  line-height: 1.04;
  letter-spacing: -.01em;
  color: var(--espresso);
  margin: 0 0 1.6rem;
}
.story-copy p {
  font-size: .93rem;
  line-height: 1.65;
  max-width: 91ch;
  margin: 0 0 1.15rem;
}
.story-copy p:last-child { margin-bottom: 0; }

/* Sidfoten bor nu i assets/footer.css, delad av alla sidor. Reglerna som
   lag har ar borttagna sa att de inte kan glida isar fran den. */


/* ---------- dragspelet ----------
   Värderingsbandet som bar det här dragspelet flyttades till startsidan
   2026-08-01, och .values-reglerna följde med till v2.css. Reglerna nedan står
   kvar: .acc är inte bunden till det bandet, och nästa sektion på den här
   sidan som behöver ett dragspel ska inte behöva bygga om det. */

.acc details {
  border-top: 1px solid var(--line);
  padding: 1.4rem 0;
}
.acc details:last-of-type { border-bottom: 1px solid var(--line); }

.acc summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  line-height: 1.2;
  color: var(--espresso);
}
/* Safari ritar en egen triangel som inte gar att na med list-style. */
.acc summary::-webkit-details-marker { display: none; }

/* Plus som blir minus: tva streck, det lodrata forsvinner nar raden ar oppen. */
.acc summary::after {
  content: '';
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: .3em;
  background:
    linear-gradient(var(--espresso), var(--espresso)) center/17px 1px no-repeat,
    linear-gradient(var(--espresso), var(--espresso)) center/1px 17px no-repeat;
  transition: transform .25s ease;
}
.acc details[open] summary::after {
  background: linear-gradient(var(--espresso), var(--espresso)) center/17px 1px no-repeat;
  transform: rotate(180deg);
}
/* Understrykning och inte rott. Rubriken ar 18,4px som minst, och rott mot
   cream ar 3,8:1, alltsa under 4,5:1 som kravs for text i den graden. Rott
   duger till rent grafiska element (3:1) men inte har. Samma affordance som
   .about-nav a:hover. */
.acc summary:hover { text-decoration: underline; text-underline-offset: 6px; }

.acc details p {
  margin: .9rem 0 0;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--espresso);
  max-width: 62ch;
}

/* ---------- responsivt ---------- */

@media (max-width: 1100px) {
  :root { --gutter: 40px; }
  .story .wrap { grid-template-columns: 1fr; row-gap: 2.8rem; }
  .story-figure .frame { aspect-ratio: 3 / 2; }
  .story-copy { padding-top: 0; }
}

@media (max-width: 860px) {
  :root { --gutter: 24px; }
  body { font-size: 16px; }
  .about-hero { height: clamp(320px, 52vh, 520px); }
  /* Nav spacing is shared, see .site-nav in nav.css. Removed 2026-08-02. */
  .about-statement { padding: 4rem 0 4.5rem; }
  .story { padding: 3.5rem 0 4rem; }
}

/* Wordmark och fyra navlänkar på en rad går inte ihop under ~620px: raden blir
   bredare än skärmen och drar hela dokumentet med sig i sidled. Här staplas de
   i stället, och navigationen får bryta på flera rader. */
@media (max-width: 620px) {
  /* Nav spacing is shared, see .site-nav in nav.css. Removed 2026-08-02. */
  .about-hero::after { height: 260px; }
}

/* ---------- rörelse ----------
   Klassen .reveal sätts av assets/reveal.js först när JS kör, så utan JS syns
   allt direkt i stället för att sidan blir tom. */

/* Langre och mjukare an forut: 18px pa .7s las som att nagot snappade pa
   plats. 34px pa 1.05s med en kurva som bromsar sent las som att sidan andas.
   Det ar hela skillnaden mot referensen, som inte kapar scrollen alls utan bara
   later saker stiga in langsamt. */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1.05s cubic-bezier(.16,.8,.28,1),
              transform 1.05s cubic-bezier(.16,.8,.28,1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* Riktningar. Sätts med data-reveal i markupen, som referensens revealFromTop
   och revealFromRight. Utan attribut stiger elementet underifran som forut. */
.reveal[data-reveal="right"] { transform: translateX(46px); }
.reveal[data-reveal="left"]  { transform: translateX(-46px); }
.reveal[data-reveal="top"]   { transform: translateY(-30px); }
.reveal[data-reveal="scale"] { transform: scale(.94); }
.reveal[data-reveal].is-in   { transform: none; }

/* Barn efter varandra i stallet for allt pa en gang. Steget ar litet med flit:
   over ungefar 90ms borjar det kannas som att sidan laddar segt. */
.reveal-seq > *      { transition-delay: 0ms; }
.reveal-seq > *:nth-child(2) { transition-delay: 70ms; }
.reveal-seq > *:nth-child(3) { transition-delay: 140ms; }
.reveal-seq > *:nth-child(4) { transition-delay: 210ms; }
.reveal-seq > *:nth-child(5) { transition-delay: 280ms; }
.reveal-seq > *:nth-child(n+6) { transition-delay: 350ms; }

/* Parallax. Elementet flyttas av assets/reveal.js via --par, som ar rena
   pixlar. Egen variabel och inte transform direkt, sa att .reveal och parallax
   kan sitta pa samma element utan att skriva over varandra. */
[data-parallax] { will-change: transform; }
[data-parallax] > img,
[data-parallax] > video {
  transform: translate3d(0, var(--par, 0px), 0) scale(1.12);
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- tillgänglighet ---------- */

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.dark a:focus-visible,
.about-hero a:focus-visible,
.v2-foot a:focus-visible { outline-color: var(--accent-hover); }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 100;
  background: var(--cream); color: var(--espresso);
  padding: .7rem 1rem; text-decoration: none;
}