/* parc.studio — uppmätta tokens. Allt här är mätt live 2026-08-31 vid 390x844, 768x1024, 1024x768, 1440x900, 1920x1080 och 2000x900, eller avläst ur originalets egna custom properties (../captured/*.css). */ /* TYPSNITT — Christoffers licensierade Helvetica Now Text, konverterad ur ~/Downloads/Helvetica_Now/1-Helvetica Now Text/ till woff2 2026-09-10. Donorns tre filer (den VARIABLA helvetica-now.woff2, Parc Helvetica Medium och alte-haas-grotesk-bold.woff2) är BORTTAGNA ur repot. De var referens- material och kunde aldrig klareras för klientbruk, och sidan ska deployas. Kostnaden, uppmätt 2026-09-02 och accepterad: donorn körde den variabla filen på vikterna 624/628/674, som ligger mellan Medium och Bold. Statiska instanser kan inte träffa dem. Krom-strängen `CHANEL FW 2025/26` @10px mätte ~110.5 px hos donorn, 105.5 med Text Medium. Fem pixlar smalare krom. Den avvikelsen är dokumenterad i README och ersätter donorns titelbredds-grindar med en egen profil. */ @font-face { font-family: "HN Text"; src: url("fonts/hn-text-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "HN Text"; src: url("fonts/hn-text-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "HN Text"; src: url("fonts/hn-text-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* Rutnätet: 7 kolumner, huvudgap 15. U är originalets egen enhet, avläst ur .shell-wordmark{width:calc((100vw + var(--main-gap))/7)}. Verifierad på pixeln vid 1024, 1440, 1920 och 2000. */ --gap: 15px; --U: calc((100vw + var(--gap)) / 7); /* Sajtens ryggrad. Avläst: --header-line-top: 56vh. */ --line: 56vh; /* Mediakortet i indexkolumnen. Avläst: --media-width:30vw, --aspect-ratio-media-card:1.66, margin-left:40vw, gap 16. ÅTERSTÄLLT 2026-09-15 efter ett felläst uppdrag: "olika storlekar" gällde introt, inte korten. Korten är referensens (parc.studio/projects) exakt, bara utan rundade hörn. */ --card-w: 30vw; --card-ar: 1.66; --card-h: calc(var(--card-w) / var(--card-ar)); --card-gap: 16px; --card-left: 40vw; --card-top: calc(var(--line) - var(--card-h) / 2); /* Exhibitions-titlar: årtal i egen tabular-kolumn (struktur kopierad från R1 r1-rummet, 2026-09-16). R1 = 30px vid 12px text; R3:s UI-text är 10px, så kolumnen skalas proportionellt till 25px (Christoffers val). Gapet mot namnet hålls på R1:s 10px. */ --ex-yr-w: 25px; --ex-yr-gap: 10px; /* Titelraden. Uppmätt radpitch 16.125 = versalhöjd 7.13 + gap 9. */ --title-gap: 9px; --title-pitch: 16.125px; /* SPACING-TOKENS (2026-09-15, Christoffer: strikt rutnät, inga råa värden). Parcs egen skala (DESIGN.md H), bara de sju i bruk. Allt eget (about.css, cv.css, handen.css) får BARA använda dessa, --U, --gap, --title-pitch och --line. Grinden lintar det. */ --space-9: var(--title-gap); --space-15: var(--gap); --space-16: 16px; --space-20: 20px; --space-30: 30px; --space-40: 40px; --space-100: 100px; /* Kolumnspann: n kolumner = n·U − gap. */ --span-1: calc(var(--U) - var(--gap)); --span-2: calc(var(--U) * 2 - var(--gap)); --span-3: calc(var(--U) * 3 - var(--gap)); /* Optisk baslinjekorrektion för about-brödtexten mot ordmärket, samma slag som parcs egna −1.8/−5 px. Enda tillåtna råa pixeln utanför mätvärdena, och den heter något. */ --nudge-about: -4px; /* Introladdaren är en port av alykula.com (inte parcs rutnät): stack 420 px uppmätt × 1.3 = 546 (eget val 2026-09-15). Videon renderas i sin EXAKTA slutstorlek (2026-09-16, Christoffer: "flyttar bara, växer inte"), så den delar --card-w med about-slot och FLIP:en blir en ren positions- flytt. Ersätter det gamla taket min(78vmin,640px). */ --intro-stack: min(75vmin, 546px); --intro-video: var(--card-w); /* Case-ytan */ --case-top: calc(var(--line) + 32.2px); --hero-top: calc(var(--line) - 38.83px); --fade-span: 64.2px; /* uppmätt vid 1440x900 OCH 1920x1080 */ --ink: #000; --paper: #fff; --op-dim: .05; /* vilande titel, info-etikett */ --op-mid: .2; /* hover, inaktiv nav, stjärna, kreditvärde */ --in-out: cubic-bezier(.83, 0, .17, 1); --ease: cubic-bezier(.645, .045, .355, 1); --dur-150: .15s; --dur-300: .3s; --dur-400: .4s; --radius-card: 0; /* rundade horn borttagna sitewide, Christoffer 2026-09-15 */ --radius-media: 0; /* Letter-spacing/vikt AVSIKTLIGT ändrade mot parc:s egna uppmätta värden 2026-09-15 (Christoffer: brödtexten för tight och för fet/svart för att vara läsbar; all text i samma storlek ska ha samma spärr, brödtexten bestämmer). Parc:s original (DESIGN.md G): ui .251px/628, body .25px/500 -- 628 finns dessutom inte i vårt licensierade typsnitt (bara 400/500/ 700, GL21), så webbläsaren gissade fram en vikt vid varje --fw-ui- användning i stället för att rendera en riktig. Nu: EN spärr för båda storlekarna (--ls-ui = --ls-body), båda vikterna pekar på en riktig laddad fil. */ --fs-ui: 10px; --lh-ui: 7.5px; --ls-ui: var(--ls-body); --fw-ui: 500; --fs-body: 13.8px; --lh-body: 16.1px; --ls-body: .4px; --fw-body: 400; --fs-hero: 20px; --lh-hero: 24.15px; --fw-hero: 624; --fs-wordmark: 12.83px; /* About-brödtexten (Christoffer 2026-09-15): samma storlek som ordmärket, och nedtonad mot ordmärkets rena svart. 70 % svart = #4D4D4D, kontrast 7.4:1 mot vitt (WCAG AA kräver 4.5:1 för brödtext; Material lägger brödtext på 60–87 %, rubriker på 100 %). Egen token så det går att vrida. */ --fs-about: var(--fs-wordmark); --ink-body: rgb(0 0 0 / .7); --font-sans: "HN Text", Arial, Helvetica, sans-serif; --font-wordmark: "HN Text", Arial, Helvetica, sans-serif; } /* ---- mobil, uppmätt vid 390x844 och 768x1024 ----------------------------- Mobilen är inte en krympt desktop. Linjen sitter på 50vh - 4.73 px (samma konstant vid båda höjderna) och kortet ligger 10 px OVANFÖR linjen i stället för centrerat på den. */ @media (max-width: 768px) { :root { --card-w: calc(100vw - 20px); --card-gap: 10px; --line: calc(50vh - 4.73px); --card-top: calc(var(--line) - 10px - var(--card-h)); --fs-ui: 12.6px; --lh-ui: 9.45px; --ls-ui: .31626px; --fs-body: 16.5px; --lh-body: 20.1px; --fs-hero: 25px; --lh-hero: 27px; --fw-hero: 491; --fs-wordmark: 17.83px; --title-gap: 11.34px; --title-pitch: 20.29px; --value-pitch: 20.29px; --radius-card: 0; --case-top: calc(50vh + 37px); --mobile-pad: 10px; --mobile-bar-h: 82px; } } @media (max-width: 768px) and (min-width: 641px) { :root { --fade-span: 407.8px; } } @media (max-width: 640px) { :root { --fade-span: 293.5px; } }