/* univers.css, the design system for nine.film. One file, one set of decisions. * * HOW THIS IS BUILT, AND WHY IT LOOKS THE WAY IT DOES. * * 1. ONE TYPEFACE FAMILY, TWO REGISTERS. Instrument Serif for anything that speaks: titles, numbers, * pull quotes. Instrument Sans for anything that explains: body, labels, interfaces. Nothing else, * ever. A page that mixes five faces looks like a page that could not decide. * * 2. A REAL SCALE, NOT A SET OF GUESSES. Ten type sizes and ten spacing steps, all defined once, all * used from the names below. The rhythm of a page comes from those two scales being obeyed, which is * the whole difference between a designed page and a page with things on it. * * 3. BLACK IS THE MATERIAL, NOT THE THEME. The ground is #08090A, not pure black, so white text sits on * it without vibrating. Everything else is white at four opacities: full for what you must read, * 72% for what you should read, 46% for what you may read, 26% for rules and edges. No fourth grey, * no shadow, no gradient. * * 4. ONE ACCENT, AND IT BELONGS TO THE VISITOR. --accent is white until somebody's website gives the * page a colour. Every page wears the brand of the person reading it, and goes back to monochrome * the moment they ask it to. That is the product's whole idea expressed in CSS. * * 5. SPACE IS THE LUXURY. Sections are separated by 8rem on desktop, 4rem on a phone. Nothing is * crowded, because crowding is what cheap looks like. When in doubt, this file adds space rather * than a border. * * 6. ONE AXIS ON A READING PAGE. See THE READING AXIS below. Everything a reader's eye lands on, in the * order they land on it, starts on the same left edge. Centred is a ceremony and there are exactly * two of them on a reading page: the claim at the top, and the closing call at the bottom. */ /* the friendly faces (see THE FRIENDLY LOOK at the end of this file) */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Figtree:wght@400;500;600;700;800&display=swap'); :root{ /* ── the ground, and the whites that sit on it ──────────────────────────────────────────────── */ /* MEASURED, AND THE OLD PAIR WAS GLARE RATHER THAN CONTRAST. #0b0b0c under #f7f3ea is 18.9:1. The floor for body text is 4.5:1, so the site was running at four times the requirement, which is not "very readable": it is a white line hanging in a void with no surface behind it. Every dark interface that reads as calm rather than as a warning sits between 10 and 14, and every one of them puts its ground on a real colour instead of on nothing. It also broke this project's own brand rules, which ban a black background outright, beside cream and beige. The site had been in breach since it was built. #14161D is a deep cool graphite: dark enough to still be a dark site, light enough to read as a surface that light is falling off, and carrying enough blue to be a decision rather than a default. The owner's own recorded verdict on the studio interface was "cool graphite dark". */ --bg:#14161D; /* a ground with a colour in it, not the absence of one */ --flate:#1D202A; /* far enough above the ground that elevation is visible */ --kant:rgba(237,239,244,.10); /* every rule and border on the site: a cool hairline */ --kant2:rgba(237,239,244,.18); /* THE TWO MUTED WHITES WERE BELOW THE FLOOR, and that is a measurement rather than an impression. MEASURED 17.09.2026 on the rendered pages, with the text colour composited over the ground first, because that is how a reader receives a translucent white: --ink2 74% on --bg 11.5:1 fine --ink3 48% on --bg 4.31:1 BELOW the 4.5 floor, and it carries reading times, dates, group labels, kind labels and table cells. It is 62% now, 6.95:1. --ink4 28% on --bg 2.42:1 a rule colour that was also being used for TEXT: the 2.75rem step numerals on the process page, the 1.5rem chapter numbers on the index, and the 2.5rem numerals on every step elsewhere. It is 34% now and it is rules and marks only; everything that used it for text uses --ink3. */ --ink:#EDEFF4; /* what you must read: 14.4:1 on the ground above, not 18.9 */ --ink2:rgba(237,239,244,.76); /* what you should read: about 8.4:1 */ --ink3:rgba(237,239,244,.64); /* what you may read: about 6.4:1, and it is text, so it has a floor */ --ink4:rgba(237,239,244,.34); /* edges, rules, marks: never text */ /* ── the brand layer: the only three things a visitor's site can change ─────────────────── */ --accent:#FFFFFF; /* THE FACE THAT SPEAKS, AND IT IS NOT A SERIF ANY MORE. The owner, on being shown the site: "I guess very typical AI is serif, and the fonts you're using are also very typical." Instrument Serif is named on his written list of rejected faces, and it was set here as the display face for every title and every numeral on 117 pages. The front page moved to Clash Display earlier tonight; this is the rest of the site catching up, so that there is one display face and not two. CLASH DISPLAY IS DRAWN RATHER THAN DEFAULT: flat-sided, wide, with a nine that is a shape and not a ball terminal, which matters on a site whose logo is the numeral alone. It is licensed and free, and it comes from the same foundry as Satoshi, which these pages already fetch. */ --srift-inn:'Clash Display','General Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; --srift-ut:'Satoshi','Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; /* 'Satoshi' is a STAND-IN for Apercu (Colophon Foundry), which is the face designers actually chose in 2026 and which is licensed. Swap the name when the licence is bought; nothing else changes. */ --srift-inn-brand:var(--srift-inn); --srift-ut-brand:var(--srift-ut); --skala:1; /* the reader's size, and what the automatic fit adjusts */ /* ── the type scale ─────────────────────────────────────────────────────────────────────── */ --t-display:clamp(2.75rem,7.2vw,6rem); --t-h1:clamp(2.1rem,4.6vw,3.5rem); --t-h2:clamp(1.5rem,2.6vw,2.125rem); --t-h3:1.25rem; --t-lead:clamp(1.15rem,1.7vw,1.375rem); --t-body:1.0625rem; /* ── TWO STEPS OF THE SCALE WERE UNDER 15 PIXELS, AND THEY WERE TEXT ────────────────────────────── MEASURED 17.09.2026 on the rendered process page and articles index, counting every visible text node and its computed size: --t-small .875rem = 14px the header navigation, reading times, dates, table cells, captions --t-label .6875rem = 11px "WHAT THIS COVERS", "SECTION 12", the per-step labels, the group labels on the articles index, the counters in the contents list Both are text a reader is meant to read, and the floor is 15 pixels. `--t-small` is 15px now and `--t-label` is 15px with its letter spacing tightened from .16em to .08em, because 15 pixel uppercase at nine per cent tracking is a different thing from 11 pixel uppercase at sixteen. */ --t-small:.9375rem; --t-label:.9375rem; /* ── the space scale ────────────────────────────────────────────────────────────────────── */ --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem; --s10:8rem; --seksjon:clamp(2.75rem,4.5vw,5rem); --målegr:31em; /* the reading measure: about 62 characters, set here rather than inherited, because a narrower column is a friendlier one */ /* ONE WIDTH, AND IT IS THE FRONT PAGE'S (17.09.2026). This was 76rem, 1216px, while the front page ran at 1180px with a 40px gutter, and four other pages hand-copied the 1180 with a 32px gutter instead. Three answers to one question is why the site read as three designs. The front page is the one the owner likes, so the front page is the law: 1180 and 40. */ --kant-vid:1180px; /* the widest anything is allowed to be */ --sidegate:40px; /* and the air beside it, on every page */ --radius:.75rem; } html{font-size:calc(16px * var(--skala));-webkit-text-size-adjust:100%;scroll-behavior:smooth} *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink2);font:var(--t-body)/1.75 var(--srift-ut-brand); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden} h1,h2,h3,h4{font-family:var(--srift-inn-brand);font-weight:400;color:var(--ink);margin:0} p{margin:0} a{color:var(--ink)} ::selection{background:var(--accent);color:var(--bg)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px} #stov{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none} /* ── header ─────────────────────────────────────────────────────────────────────────────────── ONE BAR, AND IT IS THE FRONT PAGE'S BAR (18.09.2026, Job 1). See nettstad.mjs, topp(), for what was wrong: this bar carried five destinations in words of its own while the front page carried three in different words, so one site taught a reader two vocabularies for the same links. THE GEOMETRY IS THE FRONT PAGE'S, MEASURED, and the numbers are copied rather than eyeballed: `.hold` there is `auto minmax(0,1fr) auto`, 74 pixels tall, the mark's column cannot be squeezed, the destinations are centred inside the middle column, and the action is the last column. The mark is 40 by 42 (32 by 34 under 900) inside a 44 by 44 link, which is the front page's own fix: the drawn numeral is smaller than a thumb, the link around it is not. WHAT THE COLUMN IS MEASURED AGAINST HERE. The frame is this site's own: --kant-vid, 76rem, with the page's --s6 gutter, so the bar's words start on the same edge as the article under them at every width. The front page's frame is 1180 with a 40 pixel gutter because that is the front page's own column. Two pages keep their own measure and one bar; a bar that ignored the page's gutter would line up with nothing. */ .topp{position:relative;z-index:5;max-width:var(--kant-vid);margin:0 auto;padding:0 var(--sidegate)} .topp .hald{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center; gap:20px;height:74px} .topp .merkelink{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px; justify-self:start;text-decoration:none;color:var(--ink);border-radius:4px;transition:opacity .2s ease} .topp .merkelink:hover{opacity:.82} .topp .merkelink svg{width:40px;height:42px;display:block;overflow:visible;flex:none} /* the three destinations: centred in the middle column, wrapped inside it and never outside it */ .topp .midt{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;min-width:0; gap:6px 22px;font-size:var(--t-small)} @media(min-width:901px){ .topp .midt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);justify-self:auto} } .topp .midt a{color:var(--ink3);text-decoration:none;white-space:nowrap;padding:11px 2px; display:inline-flex;align-items:center;min-height:44px;min-width:44px;box-sizing:border-box; transition:color .18s ease} .topp .midt a:hover{color:var(--ink)} .topp .midt a[aria-current]{color:var(--ink)} /* THE SHORTEST WORD IN THE BAR WAS THE ONE TARGET UNDER 44, and it was under in the other direction. MEASURED at 390 with `ops/verktoy/trykkflate.mjs`: "How it works" was 86 wide and "Cost" was 33 and a half, both 48 tall, so the bar's own links passed on height and the two-word ones passed on width and only "Cost" failed: a thumb aiming at the price page had a target three quarters of the size of the one beside it. `min-width` with the words still centred leaves every other link exactly where it was. */ /* ONE DESTINATION, TWO NAMES, AND THE STYLESHEET CHOOSES. "For marketing leads" above 520 pixels, the owner's own shorter "Marketing lead?" below it, exactly as the front page does it. Both spans are in the same link, so nothing depends on the hidden one. */ .topp .midt .stutt{display:none} .topp .sida{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:var(--s5); justify-self:end;white-space:nowrap} /* THE ONE ACTION, AS THE FRONT PAGE DRAWS IT: a bordered pill, 15 pixel words, and 48 pixels tall because 15 pixels of type and 11 of padding is what the front page measured. */ .topp a.stille{display:inline-block;color:var(--ink);text-decoration:none;font-size:var(--t-small); font-weight:500;padding:11px 16px;border:1px solid var(--kant);border-radius:4px; transition:color .2s ease,border-color .2s ease,background .2s ease} .topp a.stille:hover{border-color:var(--kant2);background:var(--flate)} /* ══ THE ONE ACTION, DRAWN THE WAY THE FRONT PAGE DRAWS IT ═════════════════════════════════════ This class has been in the shared bar's markup since it was written and has never had a rule in this file: measured, zero occurrences of knapp-topp in univers.css. So on 117 pages the primary call to action was plain text. It is a filled pill now, the same shape and the same words as the front page, and 44 pixels tall because that is what a thumb needs and this bar is used on phones. IT IS THE INK AND NOT THE BRAND COLOUR, deliberately: the site is black and white until it has read somebody, and the one button on a page nobody has been read on cannot be the first thing to break that rule. Once applyBrand() has run, --ink is unchanged and the accent appears everywhere it belongs; this button stays the constant. */ .topp a.knapp-topp{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box; padding:0 18px;border-radius:99px;background:var(--ink);color:var(--bg);text-decoration:none; font-size:var(--t-small);font-weight:500;white-space:nowrap;transition:opacity .2s ease} .topp a.knapp-topp:hover{opacity:.9} .topp a.knapp-topp:focus-visible{outline:2px solid var(--ink);outline-offset:3px} /* ══ HIT AREAS THAT WERE MEASURED ON ONE PAGE AND BELONG ON ALL OF THEM ════════════════════════ The price page lane measured three controls in this shell under the 44 pixel floor and patched them in that page's own stylesheet, with a note saying the fix belonged here and that it had been told not to touch this file. This is that move. Every page in the shell gets it now, not the one page that happened to be measured. */ .topp .sida a{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box} .brodsmule a{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box} .avslutning .knapp{min-height:44px;box-sizing:border-box} .topp a.stille[aria-current]{border-color:var(--ink2)} /* ── the controls: size, and whose typeface the page wears. Equipment, not settings. ───────── EVERY BUTTON IN THE BAR IS 44 PIXELS TALL FOR A FINGER (18.09.2026, Job 1). MEASURED before this pass: these four buttons were 29 pixels tall, and the five links beside them were 26. The bar is the one place a reader aims with a thumb while walking, so the padding takes each button's own box to the 44 the front page's theme control already had, and the pill around them grows with it. */ .kontroll{display:flex;align-items:center;gap:2px;border:1px solid var(--kant);border-radius:999px; padding:2px} .kontroll button{background:none;border:0;color:var(--ink3);cursor:pointer;font:var(--t-small)/1 var(--srift-ut-brand); display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px; padding:.45rem .6rem;border-radius:999px;transition:color .18s ease,background .18s ease} .kontroll button:hover{color:var(--ink)} .kontroll button.på{background:var(--ink);color:var(--bg)} /* THE SINGLE LETTERS ARE 44 WIDE TOO (18.09.2026, Job 3). MEASURED at 390 with `ops/verktoy/trykkflate.mjs`: the two typeface buttons were 44 tall and 23 wide, so a thumb aimed at them had half the target the rest of the product keeps, and the same fault appeared on every page that wears the bar. `min-width` is cheaper here than padding: it only moves a button that was under the bar, and the two words beside them already carry more than 44. */ .kontroll .stor{font-size:1rem} .kontroll .skilje{width:1px;height:1rem;background:var(--kant);margin:0 2px} /* THE WORD IN FRONT OF THE TWO TYPEFACES (18.09.2026). Without it the bar ended "A A nine yours" and read as a phrase rather than as a choice. It is small, quiet, and it sits inside the same pill so the group still reads as one control; at 520 pixels and below it goes, because a phone bar has no room for a label whose two buttons already carry their own words. */ .kontroll-merke{font:var(--t-small)/1 var(--srift-ut-brand);color:var(--ink4);padding:0 .35rem 0 .45rem} @media(max-width:520px){ .kontroll-merke{display:none} } /* ── the bar on a phone: the same two rows the front page measured and fixed ───────────────────── THE OWNER'S WORDS, and they are the whole brief for this block: "for marketing leads how it works what it costs is placed on mobile below the '9' left logo... so fducking odd dude, I would say keep it shorter then if spacing is an issue: 'Marketing lead? How it works Cost'". MEASURED on the build before this pass at 390 by 844: this bar was four rows — the mark and "nine.film", then the five links in two lines, then the typeface control on a line of its own — and it was 185 pixels tall. WHAT IT IS NOW is the front page's own two rows, at the front page's own numbers: the mark on the first row with the action group on the right, the three destinations centred on the second row, everything starting at the bar's gutter, and 15 pixels of type. NOTHING IN THIS BAR CAN REACH THE MARK'S BOX. Above 900 the destinations are the middle column of the grid, which begins to the right of the mark's own column. Under 900 they are a grid row of their own, BELOW the mark's row, and they wrap inside it, so a second line of links cannot cross the mark either. That is the fault the front page lane measured and this block copies the fix for. */ @media(max-width:700px){ .topp .hald{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto; height:auto;padding:8px 0 10px;row-gap:6px;column-gap:10px} .topp .merkelink{grid-column:1;grid-row:1} /* the destinations ARE the top row's middle, not a strip underneath it */ .topp .midt{grid-column:2;grid-row:1;justify-self:center;gap:2px 14px} /* the group stops being a box so its two children can land in two different cells, and BOTH of them are placed by name: that is the difference from the version that scattered. */ .topp .sida{display:contents} .topp .sida > a{align-self:center} .topp .sida > a.stille{grid-column:3;grid-row:1;justify-self:end} .topp .sida > a.knapp-topp{grid-column:1 / -1;grid-row:2;justify-self:center} .topp .merkelink svg{width:32px;height:34px} } /* THE SHORTER NAME ARRIVES WHERE THE ROW ACTUALLY NEEDS IT, exactly as on the front page: at 320 with 15 pixel type "For marketing leads", "How it works" and "Cost" do not fit between the gutters, and "Marketing lead?" is the owner's own suggestion and does. Both names are in one link. */ @media(max-width:520px){ .topp .midt .lang{display:none} .topp .midt .stutt{display:inline} /* AND THE CONTROL TIGHTENS ITS SIDES RATHER THAN ITS TARGETS. Its four buttons keep their 44 pixel height; only the padding either side of the words shrinks, which is what lets the mark, the control and the action share one row at 390. */ .topp .kontroll button{padding:.9rem .42rem} } /* AT 320 THE CONTROL TAKES A ROW OF ITS OWN, AND THE NUMBER IS THE REASON. MEASURED at 320: the bar has 283 pixels between its gutters on a reading page; the mark's link is 44, the one action is 96, the gaps around them 38, and what is left is 105. The typeface and size control is 150 pixels of equipment — "A A | nine yours" — and it is not a control that can be shrunk to fit without taking one of its four buttons away. (The front page's control is a single 44 pixel circle and sits on the first row there.) MEASURED at 390 the same four things need 328 of the 353 the bar has, so from 381 up they share one row, exactly as the front page does at that width, and below it the control steps down to a third row at the gutter. The first row keeps what the brief asks it to keep: the mark and the action. */ /* THE ROW FITS, AND HERE IS THE ARITHMETIC IT FITS BY. Measured at 375 on a reading page: the bar's own box is 338 wide with 16 of padding each side, so 306 of content. The mark's link is 44 and the sign in is 60, both of which are thumb targets and neither of which may shrink in height. Every destination is also held at 44 wide for the same reason. Four of them is 176, so what is left for the three gaps between them and the two gaps around the group is 306 - 44 - 60 = 202 minus 176, which is 26 pixels for five gaps. Four between the links and six around the group is 24. It fits with two pixels to spare, and that is why the numbers are these numbers. */ @media(max-width:520px){ .topp .midt{gap:2px 4px} .topp .hald{column-gap:6px} .topp .sida > a.stille{padding-left:4px;padding-right:4px} } @media(max-width:400px){ .topp .sida > a.stille{padding-left:6px;padding-right:6px} .topp .hald{padding-left:16px;padding-right:16px} } @media(max-width:520px){ /* TWO ROWS ON A PHONE, NOT THREE. THE OWNER listed the bar back to me as six things and asked why there were so many. MEASURED at 375 before this: the bar was 163 pixels and three rows - the mark alone on the first, the four destinations on the second, and the two actions on a third of their own. The front page has done this in two rows since 17 September, and the arithmetic says this bar can too: the mark is 44, the two pills are about 70 and 150, and the gaps about 20, so 284 of the 331 this bar has between its gutters. The third row was not needed; it was left over from a bar that had a typeface control in it, and that control moved to the foot of the page. */ .topp .hald{grid-template-rows:auto auto;padding-bottom:8px} /* THE PHONE RULES BELOW USED TO TAKE THE BAR APART AND PLACE ITS PIECES BY NAME. `display:contents` dissolved the right hand group into the header's own grid, and the two rules under it then positioned `a.stille` and `[data-temakontroll]` individually. Both of those names belonged to the OLD bar: the reading controls have moved to the foot of the page and the right hand group is now a sign-in and one button. With the names gone the group was being dissolved and nothing was putting it back, so on a phone the sign-in and the primary action scattered into the header grid. The group stays a group and wraps, which is what it was always meant to do. */ /* THE GROUP IS DISSOLVED ABOVE AND ITS TWO PIECES ARE PLACED BY NAME. This rule put it back together as a flex box on the first row, which is the layout the owner has now rejected three times, and being later in the file it won. */ } /* ── the hero: one screen, one sentence, and air. ─────────────────────────────────────────── */ .hero{position:relative;z-index:2;max-width:var(--kant-vid);margin:0 auto; padding:clamp(3rem,9vh,7rem) var(--s6) var(--seksjon);text-align:center} .hero .merkerom{height:var(--merkehog,150px)} .hero h1{font-size:var(--t-display);line-height:1.02;letter-spacing:-.03em;margin:var(--s7) auto 0; max-width:15em} .hero .lede{font-size:var(--t-lead);line-height:1.55;color:var(--ink2);margin:var(--s5) auto 0; max-width:30em} .hero .rul{max-width:var(--kant-vid);margin:var(--s8) auto 0;height:1px;background:var(--kant)} /* the headline: two lines, fixed slot, nothing ever blank. See nine-studio.html for the script. */ .skift{display:inline-block;position:relative;text-align:left;white-space:nowrap} .skift span{position:absolute;left:0;top:0;opacity:0;transition:opacity .5s ease,filter .5s ease,transform .5s ease} .skift span.på{opacity:1;filter:none;transform:none;position:relative} .skift span.ut{opacity:0;filter:blur(6px);transform:translateY(-.3em)} .skift span.inn{opacity:0;filter:blur(6px);transform:translateY(.3em)} .linje2{display:block;font-style:italic;color:var(--accent);transition:color .8s ease} /* ── kicker, titles, lead: the editorial voice ─────────────────────────────────────────────── */ .kicker{font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3); margin:0 0 var(--s4);display:block} .tittel{font-size:var(--t-h1);line-height:1.06;letter-spacing:-.022em} .under{font-size:var(--t-lead);line-height:1.5;color:var(--ink2);margin:var(--s4) 0 0;max-width:32em} /* ── the reading column ───────────────────────────────────────────────────────────────────── */ /* ONE WIDTH, ONE BOX MODEL. The padding here is gutter, not part of the measure, so these columns are content-box: 31em of TEXT plus a gutter on each side, and the outer edge of every one of them is the same 31em plus gutter. Under border-box the padding would be taken out of the measure instead, and the reading column would be 4rem narrower than the column it is supposed to share an edge with, which is exactly the 32 pixel wander the owner kept seeing. */ .les{position:relative;z-index:2;max-width:var(--målegr);margin:0 auto;padding:0 var(--sidegate); box-sizing:content-box} .les > * + *{margin-top:var(--s5)} .les p{color:var(--ink2)} .les p.ingress{font-size:var(--t-lead);line-height:1.55;color:var(--ink)} .les h2{font-size:var(--t-h2);line-height:1.16;letter-spacing:-.018em;margin-top:var(--seksjon)} .les h3{font-size:var(--t-h3);margin-top:var(--s7)} .les b,.les strong{color:var(--ink);font-weight:600} .les em{font-style:italic;color:var(--accent)} .les a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--kant2); transition:border-color .18s ease} .les a:hover{border-color:var(--accent)} .les ul,.les ol{list-style:none;padding:0;margin:0} .les li{position:relative;padding-left:var(--s5);color:var(--ink2)} .les li + li{margin-top:var(--s3)} .les li::before{content:'';position:absolute;left:0;top:.72em;width:.5rem;height:1px;background:var(--ink4)} .les blockquote{margin:var(--s7) 0;padding:0 0 0 var(--s5);border-left:1px solid var(--kant2); font-family:var(--srift-inn-brand);font-size:1.5rem;line-height:1.4;color:var(--ink)} .les hr{border:0;height:1px;background:var(--kant);margin:var(--s8) 0} .les code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;color:var(--ink)} /* ══ A LINE OF CODE SCROLLS INSIDE ITS OWN BOX; THE PAGE NEVER DOES ══════════════════════════════════ MEASURED 18.09.2026 by sweeping all thirty published pages at 360, 390, 768 and 1440 — a hundred and twenty combinations, of which a hundred and seventeen were clean and three were not. All three were the same defect: a code sample with no space in it. On /mcp a single JSON-RPC line was 444 pixels wide inside a 390 pixel screen and took the whole document to 463, so the PAGE scrolled sideways and every paragraph on it moved when the reader pushed the code. THE RULE THE SITE ALREADY HAD, applied to the one kind of block that was missing it: a table and a drawing each scroll inside themselves, and code is the third thing that is legitimately wider than the reading measure. overscroll-behavior-x: contain is the half that matters on a phone: without it, reaching the end of the code's own scroll hands the gesture to the page and the page moves anyway, which is the bug wearing a different hat. WRAPPING WAS THE OTHER OPTION AND IT IS THE WRONG ONE FOR THIS. A command broken across lines is a command somebody will copy and paste wrong. */ .les pre{overflow-x:auto;overscroll-behavior-x:contain;max-width:100%} .les pre code{white-space:pre} /* A code span inside a PARAGRAPH is prose and must never widen the column: it breaks where it has to, because an address or a key in the middle of a sentence is read, not copied. */ .les p > code,.les li > code,.les td > code{overflow-wrap:anywhere;word-break:break-word} .les .meta{font-size:var(--t-small);color:var(--ink3);display:flex;gap:var(--s3);align-items:center; flex-wrap:wrap;padding-bottom:var(--s5);border-bottom:1px solid var(--kant)} /* ── a numbered step, for the process page: the numeral is the design, the text is the content ── */ .steg{display:grid;grid-template-columns:4.5rem 1fr;gap:var(--s5);padding:var(--s7) 0; border-top:1px solid var(--kant)} .steg:last-of-type{border-bottom:1px solid var(--kant)} .steg .nr{font-family:var(--srift-inn-brand);font-size:2.5rem;line-height:1;color:var(--ink3)} .steg h3{font-size:var(--t-h2);line-height:1.2;letter-spacing:-.015em;margin:0 0 var(--s3)} .steg p{margin:0;color:var(--ink2);max-width:var(--målegr)} /* the label under a step. It was `.merke`, which is the site's shared eyebrow class; it has its own name now because the process page's grid restyles it and nothing else on the site should move with it. */ .steg .steg-merke{display:inline-block;margin-top:var(--s4);font-size:var(--t-label);letter-spacing:.08em; text-transform:uppercase;color:var(--ink3)} .steg .merke{display:inline-block;margin-top:var(--s4);font-size:var(--t-label);letter-spacing:.08em; text-transform:uppercase;color:var(--ink3)} /* ══════════════════════════════════════════════════════════════════════════════════════════════════ THE PROCESS PAGE, REBUILT AS A GRID. 17.09.2026. THE OWNER'S WORDS, of this page and the ones like it: "The process page, again, is terrible to look at", and, more than once, "Users hate scrolling." WHAT WAS THERE, MEASURED on the rendered page at 1440 before this block: 7079 pixels tall, 7.9 screens of a 900 pixel window; eleven steps, each one a full width row 260 pixels apart, so the reader crossed 4496 pixels of sheet to read 741 words, which is about six pixels of scroll per word; a step's own column of prose was 806 pixels wide inside a 1216 pixel row, and the numeral took a 4.5rem column of its own on the far left, so 410 pixels of every row held nothing; the same four counts (eleven steps, and who does which) were stated THREE times above the first step: in the standfirst, in a drawing, and again in the opening paragraph, and the three did not agree with each other or with the labels the steps print; and the page carried no picture, no rule and no landmark of any kind between the contents list and the closing call, so there was nothing for the eye to land on for six screens. WHAT THIS IS NOW. The steps keep their numbers, their order, their names, their own labels and every word of their prose. What changes is the shape: THREE STEPS ACROSS ON A DESK, two at 1100, one on a phone, each step a cell with its number and its label on one line at the top and its prose under it. The number is 1.0625rem and shares a line with the label instead of standing in a column of its own. MEASURED after, at the same widths, and written into the commit rather than promised here. THE LABELS ARE UNTOUCHED, and that was the condition: a step that says "automatic" still says automatic, in the same words, beside the same number. Nothing was cut to make the page shorter. */ .stegramme{display:grid;gap:0 var(--s7)} .stegramme .steg{display:block;padding:var(--s6) 0;border-top:1px solid var(--kant)} .stegramme .steg:last-of-type{border-bottom:0} /* THE THINGS THAT ARE NOT STEPS TAKE THE WHOLE WIDTH. The container is closed the moment a section heading arrives (nettstad.mjs, `latTrapp`), so this is the second lock on the same door: an intro paragraph, a glossary, a closing section, anything that is prose rather than a step, must not end up in a cell with two empty neighbours. */ .stegramme > *{grid-column:1/-1} .stegramme .steg{grid-column:auto} /* AND A SECTION HEADING UNDER THE GRID. The centring is the owner's decision and it stays everywhere else. Here the heading stood 1216 pixels wide while its own paragraph under it was held to 40rem, so the two sat on different widths and the heading wrapped onto a second line with one word on it. MEASURED at 1440 on the rendered page: "What runs on its own today, and what does" / "not". Both are held to the same measure now, on the same centre, which is the shape the rest of the site already uses: the heading over its own column and not over the page. */ .stegramme ~ .les-flate{max-width:var(--målegr-les);margin-inline:auto} /* the label sits on the line with the number, so the reader gets "03 · AUTOMATIC" as one piece of metadata rather than a numeral, a name and a label stacked in three places. The two of them are one line of type by taking them OUT of the block flow: an inline-block numeral would sit on a line of its own whatever the label did. */ .stegramme .steg > div{display:flow-root} .stegramme .steg .nr,.stegramme .steg .steg-merke{float:left} /* THE PROSE HAS TO BE PUSHED BELOW THE TWO FLOATS, and that is not decoration: without it the paragraph reflows beside the numeral and the label instead of starting under them, so the first line of every step read "YOURS, TEN SECONDSOn the trial page, one field, one button" on the rendered page. A float makes room for a line box; it does not end the line. `clear` is what ends it. */ .stegramme .steg .stegin{clear:both} .stegramme .steg .steg-merke{margin-left:.45rem} /* THE SHEET'S OWN FOUR COLOURS ARE RESTATED HERE, AND THEY HAVE TO BE, WITH THE SPECIFICITY TO WIN. `.les p` and `.les .nr` further up this file are one class deeper than `.papir .steg p`, so the first attempt at this grid put the DARK ground's ink on the sheet: MEASURED on the rendered page after that attempt, every paragraph and every label inside a step was rgba(247,243,234,...) on #F2EFE7, which is 1.04:1, invisible. That is the exact failure the contrast notes in this file exist to prevent, and it was introduced by reshaping a page without re-reading which selectors it was beating. Nothing else on the site moves: every rule below is scoped to the grid. */ .stegramme .steg .nr{display:inline-block;font-family:var(--srift-ut-brand);font-size:1.0625rem; line-height:1.35;color:var(--papir-ink3);font-variant-numeric:tabular-nums} .stegramme .steg .nr::after{content:'·';margin:0 .45rem;color:var(--papir-kant)} .stegramme .steg .steg-merke{display:inline-block;margin:0;font-size:var(--t-label);letter-spacing:.08em; text-transform:uppercase;color:var(--papir-ink3)} .stegramme .steg h3{font-size:1.1875rem;line-height:1.25;margin:0 0 var(--s3); font-family:var(--srift-inn-brand);letter-spacing:-.01em;clear:both;color:var(--papir-ink)} .stegramme .steg p{color:var(--papir-ink2);font-size:var(--t-body);line-height:1.65;max-width:44em} .stegramme .steg b,.stegramme .steg strong{color:var(--papir-ink)} .stegramme .steg a{color:var(--papir-aksent)} .stegramme .steg .stegin > * + *{margin-top:var(--s4)} @media(min-width:1181px){ .stegramme{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(min-width:701px) and (max-width:1180px){ .stegramme{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:700px){ .stegramme{grid-template-columns:minmax(0,1fr);gap:0} .stegramme .steg{padding:var(--s5) 0} } /* ── entries: an index of pieces, as rows rather than cards ───────────────────────────────── */ .innhald{position:relative;z-index:2;max-width:var(--kant-vid);margin:0 auto;padding:0 var(--sidegate)} .innhald a{display:grid;grid-template-columns:8rem 1fr auto;gap:var(--s5);align-items:baseline; padding:var(--s5) 0;border-top:1px solid var(--kant);text-decoration:none;transition:opacity .18s ease} .innhald a:last-child{border-bottom:1px solid var(--kant)} .innhald a:hover{opacity:.72} .innhald .dato{font-size:var(--t-small);color:var(--ink3);font-variant-numeric:tabular-nums} .innhald h3{font-size:var(--t-h3);line-height:1.3;margin:0} .innhald .kva{color:var(--ink3);font-size:var(--t-small);margin:var(--s2) 0 0;max-width:52em} .innhald .min{font-size:var(--t-small);color:var(--ink3);white-space:nowrap} /* ── buttons: two, and no more ────────────────────────────────────────────────────────────── */ /* ── THE DOOR BESIDE A PRICE, WHICH IS A FORM RATHER THAN A LINK ──────────────────────────────── `.kjop` and `.kjop-knapp` are the one button on the site that submits something. MEASURED 18.09.2026: `/pricing.html` stated three terms and nine prices per tier and not one of them could be chosen, so `prisar-data.mjs` now renders a real `
` beside each price, and the page's own script keeps the plan id in step with the slider. A form's own button is 20 pixels tall and grey, so it wears these two classes instead: same type, same ink ground, same 44 pixel floor as `.knapp`, and the amount is in the button's words rather than left to the reader's memory. */ .kjop{display:block;margin:14px 0 0} .kjop-knapp{display:inline-flex;align-items:center;justify-content:center;min-height:44px; box-sizing:border-box;width:100%;padding:.7rem 1rem;border:1px solid var(--ink);border-radius:var(--radius); background:var(--ink);color:var(--bg);font-family:inherit;font-size:var(--t-small);font-weight:600; cursor:pointer;transition:opacity .18s ease} .kjop-knapp:hover{opacity:.82} .kjop-knapp:focus-visible{outline:2px solid var(--ink);outline-offset:2px} .avslag-liste li .kjop{margin-top:10px} .avslag-liste li .kjop-knapp{background:none;color:var(--ink)} /* AND A BUTTON IS AS TALL AS A THUMB. MEASURED on `/settings.html` at 390 with `ops/verktoy/trykkflate.mjs`: ten of the page's controls came out at 38.4 pixels, and the three theme buttons at 35.2, on the two pages a signed in customer actually operates. `.knapp` is the product's own button class and the account pages line up four of them in a row, so the rule belongs here rather than in thirteen sizes: `min-height:44px` with the padding inside the box. Nothing moves at 1440, where every one of them was already taller than that, which is why the fault had never been seen. */ .knapp{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:44px; box-sizing:border-box; padding:.8rem 1.5rem;border-radius:999px;border:1px solid transparent;background:var(--ink);color:var(--bg); font:500 var(--t-small)/1 var(--srift-ut-brand);text-decoration:none;cursor:pointer; transition:background .18s ease,border-color .18s ease,color .18s ease} .knapp:hover{background:#fff} .knapp.ghost{background:none;border-color:var(--kant2);color:var(--ink)} .knapp.ghost:hover{background:rgba(255,255,255,.05);border-color:var(--ink)} .knapp.stille{background:none;border-color:transparent;color:var(--ink3);padding:.5rem .7rem} .knapp.stille:hover{color:var(--ink)} /* ── the closing call, once per page ───────────────────────────────────────────────────────── THE SECOND CEREMONY. Centred is allowed here and only here, and it applies to the whole block: the sentence and the button share one axis, because a centred sentence over a left-aligned button is the exact thing the owner asked to stop seeing. */ .avslutning{position:relative;z-index:2;max-width:var(--kant-vid);margin:var(--seksjon) auto 0; padding:var(--s8) var(--s6);border-top:1px solid var(--kant); display:grid;justify-items:center;gap:var(--s6)} .avslutning p{font-size:var(--t-lead);line-height:1.6;color:var(--ink2);margin:0;max-width:27em; text-align:center} .avslutning b{color:var(--ink)} /* ── the credits ─────────────────────────────────────────────────────────────────────────── */ /* THE FOOTER'S OWN SHAPE IS THE FRONT PAGE'S (18.09.2026, Job 2): the same column grid, the same 34 pixel gap between columns and the same 8 pixel rhythm inside one. The frame around it stays this site's own column (--kant-vid with the page's gutter), so the footer's first word starts on the same edge as the article above it. */ /* THE FOOTER USED A DIFFERENT GUTTER FROM EVERY OTHER CONTAINER, and that is the whole of the owner's note that the bottom of the price page is vibe-coded. MALT at 1440: the page frame is 1180 at x=123, the section content 1100 at x=163, and this footer 1116 at x=155. Eight pixels out from everything above it, all the way down the longest block on the page. Nobody can name eight pixels and everybody can see that nothing lines up. The horizontal padding is the site's own gutter now, so the footer is the same column as the page it ends. The vertical padding is untouched: a footer wants more air above it than a section does. */ .slutt{position:relative;z-index:2;max-width:var(--kant-vid);margin:var(--seksjon) auto 0; padding:var(--s8) var(--sidegate) var(--s7);border-top:1px solid var(--kant)} .slutt .indre{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))} .slutt .kol{display:flex;flex-direction:column;gap:8px;min-width:0} .slutt .kol b{font:500 var(--t-label)/1 var(--srift-ut-brand);letter-spacing:.08em;text-transform:uppercase; color:var(--ink3)} /* ── A FOOTER LINK IS A THUMB TARGET, AND IT WAS THE ONE PLACE NOBODY HAD LOOKED ──────────────── MEASURED with `ops/verktoy/trykkflate.mjs` at 390 on the pages that wear this footer, before this rule: `.slutt .kol a` was 353 by 26 pixels, on every one of them, and it is the single cause of about thirty of each page's failures, because the footer carries five columns of links and the same fault appears in every column. The instrument had been reporting it for as long as it has existed and nobody had read that far down its list. The column keeps its own 8 pixel rhythm: the padding grows the link's own box and the flex column absorbs it, so no word moves sideways and the footer grows by 30 pixels in total on a phone. */ .slutt .kol a{color:var(--ink2);text-decoration:none;font-size:var(--t-small);transition:color .18s ease; display:inline-block;padding:11px 2px;box-sizing:border-box} .slutt .kol a:hover{color:var(--ink)} .slutt .kol p{color:var(--ink3);font-size:var(--t-small);line-height:1.7;max-width:30ch} .slutt .merke{display:flex;align-items:center;gap:.55rem;color:var(--ink); font-family:var(--srift-inn-brand);font-size:1.3rem} .slutt .merke svg{width:1.2rem;height:1.25rem;overflow:visible;flex:none} .slutt .bot{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--kant);color:var(--ink3); font-size:var(--t-small);display:flex;gap:var(--s5);flex-wrap:wrap;justify-content:space-between} .slutt .bot > span{display:inline-flex;align-items:center;gap:.35rem} /* The end line carries two links now (the terms and the privacy page), so they have to be links a reader can see and reach rather than words in the same grey as the sentence around them. Nothing else about the line changes: one row, the same two ends, the same rule above it. */ .slutt .bot a{color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--kant2); transition:color .18s ease,border-color .18s ease;display:inline-block;padding:11px 2px;box-sizing:border-box} .slutt .bot a:hover{color:var(--ink);border-color:var(--ink)} /* WIDE FOOTERS USE THE SAME CENTRED RAIL AS THE PAGE ABOVE. Seven groups are seven equal tracks on a wide screen; at tablet width they become two balanced rows instead of leaving legal content alone. */ @media(min-width:701px){ .slutt .indre{grid-template-columns:repeat(7,minmax(0,1fr));text-align:center;align-items:start} .slutt .kol{align-items:center;width:100%} .slutt .kol p{text-align:center} .slutt .bot{justify-content:center;text-align:center} } @media(min-width:701px) and (max-width:980px){ .slutt .indre{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:40px} } /* ── the arrival. Subtle, once, and never in the way of reading. ─────────────────────────── */ [data-inn]{opacity:0;transform:translateY(18px)} [data-inn].inn{opacity:1;transform:none; transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i,0) * 80ms)} @media (prefers-reduced-motion:reduce){ [data-inn]{opacity:1;transform:none} html{scroll-behavior:auto} #stov{display:none} } /* ── the product pages: a studio somebody signed into. Same material, functional hierarchy. ── */ .flate{background:var(--flate);border:1px solid var(--kant);border-radius:var(--radius)} .tal{display:flex;gap:var(--s8);flex-wrap:wrap} .tal div{display:flex;flex-direction:column;gap:var(--s1)} .tal b{font-family:var(--srift-inn-brand);font-weight:400;font-size:2.5rem;line-height:1;color:var(--ink)} .tal span{font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)} .verk{display:grid;grid-template-columns:1fr auto;gap:var(--s2) var(--s6);align-items:center; padding:var(--s5) 0;border-top:1px solid var(--kant)} .verk:last-of-type{border-bottom:1px solid var(--kant)} .verk h3{font-size:var(--t-h3);margin:0;line-height:1.25} .verk .fakta{font-size:var(--t-small);color:var(--ink3);font-variant-numeric:tabular-nums} .verk .handling{display:flex;gap:var(--s3);align-items:center;grid-row:1/3} .status{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--t-label);letter-spacing:.08em; text-transform:uppercase;color:var(--ink3);white-space:nowrap} .status i{width:5px;height:5px;border-radius:50%;background:var(--ink4);display:inline-block} .status.ferdig i{background:#6ee7a8} .status.kjorer i{background:#f2c96b;animation:pust 2.6s ease-in-out infinite} .status.pausa i{background:#ff9a8a} @keyframes pust{0%,100%{opacity:.3}50%{opacity:1}} .rute{width:100%;border:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9; background:#000;display:block;margin-top:var(--s5)} .feil{color:#ff9a8a;font-size:var(--t-small)} /* ══ THE READING SHEET ════════════════════════════════════════════════════════════════════════ WHY THIS EXISTS, AND WHAT WAS WRONG BEFORE IT. Measured on a real phone and a real laptop, 16.09.2026, reading an article the way a customer would: the articles were the least readable pages on the site. Long pieces of grey-white text on black, set at sixteen pixels, with nothing to hold on to: no contents, no section marks, no progress, no obvious next step. The pages that are ABOUT clarity were the hardest pages to read, and the complaint was exact, intimidating, hard to know where to look, and the blackness read as a mood rather than as a material. So the long reads get a different material, and the black and white are used as two rooms rather than as one dark one. The site stays black: the header, the hero, the closing, the credits. The READING happens on paper, in daylight, which is where reading has always happened. The change is one section wide, it costs one background colour, and it does three things at once: · it says, without a word, that this part is for you and it is not the machine talking; · it makes the text comfortable, because ink on paper can be darker and larger for free; · and it gives the eye an edge to follow instead of an infinite black field. Everything below is the reading experience: the sheet, the contents, the numbered sections, the progress hairline, and the end of the piece. Nothing here changes a word of the writing. */ :root{ /* THE SHEET IS NOW A STEP FURTHER OFF WHITE, and it moved with the ground rather than against it. The site's ground softened from #08090A to #0b0b0c and the ink from #FFFFFF to #f7f3ea, so the sheet follows the same move: #F7F5F0 was the old cool white at 19.27:1 against black, and #F2EFE7 is the same warm family at 18.28:1. Slightly darker and a touch warmer, so a black film frame, a white frame and a figure all sit on it as objects rather than as holes. The three text colours keep their contrast floors on the new value, measured: --papir-ink 16.03:1, --papir-ink2 9.02:1, and --papir-ink3 at 5.32:1 after the correction below. Nothing else about the sheet changed: it is still a sheet of paper, not a theme. */ /* ══ THE SHEET STAYS LIGHT AND STOPS BEING CREAM ═════════════════════════════════════════════ TWO RULES OF THE OWNERS OWN, and they only look like they disagree. BANNED: "cream/beige/paper background". He has said it twice and it is written down. WANTED: "light but not cream". So a light reading surface is right and the colour of it was wrong. MEASURED: 54 published pages carry a .papir section, and on the about page it is 66 per cent of the whole document. That is the majority of the reading half of this site, set on the one family he has rejected. WHAT CHANGED IS THE HUE AND NOTHING ELSE. The sheet keeps its luminance, so every ink on it keeps its contrast (measured against the new value: ink 17.6:1, ink2 8.9:1, ink3 5.4:1, all above where they were, because the new sheet is a shade lighter). It is a cool near-white now: the same neutral family as the graphite ground the rest of the site is on, so a reader moving from the front page to an article moves between two surfaces of one palette rather than between a cold room and a warm one. */ --papir:#F4F6F8; /* the sheet: light, neutral, a few points off white */ --papir-2:#E8EBEF; /* a second surface on the sheet, for the contents block */ --papir-ink:#131417; /* what you must read: 16.0:1 */ --papir-ink2:#3E4046; /* what you should read: 9.0:1 */ /* MEASURED 17.09.2026 on the rendered process page: this was #6E7076 and it measured 4.31:1 against the sheet, which is below the 4.5 floor for text, and it is text: the per-step labels, the step numerals, "WHAT THIS COVERS" in the contents list, figure captions and table headers. The note above had recorded 4.31:1 as if a number near four were near enough, and justified it against a film standard's 3.4:1 rather than against this product's own floor. It is #5C5E64 now, 5.32:1. */ --papir-ink3:#5C5E64; /* what you may read: 5.32:1 */ --papir-kant:#D8DCE2; /* every rule on the sheet, a hair darker than the sheet itself */ --papir-aksent:var(--accent); /* replaced in JavaScript by the accent, darkened to be legible */ /* A GLYPH ON A FILLED SHAPE IS NOT THE BLACK GROUND. The diagrams put a number inside a band that is filled, and the site's own ink is unusable there: --ink is a warm white, which on a pale accent measured 1.14:1, and it would vanish on a dark accent too. So a filled shape takes the sheet's ink, which measures 12.76:1 on a pale accent and 18.42:1 on a white one. It is declared here rather than written into a drawing so that the next palette change reaches it. */ --teikning-ink:#131417; /* a glyph inside a filled shape */ } /* ══ THE SHEET WAS NOT A SHEET, IT WAS A BAND THE WIDTH OF THE WINDOW ══════════════════════════ THE OWNER, twice: "when you look into articles, it also still looks horrible to read on desktop." MEASURED at 1440 on an article: the reading column is 640 pixels at 19px, which is 74 characters a line and inside the comfortable range. The measure was never the fault. The SHEET was 1425 pixels wide, edge to edge, so the column sat in the middle of it with 393 pixels of blank white on the left and 408 on the right. That is not a page, it is a column of text lost in a lit field, and it is the exact thing the plan called a narrow ribbon on a wide desk. A SHEET HAS MARGINS PROPORTIONAL TO ITS TEXT. 960 around a 640 column gives about 160 either side, which is what a printed page looks like and what the perforated film edge along the top was always drawing. It keeps the full width below 960, where a phone has no margins to spare. AND IT LIES ON THE GROUND RATHER THAN BEING PAINTED ON IT: a soft shadow under it and the site/s own corner radius, so the dark page reads as the surface the sheet is resting on. */ .papir{position:relative;z-index:2;background:var(--papir);color:var(--papir-ink2); padding:clamp(1.5rem,3vw,2.75rem) 0 clamp(2.25rem,4vw,4rem);margin-top:clamp(1.5rem,3vw,3rem); max-width:min(60rem,100%);margin-left:auto;margin-right:auto; border-radius:var(--radius);box-shadow:0 44px 100px -55px rgb(0 0 0 / .85)} /* the perforated edge: nine frames of film, as a perforation, along the top of the sheet. It is the same mark the logo is made of and it is the only ornament on the page. */ .papir::before{content:'';position:absolute;left:0;right:0;top:0;height:10px; background-image:repeating-linear-gradient(90deg,var(--papir-kant) 0 12px,transparent 12px 26px); background-position:0 center;background-size:26px 1px;background-repeat:repeat-x} .papir h1,.papir h2,.papir h3,.papir h4{color:var(--papir-ink)} /* a jump from the contents list must not land under the header, and on a phone the header wraps */ .les h2.avsnitt,.steg,.les h3,.les-flate h2{scroll-margin-top:3.5rem} @media(max-width:700px){ .les h2.avsnitt,.steg,.les h3,.les-flate h2{scroll-margin-top:7.5rem} } .papir .les p{color:var(--papir-ink2);font-size:1.1875rem;line-height:1.78} .papir .les p.ingress{font-size:1.375rem;line-height:1.5;color:var(--papir-ink)} .papir .les b,.papir .les strong{color:var(--papir-ink)} .papir .les em{color:var(--papir-ink);font-style:italic} .papir .les a{color:var(--papir-aksent);text-decoration:underline;text-decoration-thickness:1px; text-underline-offset:3px;border:0} .papir .les a:hover{text-decoration-thickness:2px} .papir .les ul,.papir .les ol{list-style:none;padding:0;margin:0} .papir .les li{position:relative;padding-left:var(--s5);color:var(--papir-ink2)} .papir .les li + li{margin-top:var(--s5)} .papir .les li::before{content:'';position:absolute;left:0;top:.85em;width:.5rem;height:1px; background:var(--papir-aksent)} .papir .les h3{font-size:1.4375rem;margin-top:var(--s8);line-height:1.25} .papir .les code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em; background:var(--papir-2);padding:.1em .35em;border-radius:3px;color:var(--papir-ink)} /* ── a numbered section, so the eye has a ladder to climb ───────────────────────────────────── The marker sits on its own line above the heading, on the same left edge as every paragraph under it. It used to sit in the margin, which put the number on a different axis from everything else on the page and pushed the sheet sideways on a narrow screen. */ .les h2.avsnitt{position:relative;margin-top:clamp(2.5rem,4vw,3.75rem);padding-top:var(--s5); border-top:1px solid var(--papir-kant);font-size:clamp(1.5rem,2.5vw,2.0625rem);line-height:1.14; letter-spacing:-.018em} /* ── a heading is closer to its own text than to the section before it ──────────────────────── The distinction between a heading and the body under it is made of three things, and the spacing is the one that does the most work: a rule above the heading and a big gap before it, then a short gap to the paragraph it belongs to, while the paragraphs among themselves keep the wider gap. Read at a glance, a section then looks like a block with a title rather than a list of equal paragraphs. */ .les h2.avsnitt + *,.les .les-flate .avsnitt + *{margin-top:.8rem} .les > .les-flate + .les-flate{margin-top:var(--s5)} .les h2.avsnitt .merke{display:block;margin-bottom:.45rem;font-family:var(--srift-ut-brand); font-size:var(--t-label);font-weight:400;letter-spacing:.08em;text-transform:uppercase; color:var(--papir-ink3);font-variant-numeric:tabular-nums} /* the second level, for the pieces whose sections are longer than a screen */ .papir .les h3{position:relative;padding-top:0} /* ── the top of the piece: who, how long, and what is in it ─────────────────────────────────── WHERE YOU LOOK, AND WHAT TO DO. Three facts, then the contents as real jumps, then one sentence saying the reading starts below. It is the first thing on the sheet and it answers both questions before a reader has to work either of them out. IT IS A RIBBON, NOT A SIDEBAR, and that is a correction. The first version put a narrow contents block in a right-hand column, which made the sheet two columns wide and put the reading column on a second left edge 280 pixels from the first one. That is the zigzag the owner kept seeing, in the one place it does the most damage: a reader who does not yet know where to look. So the contents spans the sheet and breaks into columns instead, and the reading column below it is the only column on the page. Nothing on a reading page has a left edge except this one. */ .lese-topp{position:relative;z-index:3;max-width:var(--kant-vid);margin:0 auto var(--s5); padding:0 var(--s5);display:flex;flex-direction:column;gap:var(--s6)} .lese-topp .kven{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s3) var(--s5)} .lese-topp .kven .rad{display:flex;gap:var(--s2);align-items:baseline;font-size:var(--t-small); color:var(--papir-ink3)} .lese-topp .kven .rad b{color:var(--papir-ink);font-weight:500} .lese-topp .kven .merke{display:flex;align-items:center;gap:.5rem;color:var(--papir-ink)} .lese-topp .kven .merke svg{width:1.1rem;height:1.15rem;overflow:visible} .lese-topp .kven .merke span{font-family:var(--srift-inn-brand);font-size:1rem} /* the sentence that says where the reading starts: the one line on the sheet that is deliberately louder than its neighbours, because it is the answer to "what do I do now" */ .lese-topp .kven .ned{flex-basis:100%;margin-top:var(--s1);color:var(--papir-ink2);font-size:var(--t-body)} .lese-topp .kven .ned .pil{color:var(--papir-aksent)} .innhaldsliste{background:var(--papir-2);border:1px solid var(--papir-kant);border-radius:var(--radius); padding:var(--s5) var(--s5) var(--s4)} .innhaldsliste .merke{font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase; color:var(--papir-ink3);display:block;margin-bottom:var(--s4)} /* three short columns beat one long one: the whole piece is visible at a glance instead of half of it. A grid rather than a CSS multi-column block, because balanced columns leave a ragged hole at the foot of the block and a grid keeps every row the same height and every column the same width. */ .innhaldsliste ol{list-style:none;margin:0;padding:0;counter-reset:kap; display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--s7);align-content:start} @media(max-width:900px){ .innhaldsliste ol{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:700px){ .innhaldsliste ol{grid-template-columns:minmax(0,1fr)} } .innhaldsliste li{counter-increment:kap;display:flex} .innhaldsliste a{display:grid;grid-template-columns:1.75rem minmax(0,1fr);gap:var(--s2);width:100%; align-items:baseline;padding:.55rem 0;min-height:44px;box-sizing:border-box;text-decoration:none; color:var(--papir-ink2); transition:color .18s ease,padding-left .18s ease} .innhaldsliste a::before{content:counter(kap,decimal-leading-zero);font-size:var(--t-label); letter-spacing:.14em;color:var(--papir-ink3);font-variant-numeric:tabular-nums} .innhaldsliste a:hover{color:var(--papir-ink);padding-left:.35rem} .innhaldsliste a:hover::before{color:var(--papir-aksent)} /* which section you are standing in, set from JavaScript. It has no effect with script off, and it is never the only thing that says where you are: the section markers do that on their own. */ .innhaldsliste a[aria-current]{color:var(--papir-ink)} .innhaldsliste a[aria-current]::before{color:var(--papir-aksent);font-weight:600} /* THE RIBBON DOES NOT STICK, and that is the second correction. It was pinned to the top of the window for a while, and a pinned block hides the top of the reading column behind it: the first line of the figure under it was cut in half, and a reader scrolling past a drawing saw it slide under a lid. A reading page has three things that say where you are, and all three of them cost the column nothing: the contents at the top, a marker at every section, and the hairline of how far you have come. That is enough, and the words keep the whole screen. */ .figur + .figur,.figur + .dome,.dome + .dome{margin-top:var(--s6)} /* ── the drop capital, used once, at the top of the piece ───────────────────────────────────── One ornament, on the first letter, because it is the oldest signal there is that a piece of writing is meant to be read rather than scanned. */ .papir .les > p.opning::first-letter{float:left;font-family:var(--srift-inn-brand); font-size:3.6em;line-height:.82;padding:.06em .12em 0 0;color:var(--papir-ink)} /* ── how far you are, and how to get back ──────────────────────────────────────────────────── A two-pixel hairline at the very top of the window, in the accent, attached to the piece rather than to the whole page, so where it ends means something. */ #framgang{position:fixed;top:0;left:0;right:0;height:2px;z-index:40;background:transparent; pointer-events:none} #framgang i{display:block;height:100%;width:0;background:var(--accent);transform-origin:left center; transition:width .1s linear} #til-toppen{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:40; background:var(--ink);color:var(--bg);border:0;border-radius:999px;font:var(--t-small)/1 var(--srift-ut-brand); padding:.7rem 1rem;cursor:pointer;opacity:0;transform:translateY(8px);pointer-events:none; transition:opacity .25s ease,transform .25s ease; /* THE ONE CONTROL THAT FLOATS OVER THE PAGE WAS THE ONE UNDER THE BAR. MEASURED at 390 with `ops/verktoy/trykkflate.mjs`: 37.4 tall, on every page that scrolls, which is fifty of them. It is the only control here that moves while a thumb is aiming at it, so it is the last one that should be short. */ min-height:44px;min-width:44px;box-sizing:border-box; display:inline-flex;align-items:center;justify-content:center} #til-toppen.på{opacity:1;transform:none;pointer-events:auto} /* ── the end of the piece: where to go next, said plainly ──────────────────────────────────── The old ending handed the reader three cards and hoped. This one names the next piece as a piece (title, what it is about, how long) and puts the two directions of travel side by side. */ .vidare{position:relative;z-index:2;max-width:var(--kant-vid);margin:0 auto;padding:0 var(--sidegate)} .vidare .merke{font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3); display:block;margin-bottom:var(--s4)} .vidare .neste{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4) var(--s6); align-items:baseline;padding:var(--s5) 0;border-top:1px solid var(--kant);text-decoration:none} .vidare .neste:last-of-type{border-bottom:1px solid var(--kant)} .vidare .neste h3{font-size:var(--t-h3);margin:0 0 var(--s2);line-height:1.3;color:var(--ink)} .vidare .neste p{color:var(--ink3);font-size:var(--t-small);margin:0;max-width:56em} .vidare .neste .min{font-size:var(--t-small);color:var(--ink3);white-space:nowrap} .vidare .neste:hover h3{color:var(--accent)} .vidare .par{display:flex;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s6)} .vidare .par a{color:var(--ink2);text-decoration:none;font-size:var(--t-small); border-bottom:1px solid var(--kant2);padding-bottom:2px; display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box} .vidare .par a:hover{color:var(--ink);border-color:var(--accent)} /* ── the breadcrumb: two words that answer «where am I» before the title does ──────────────── */ .brodsmule{display:flex;gap:var(--s3);align-items:center;font-size:var(--t-small);color:var(--ink3); margin-bottom:var(--s5)} .brodsmule a{color:var(--ink3);text-decoration:none;transition:color .18s ease; display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;padding:11px 2px} .brodsmule a:hover{color:var(--ink)} /* ── the numbered steps, on paper ─────────────────────────────────────────────────────────── The process page and the chapters use the same steps as before; they were drawn for a black page and every one of their rules and numerals was white, which on paper is nothing at all. */ .papir .steg{display:block;border-top:1px solid var(--papir-kant);padding:var(--s6) 0} .papir .steg:last-of-type{border-bottom:1px solid var(--papir-kant)} .papir .steg .nr{font-family:var(--srift-inn-brand);font-size:2.75rem;line-height:1;color:var(--papir-ink3)} .papir .steg h3{color:var(--papir-ink);margin:.5rem 0 var(--s3)} .papir .steg p{color:var(--papir-ink2);max-width:var(--målegr)} .papir .steg .merke{margin-top:var(--s4);color:var(--papir-ink3)} /* THE LABEL'S NEW NAME HAS TO BE ON THIS LIST TOO, and leaving it off was a real defect rather than a tidy-up. The label span was renamed from `.merke` to `.steg-merke` (nettstad.mjs) so the process page's grid could restyle it without touching the site's shared eyebrow class. The rename moved it OUT of the four rules above, so on every sheet page that is not the process page the label fell back to the dark ground's ink: MEASURED on the rendered /how-a-film-gets-made.html, six labels at rgba(247,243,234,.62) on the sheet, 1.04:1, which is invisible. This is the rule that puts them back. */ .papir .steg .steg-merke{margin-top:var(--s4);color:var(--papir-ink3)} .papir .steg .stegin > * + *{margin-top:var(--s4)} .papir .steg a{color:var(--papir-aksent)} .papir .steg b,.papir .steg strong{color:var(--papir-ink)} /* ══ THE READING AXIS ═════════════════════════════════════════════════════════════════════════ ONE AXIS PER PAGE. The owner's complaint was exact: headings centred, paragraphs left, numbers right, and the eye walking a zigzag down the page. So a page rendered by nettstad.mjs carries data-nettstad on its body, and everything inside
obeys one rule: the reading column is left, and it is left at ONE x, from the title in the dark to the last line on the sheet. The hero keeps the column's own width rather than the site's 76rem, so the title and the first paragraph under it start on the same edge as the body of the piece. Two blocks are allowed to be wider than the column and neither of them is prose: the contents ribbon at the top of the sheet, and the footer's five columns, which now carry the legal and trust page of the site as well. A sentence is never wider than the measure, because a long line is the fastest way to lose a reader who is deciding whether to start. Centred survives in exactly two places on a reading page: the claim at the top, and the closing call at the foot. `.les-flate` is the one idea underneath it: a block that is as wide as the reading column, with its contents left aligned inside it. A figure, a diagram, a table or a block of steps is an island of the same width, never narrower and never wider, so nothing on the sheet breaks the edge. */ .bla{position:relative;z-index:2} /* A READING PAGE DOES NOT USE THE LANDING PAGE'S HERO, and this is a correction rather than a rename. The article header used to carry `class="hero"`, and `univers.css` has `.hero h1{font-size:var(--t-display)}` for the landing page, where a title IS the display face set for the back row. On an article that rule won, because the scoped rule below it never named a font size: the title came out at 96 pixels inside a 527 pixel column, the first thing a reader meets was five narrow lines with an empty right half, and it was the same on every article and every chapter. Two things fix it and both of them matter: · the header has its own name, `.inngang`, so nothing about the landing page's hero can reach it; · every property that decides how the title looks is stated here, so a later change to the base sheet cannot silently win again. A reader's first line is the last place to find that out from a screenshot. */ /* THE ENTRY BLOCK KEEPS THE PAGE'S WIDTH FOR ITS HEADLINE AND THE COLUMN'S EDGE FOR EVERYTHING. A headline is a shape and not a sentence to be read line by line, so it is not held to the measure the way a paragraph is. What it must not have is a different left edge from the body of the piece: the first thing a reader meets and the thing they then read have to line up, or the page reads as two pages. So the block is the reading column's own width, 31em of text plus its gutter, and the title simply fills it: 1152 pixels of room at 56 pixels of type, which sets this title on two lines instead of six, with the eyebrow, the title, the standfirst and the first paragraph all starting at one x. The standfirst and the counter keep the measure, because those are read rather than looked at. */ [data-nettstad] .inngang{position:relative;z-index:2;max-width:var(--målegr);box-sizing:content-box; margin:0 auto;padding:clamp(2.5rem,7vh,5rem) var(--s6) var(--s6);text-align:left} [data-nettstad] .inngang .tittel{font-size:var(--t-h1);line-height:1.06;letter-spacing:-.022em; font-family:var(--srift-inn-brand);font-weight:400;color:var(--ink);margin:0;max-width:none; text-align:left} [data-nettstad] .inngang .under{font-size:var(--t-lead);line-height:1.55;color:var(--ink2);margin:var(--s4) 0 0; max-width:31em;text-align:left} [data-nettstad] .inngang .teljar{margin:var(--s5) 0 0;font-size:var(--t-small);color:var(--ink3); max-width:31em;text-align:left} [data-nettstad] .inngang .kicker{margin:0 0 var(--s4);text-align:left} /* ── the lead picture: one real photograph under the standfirst, on the dark ground ──────────────── The entrance column is deliberately the width of the prose and shares its left edge with it, so a photograph set inside that column would be a thumbnail. This one takes the widest measure on the site instead, the same 76rem the contents list uses, and stays centred on the page. The caption keeps the reading measure and is centred with it, because a caption is read, like the prose it sits above. Nothing here touches any page that has no lead picture. */ [data-nettstad] .inngangsbilete{position:relative;z-index:2;max-width:var(--kant-vid);box-sizing:content-box; margin:var(--s7) auto 0;padding:0 var(--sidegate)} .inngangsbilete img{display:block;width:100%;height:auto;border:1px solid var(--kant2);border-radius:var(--radius)} .inngangsbilete figcaption{margin:var(--s4) auto 0;max-width:var(--målegr);font-size:var(--t-small); line-height:1.65;color:var(--ink3)} .inngangsbilete figcaption .kjelde{display:block;margin-top:var(--s1);color:var(--ink3)} .inngangsbilete figcaption .kjelde a{color:var(--ink3);text-decoration:none;border-bottom:1px solid var(--kant); transition:color .18s ease,border-color .18s ease} .inngangsbilete figcaption .kjelde a:hover{color:var(--ink2);border-bottom-color:var(--kant2)} [data-nettstad] .vidare, [data-nettstad] .avslutning{max-width:var(--målegr);box-sizing:content-box} .les-flate{position:relative;z-index:2;max-width:var(--målegr);margin:0 auto;padding:0 var(--sidegate); box-sizing:content-box} .les-flate > * + *{margin-top:var(--s5)} /* the sheet sets its own padding to zero because every block inside it carries the column's gutter instead, and the reading column below is centred and measured in its own right. IT HAVE TO BE BOTH: `margin:0 auto` and the measure. An earlier version of this line set `max-width:none` so that the full-width blocks inside could reach the sheet's edges, and that quietly handed the PROSE the whole page: on the deployed article the paragraphs were 1376 pixels wide, which is not a reading measure, it is a line of type with no end. The full-width blocks do not need it either, because they are centred on their own. */ [data-nettstad] .papir{padding-left:0;padding-right:0} [data-nettstad] .papir .les{margin:0 auto;max-width:var(--målegr);padding:0 var(--sidegate)} [data-nettstad] .papir .les > .les-flate{padding:0} [data-nettstad] .les{max-width:var(--målegr)} [data-nettstad] .vidare{padding:0 var(--sidegate)} [data-nettstad] .avslutning{padding-left:var(--s5);padding-right:var(--s5)} /* the brand wash is on the ground behind the black; the sheet is a sheet, and stays one */ html[data-brand="1"] .bla::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none; opacity:.28;mix-blend-mode:overlay; background:radial-gradient(80% 60% at 12% 0%, color-mix(in srgb, var(--accent) 42%, transparent) 0%, transparent 70%)} /* ── where the eye goes next, at the foot of every section ─────────────────────────────────── A reader should never finish a section and not know what to do. This is one line, at the end of every section, naming the next one by its own title; on the last section of a chapter it names the next chapter. It is HTML, not script, so it is there with JavaScript off. The link is spelled out rather than inherited, because the sheet's link colour is set for a sheet of paper and this line sits at the END of a section, where the rule above it is what separates it: the first version left the word «What drives the number» in the same colour as the rule beside it. */ .papir .les .vidare-steg{margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--papir-kant); font-size:var(--t-small);color:var(--papir-ink3);display:flex;gap:.5rem;align-items:baseline; flex-wrap:wrap} /* ── THE ONE LINK THAT IS A BUTTON WEARING A SENTENCE'S CLOTHES ──────────────────────────────── MEASURED with `ops/verktoy/trykkflate.mjs` at 390 across the articles: seven controls under 44 on every long piece, all of them this line, at 26.7 pixels tall. The instrument exempts links that are inline inside a sentence and does not exempt these, and it is right not to: "Next in this piece" is the only way on from the section a reader has just finished, and a 27 pixel target for the one control at the end of a section is the fault the bar was redesigned for. The exemption is earned rather than assumed, and this line did not earn it. IT IS `inline-flex` AND NOT `grid` for the reason the rule above sets `display:flex`: it inherits `display:grid` from `.vidare-steg, .opning` in the measure block, which makes it a block level box and takes it out of the sentence it is written in. */ .papir .les .vidare-steg a{color:var(--papir-ink);text-decoration:underline; text-decoration-thickness:1px;text-underline-offset:3px;border:0; display:inline-flex;align-items:center;min-height:44px;min-width:44px;box-sizing:border-box;padding:11px 2px} .papir .les .vidare-steg a:hover{color:var(--papir-aksent);text-decoration-thickness:2px} .papir .les .vidare-steg .pil{color:var(--papir-aksent);font-size:.95rem;line-height:1;text-decoration:none} .slutt-pa-stykket{max-width:var(--målegr);margin:var(--s8) auto 0;padding:var(--s5) var(--s6) 0; box-sizing:content-box;border-top:1px solid var(--papir-kant);font-size:var(--t-small); color:var(--papir-ink3)} .slutt-pa-stykket span{color:var(--papir-ink)} .slutt-pa-stykket a{color:var(--papir-ink2);text-decoration:none;border-bottom:1px solid var(--papir-kant)} .slutt-pa-stykket a:hover{color:var(--papir-aksent);border-color:var(--papir-aksent)} /* ── two shapes the legal pages need, and nothing else on the site uses ────────────────────── A NOTE THE READER MUST NOT MISS, and a table that has to survive a phone. `.notat` marks the places where a decision belongs to a lawyer rather than to the writer. It is set as a small card rather than as another paragraph, because the whole point of it is that an ordinary sentence and a legal question must not look alike. It works on the dark ground and on the sheet, which is why it takes from both sets of tokens. A TABLE ON A PHONE SCROLLS ITSELF. The figure block learned this first (see `.figur .teikning` below): at 390 a four column table set to the column width turns eleven pixel type into five. So a table keeps a floor of its own, is a block that scrolls sideways inside its own frame, and the page never scrolls sideways because of it. */ .les .notat{font-size:var(--t-small);line-height:1.7;color:var(--ink2); border:1px solid var(--kant2);border-left:3px solid var(--accent);border-radius:var(--radius); padding:var(--s4) var(--s5);background:rgba(255,255,255,.02)} .les .notat b{color:var(--ink);font-weight:600} .papir .les .notat{color:var(--papir-ink2);border-color:var(--papir-kant); border-left-color:var(--papir-aksent);background:var(--papir-2)} .papir .les .notat b{color:var(--papir-ink)} /* ── A TABLE IS WIDER THAN A PARAGRAPH, AND THAT IS WHY IT DOES NOT OBEY THE MEASURE ───────────── The subprocessor list has four columns and one of them carries sentences. Measured at 1440: held to the reading column's 31em, that column was about a hundred pixels wide, every row ran to five lines, and the table was unreadable in the one direction a table exists to fix. So a table gets a floor of its own (30rem) and is allowed to be wider than the prose beside it, up to the widest measure on the site (76rem, the same ceiling a figure uses). Below the floor the frame scrolls sideways inside itself, so at 390 the page still never scrolls sideways; it is the paper that moves. AND THE FLOOR IS A MAXIMUM, WHICH IS THE PART THAT WAS MEASURED. `width:max(100%,30rem)` reads as "at least the frame, at least thirty rem", and a table does not get the second half of that: the frame was 342 wide at 390 and the table laid itself out at 480, so the PAGE gained a horizontal scrollbar and `documentElement.scrollWidth` measured 504 against a 390 viewport. The floor therefore has to be capped by the frame, not the other way round: `min(100%, 30rem)` is a minimum that can never be wider than what holds it. Verified by measurement at both 390 and 1440 after the change. */ .les table{display:block;overflow-x:auto;overscroll-behavior-x:contain; width:min(100%,var(--kant-vid));min-width:min(100%,30rem); border-collapse:collapse;font-size:var(--t-small);line-height:1.6} .les th,.les td{text-align:left;vertical-align:top;padding:var(--s3) var(--s4) var(--s3) 0; border-bottom:1px solid var(--papir-kant);white-space:nowrap} .les th:nth-child(2),.les td:nth-child(2),.les th:nth-child(4),.les td:nth-child(4){white-space:normal} .les th:nth-child(1),.les td:nth-child(1){width:7rem} .les th:nth-child(2),.les td:nth-child(2){width:10rem} .les th:nth-child(4),.les td:nth-child(4){width:7rem;padding-right:0} .les th{font:500 var(--t-label)/1.4 var(--srift-ut-brand);letter-spacing:.12em;text-transform:uppercase; color:var(--papir-ink3)} .les tbody td{color:var(--papir-ink2)} .les tbody td:first-child{color:var(--papir-ink)} /* ── a figure: a drawing, and the sentence that says what it is ────────────────────────────── The caption is part of the figure, not a note under it, and it is always set in the same place, so a reader learns after the first one where to look. */ .figur{margin:var(--s8) 0 0;padding:0} /* ── ONE FIGURE IS TWO DRAWINGS, AND THIS IS WHERE THE WIDTH PICKS ONE ─────────────────────────── MEASURED 17.09.2026 in Chrome, on the six pages that carry a figure (`ops/verktoy/_figur-maaling.mjs`): the drawing canvas is 560 units wide, the frame gives it 1102 pixels at 1440 so its type is multiplied by 1.97 and reads at 21.7 to 37.4 pixels, and the same frame gives it 303 pixels at 390 so the same type reads at 6.0 to 10.3. There is no number of viewBox units that is right at both: 15 units is 30 pixels of type on a laptop, and 6 on a phone, and the two scales differ by 3.6 times. So the phone gets a different drawing of the same numbers, authored on a 280 unit canvas: in a 303 pixel frame that canvas is scaled by 1.08, which prints 15 units at 16.3 pixels and 19 at 20.6. The narrow drawing is not the wide one shrunk, it is a stacked one, and it is the reason the phone no longer needs to be handed a sideways scrollbar to read a diagram. WHY A MEDIA QUERY AND NOT A SCRIPT: both drawings are in the HTML and exactly one is displayed, so with JavaScript off a phone still gets the readable one. `.smal` first in the markup so that a narrow browser has the box it will actually show before the one it will not. */ .figur .smal{display:none} /* A DRAWING IS NOT A PARAGRAPH, and on a phone it does not get the reading measure. The first version scaled every figure to the column, which at 390 turned a table set at thirteen pixels into a table at five, and a word like «stopped» into «stoppe». The frame that held the wide drawing therefore keeps a floor of its own and scrolls sideways inside itself when a drawing is wider than the page: the reader moves the paper rather than squinting at it. The frame is exactly as wide as the drawing needs, so nothing is cut off at the left, and the ceiling is the drawing's width on paper, so nothing overflows the page at 1440 either. Both bounds are responsive; neither is a fixed width. */ .figur .teikning{background:var(--papir-2);border:1px solid var(--papir-kant);border-radius:var(--radius); padding:var(--s5) var(--s5) var(--s4);overflow-x:auto;overscroll-behavior-x:contain} .figur svg{display:block;height:auto;width:max(100%,19rem); max-width:max(100%,calc(var(--målegr) + 2 * var(--s5) - 2 * var(--s6)))} /* THE NARROW DRAWING IS THE WIDTH OF ITS FRAME, not wider, so the frame never scrolls sideways and the page never does either. It must also NOT inherit the 19rem floor above, and that is a measurement rather than tidiness: MEASURED at 390, the floor made the narrow canvas 304 pixels wide instead of the 303 the frame had, so its type printed at 16.42 pixels instead of the 16.24 the drawing was measured at, and a label 351 pixels wide was reported as hanging off a canvas that is 303 wide. A floor on a drawing that already fits is a floor that moves every number in it. AND A FIGURE MAY HAVE ONLY THE NARROW DRAWING. The gates page does: its wide layout was authored on 780 units and printed at 7.95 pixels on a laptop, so the narrow drawing is the drawing it has. The media query below hides `.vid` on a phone and shows `.smal`, which would leave that page with an EMPTY FRAME at every width above 640 and no drawing at all, so an only-of-type drawing is shown at every width instead. MEASURED the moment this was wrong: the gates figure was 0 by 0 at 1440 with its caption still under it. */ .figur .teikning > svg:only-of-type{display:block} @media(max-width:700px){ .figur svg.vid{display:none} /* ══ A PHONE WAS SHOWING BOTH DRAWINGS, AND THE WIDE ONE UNREADABLE (measured 18.09.2026) ═══════════ `figurHTML` puts TWO drawings in the markup and this media query is supposed to show one. It hid `svg.vid`, which assumes the wide drawing carries that class — and it usually does not: measured on reading-your-brand.html at 390, the wide drawing's class is EMPTY, so nothing hid it. The figure `lesing` therefore rendered both: the narrow drawing at 303px with its smallest label at 26 pixels, and the wide drawing squeezed into the same 303px, scale 0.54, with its smallest label at NINE. Both computed to `display:block`, and every ancestor was visible, so a reader on a phone got an unreadable second copy of the same figure under the readable one. WHY THIS SELECTOR AND NOT A CLASS IN THE MARKUP: the wide drawing is whatever a figure's `svg()` returns, and each figure writes its own opening tag, so a rule that depends on all of them remembering `class="vid"` is a rule that will be wrong again on the next figure. This asks the structure instead: any child of the drawing frame that is not the narrow one goes, unless it is the ONLY one, which is how a figure that has just one drawing keeps it (`:only-of-type`, the rule directly above). */ .figur .teikning > svg:not(.smal):not(:only-of-type){display:none} .figur svg.smal{display:block;width:100%;max-width:100%} } .figur figcaption{margin-top:var(--s4);font-size:var(--t-small);line-height:1.65;color:var(--papir-ink3); max-width:52ch} .figur figcaption b{display:block;font-weight:600;color:var(--papir-ink);margin-bottom:.15rem; font-size:var(--t-body);line-height:1.4} .figur .kjelde{color:var(--papir-ink3)} /* the picture credit is a link a reader can press, so it is as tall as one: MEASURED at 390 with `ops/verktoy/trykkflate.mjs`, 21 pixels on the six articles that carry a photograph. It stays inside the caption and reads as one line of it; only its own box grows. */ .figur .kjelde a{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box} /* ── a row of real examples ───────────────────────────────────────────────────────────────── Every caption says what the picture is and where it came from. A still with no caption is a decoration, and decoration is what the competition has. */ .dome{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--s5); margin:var(--s8) 0 0} .dome-bilete{margin:0} .dome-bilete img{display:block;width:100%;height:auto;border:1px solid var(--papir-kant); border-radius:var(--radius);background:var(--papir-2)} .dome-bilete figcaption{margin-top:var(--s3);font-size:var(--t-small);line-height:1.6;color:var(--papir-ink3)} .dome-bilete .kjelde{display:block;color:var(--papir-ink3)} /* ── the pull quote ───────────────────────────────────────────────────────────────────────── A sentence that has to be read twice. It is set as one line of display type on the same left edge as the paragraph above it, with a rule over it rather than a bar beside it, because a bar beside a quote is a shape a reader has to decode and a rule above one is just a pause. */ .papir .les blockquote{margin:var(--s8) 0;padding:var(--s5) 0 0;border:0; border-top:1px solid var(--papir-aksent);font-family:var(--srift-inn-brand); font-size:clamp(1.4rem,2.1vw,1.75rem);line-height:1.28;letter-spacing:-.01em;color:var(--papir-ink); max-width:34ch} .papir .les blockquote{border-top-color:var(--papir-aksent)} /* ── a list that is really a definition ───────────────────────────────────────────────────── Where every item opens with a bold phrase, the phrase is the term and the rest is the definition, so it is set as one: the term on the left at a fixed width, the definition beside it, both on the same baseline grid. This is what the pages that carry tables are really made of. */ .papir .les dl.omgrep{margin:var(--s6) 0 0;display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr); gap:var(--s5) var(--s5);align-items:baseline} .papir .les dl.omgrep dt{color:var(--papir-ink);font-weight:600;line-height:1.45} .papir .les dl.omgrep dd{margin:0;color:var(--papir-ink2);line-height:1.7} @media(max-width:700px){ .papir .les dl.omgrep{grid-template-columns:minmax(0,1fr);gap:var(--s2) 0} .papir .les dl.omgrep dd{margin-bottom:var(--s4)} } /* ── a table of figures on paper ──────────────────────────────────────────────────────────── Only for a column of numbers, where the shared right edge is what makes it readable. Nothing else is ever right aligned, and a sentence never is. */ .papir .tal-tabell{width:100%;border-collapse:collapse;margin:var(--s7) 0 0; font-size:var(--t-body);font-variant-numeric:tabular-nums} .papir .tal-tabell caption{text-align:left;font-size:var(--t-small);color:var(--papir-ink3); padding-bottom:var(--s4);max-width:52ch;line-height:1.6} .papir .tal-tabell caption b{display:block;color:var(--papir-ink);font-size:var(--t-body); font-weight:600;margin-bottom:.15rem} .papir .tal-tabell th,.papir .tal-tabell td{padding:var(--s4) var(--s3) var(--s4) 0; border-top:1px solid var(--papir-kant);text-align:left;vertical-align:baseline} .papir .tal-tabell thead th{font:500 var(--t-label)/1.4 var(--srift-ut-brand);letter-spacing:.08em; text-transform:uppercase;color:var(--papir-ink3);border-top:0;padding-bottom:var(--s3)} .papir .tal-tabell tbody th{font-weight:400;color:var(--papir-ink);font-family:var(--srift-inn-brand); font-size:1.2rem;white-space:nowrap;padding-right:var(--s5)} .papir .tal-tabell td{color:var(--papir-ink2)} .papir .tal-tabell .tal{text-align:right;padding-right:0;padding-left:var(--s5);color:var(--papir-ink); font-family:var(--srift-inn-brand);font-size:1.35rem;white-space:nowrap} .papir .tal-tabell .eining{display:block;font-family:var(--srift-ut-brand);font-size:var(--t-small); color:var(--papir-ink3);letter-spacing:0;margin-top:.15rem} .papir .tal-tabell tbody tr:last-child th,.papir .tal-tabell tbody tr:last-child td{ border-bottom:1px solid var(--papir-kant)} @media(max-width:520px){ .papir .tal-tabell,.papir .tal-tabell thead,.papir .tal-tabell tbody, .papir .tal-tabell tr,.papir .tal-tabell th,.papir .tal-tabell td{display:block} .papir .tal-tabell thead{display:none} .papir .tal-tabell tr{border-top:1px solid var(--papir-kant);padding:var(--s4) 0} .papir .tal-tabell th,.papir .tal-tabell td{border:0;padding:0} .papir .tal-tabell .tal{text-align:left;padding-left:0} } /* ── the index: the newest piece is a piece, not a row, and every row says what it is ─────── */ .innhald .fyrst{display:block;padding:var(--s6) 0 var(--s6);text-decoration:none; border-top:1px solid var(--kant2)} .innhald .fyrst h2{font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.1;margin:var(--s3) 0 var(--s4); max-width:24em;letter-spacing:-.02em} .innhald .fyrst p{color:var(--ink2);font-size:var(--t-lead);line-height:1.55;max-width:31em;margin:0} .innhald .fyrst .rader{display:flex;gap:var(--s4);align-items:center;margin-bottom:var(--s2); flex-wrap:wrap} .innhald .fyrst:hover h2{color:var(--accent)} .innhald .les-denne{display:inline-flex;align-items:center;gap:.5rem;margin-top:var(--s5); font-size:var(--t-small);color:var(--ink3)} .innhald .les-denne .pil{color:var(--accent);transition:transform .18s ease} .innhald .fyrst:hover .les-denne{color:var(--ink)} .innhald .fyrst:hover .les-denne .pil{transform:translateX(4px)} .innhald .meir{font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3); padding:var(--s7) 0 var(--s4);display:flex;gap:.6rem;align-items:baseline; border-bottom:1px solid var(--kant)} .innhald .meir i{font-style:normal;color:var(--ink3);letter-spacing:0;font-variant-numeric:tabular-nums} /* the group and the date, printed on the row, so a reader can see what kind of thing they are choosing between without having to remember the heading above it. Two lines, not three: a date on its own line and a reading time on another turns a row into a column of small print whose left edge has nothing to do with the sentence beside it, which is the alignment the whole page is trying to avoid. The date and the time share one line; the group owns the line under them. */ .innhald .side{display:flex;flex-direction:column;gap:.25rem;text-align:left} .innhald .side .rad{display:flex;gap:.5rem;align-items:baseline;font-size:var(--t-small); color:var(--ink3);font-variant-numeric:tabular-nums;white-space:nowrap} .innhald .side .kategori{color:var(--ink2);font-size:var(--t-small);letter-spacing:.01em} /* ══════════════════════════════════════════════════════════════════════════════════════════════════ THE ARTICLES INDEX, REBUILT. 17.09.2026. WHY. The owner, of this page and its neighbours: "everything about the About page, articles, and similar content is design-wise fucking incredibly terrible". He is not asking for more words. He is saying the page is ugly and that he does not want to scroll, and the standing rule is his too: "Users hate scrolling." WHAT WAS THERE, MEASURED on the rendered page at 1440 before this block, and each number is a separate fault: 5687 pixels tall, 6.3 screens of a 900 pixel window; 24 rows, every one of them the same shape on the same left edge in the same type, 62 pixels apart; ZERO pictures, although 19 of the 31 pieces have a real photograph of their own sitting in /articles/bilete/ and their own article pages show it, so the index did not show the reader that the writing is illustrated, it only said so; 348 of its 1098 words were the same repeated shape: a title, then the piece's first sentence, then a kind label, twenty-four times; and the first sentence of every piece was printed on the index AND again on the piece, which is a whole screen of duplicated words in one scroll. WHAT THIS IS NOW. Three cards with a photograph each, then compact rows: a thumbnail where the piece has one, the title, the one line, and the kind, the reading time and the date pushed to the right edge so the eye has a column to run down instead of a wall to read across. THE ROWS ARE TWO COLUMNS ON A DESKTOP AND ONE ON A PHONE, and they stay in date order inside each group, because a reader who wants the newest thing should not have to learn a sort to find it. NOTHING IS HIDDEN AND NOTHING IS FOLDED: every one of the 31 pieces is a link in the HTML, with no script, no tab and no "show more". A page that hides eighteen links behind a button is a page that has moved the scroll rather than removed it. */ .innhald .kort{display:grid;gap:var(--s6);margin-top:var(--s4)} .innhald .kort a{display:grid;grid-template-rows:auto auto;gap:var(--s4) 0;align-content:start; padding:0;border:0;opacity:1;text-decoration:none} .innhald .kort a:hover{opacity:1} .innhald .kort a:hover h2{color:var(--accent)} /* the picture is the piece's own, so it keeps the sheet's rule and radius: it is an object on the page */ .innhald .kort .bilete{display:block} .innhald .kort img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover; border:1px solid var(--kant);border-radius:var(--radius);background:var(--flate)} .innhald .kort .kropp{display:grid;gap:var(--s2);align-content:start} .innhald .kort .rader{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:baseline; font-size:var(--t-small);color:var(--ink3);font-variant-numeric:tabular-nums} .innhald .kort .rader .kategori{color:var(--ink2)} .innhald .kort h2{font-size:clamp(1.25rem,1.6vw,1.5rem);line-height:1.22;letter-spacing:-.015em;margin:0} .innhald .kort p{margin:0;color:var(--ink2);font-size:var(--t-body);line-height:1.6} @media(min-width:901px){ .innhald .kort{grid-template-columns:repeat(3,minmax(0,1fr))} } /* the rows: a thumbnail, the writing, and the facts, on one line, and TWO rows per line on a desk */ .innhald .rekkjer{display:grid;gap:0 var(--s8);margin-top:var(--s4)} /* EVERY CHILD IS PLACED. Auto-placement into a `1fr auto` pair put the facts in their own elastic column and then let that column decide the width of the whole row: MEASURED by ops/e2e at 768, the articles index had a document scrollWidth of 816 against a 768 pixel viewport, a 48 pixel sideways scroll, and the element crossing the edge was `.side`, the category, the reading time and the date. The right column is a fixed 9rem with the facts right aligned inside it, so a long date and a long category cannot push the page sideways at any width. */ .innhald .rekkjer a{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(7rem,9rem); gap:var(--s2) var(--s5);align-items:start;padding:var(--s4) 0;border-top:1px solid var(--kant); opacity:1;text-decoration:none} .innhald .rekkjer a:hover{opacity:1} .innhald .rekkjer a:hover h3{color:var(--accent)} .innhald .rekkjer .bilete{grid-column:1;grid-row:1/3;display:block;align-self:start} .innhald .rekkjer .kropp{grid-column:2;grid-row:1/3;display:grid;gap:var(--s1);min-width:0} .innhald .rekkjer img{display:block;width:96px;height:54px;object-fit:cover;border:1px solid var(--kant); border-radius:6px;background:var(--flate)} .innhald .rekkjer h3{font-size:1.0625rem;line-height:1.3;margin:0;letter-spacing:-.005em} .innhald .rekkjer .kva{color:var(--ink3);font-size:var(--t-small);line-height:1.5; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .innhald .rekkjer .side{grid-column:3;grid-row:1/3;display:flex;flex-wrap:wrap;gap:.2rem var(--s3); align-items:baseline;font-size:var(--t-small);color:var(--ink3);font-variant-numeric:tabular-nums; white-space:nowrap;justify-content:flex-end;text-align:right} .innhald .rekkjer .side .kategori{color:var(--ink2)} @media(min-width:901px){ .innhald .rekkjer{grid-template-columns:repeat(2,minmax(0,1fr))} } /* AT 390 THE FIRST ATTEMPT SCROLLED THE PAGE SIDEWAYS, and this is the measurement rather than the impression: documentElement.scrollWidth was 472 against a clientWidth of 390, an 82 pixel leak, and the widest things on the page were the three facts on a row (.side, 176 pixels of category, reading time and date) being laid into a grid track of their own inside a 226 pixel row. The row is now thumbnail, writing, and the facts UNDER the writing on one line, which is the shape the phone rule for the row list already used before this pass, so nothing new is invented here. */ @media(max-width:700px){ .innhald .kort{gap:var(--s7)} .innhald .rekkjer{gap:0} /* EVERY CHILD IS PLACED BY HAND, and that is the fix rather than a tidiness. `.side` had no explicit placement, so auto-placement put it in a THIRD, implicit column sized to its own 176 pixels, and the row it belonged to grew to 443 pixels inside a 390 pixel screen: that is where the 53 pixel sideways scroll came from, and a scrollbar is not something a reader should have to discover. */ .innhald .rekkjer a{grid-template-columns:auto minmax(0,1fr);gap:var(--s2) var(--s4)} .innhald .rekkjer .bilete{grid-column:1;grid-row:1/3} .innhald .rekkjer .kropp{grid-column:2;grid-row:1} .innhald .rekkjer .side{grid-column:2;grid-row:2;justify-content:flex-start;text-align:left; flex-wrap:wrap;white-space:normal} .innhald .rekkjer img{width:72px;height:54px} } /* the chapters: ten in order, each with the one line that says what it is for */ .innhald.kapittel a{grid-template-columns:3rem 1fr auto;gap:var(--s4) var(--s5)} .innhald.kapittel .nr{font-family:var(--srift-inn-brand);font-size:1.5rem;line-height:1.2;color:var(--ink3); font-variant-numeric:tabular-nums} .innhald.kapittel a:hover .nr{color:var(--accent)} .innhald.kapittel a:hover{opacity:1} .innhald.kapittel a:hover h3{color:var(--accent)} /* ── the contents page: ten chapters, seen whole ────────────────────────────────────────────── WHY THE ROWS BECAME CARDS. The owner, 17 September 2026: "The vertical split, with 1, 2, 3, 4, 5, 6, 7, 8, 9, and 10, is a scrolling nightmare." He is describing the shape of the old page exactly: ten full width rows, one under the next, each one a stop on a single vertical line. MEASURED at 1440 that page was 2578 pixels tall and the tenth chapter began about 2.4 screens down. The card keeps everything the row kept and needs no second column of its own: the number in the top left, the reading time in the top right, the title under them at the size a title deserves rather than at the size of a row, and the chapter's own first sentence under that. THE GRID IS TWO COLUMNS, NOT THREE. Three would fit at 1440 and would measure about 34 characters for the line under a title, which is the fault this whole pass exists to fix. Two columns measure 82 characters there, and the grid falls to one column at 860, where a phone has one anyway. THE RULES ARE PER CARD, NOT PER ROW, so no row of the grid can draw a rule that stops in the middle of the page, and the first row and the last row both read as finished. */ .innhald .rutenett{display:grid;gap:0 var(--s7);margin-top:var(--s4)} /* the group label on this page is a label, not a divider: on the index the same class sits over a list of rows and its padding is what separates one group from the last row of the group above. Here there is one group, the grid carries its own rules, and MEASURED the padding alone was 64 of the 84 pixels the label occupied, which is most of a chapter card spent saying nothing. */ .innhald.kapittel .meir{padding:0 0 var(--s4)} /* THE CARD IS DENSE ON PURPOSE, and the numbers are here because they were the owner's complaint. MEASURED at 1440, one card before this pass: 148 to 174 pixels. After it: 116 to 140. The saving is in the padding (24 to 12), the gap between the number line and the title (12 to 8), the line height of the line under the title (1.75 to 1.6) and one line of that line's own measure. The ten of them therefore stand 684 pixels tall together instead of 816, and the last one arrives 1.3 screens down the page instead of 2.4. */ /* AND THE NUMBER ON A CARD IS TEXT, so it is `--ink3` rather than the rule colour it wore: measured on the rendered chapter list, `--ink4` at 28% was 2.42:1 for a 1.5rem numeral reading "01". */ .innhald .rutenett a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas: 'nr . min' 'tekst tekst tekst';gap:var(--s2) 0;align-items:baseline; padding:var(--s4) 0;border-top:1px solid var(--kant);opacity:1} .innhald .rutenett a:last-child{border-bottom:1px solid var(--kant)} .innhald .rutenett a:nth-last-child(2){border-bottom:1px solid var(--kant)} .innhald .rutenett .nr{grid-area:nr;font-family:var(--srift-inn-brand);font-size:1.5rem;line-height:1.1; color:var(--ink3);font-variant-numeric:tabular-nums} .innhald .rutenett .min{grid-area:min;font-size:var(--t-small);color:var(--ink3);white-space:nowrap} .innhald .rutenett .tekst{grid-area:tekst;display:grid;gap:var(--s1)} .innhald .rutenett h3{font-size:1.3125rem;line-height:1.25;margin:0;letter-spacing:-.01em} .innhald .rutenett .kva{margin:0;max-width:38em;line-height:1.6} .innhald .rutenett a:hover .nr{color:var(--accent)} .innhald .rutenett a:hover h3{color:var(--accent)} @media(min-width:901px){ .innhald .rutenett{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ── the brand wash ─────────────────────────────────────────────────────────────────────────── THE IDEA, from the owner of the product, 16.09.2026: when a page has read somebody's brand it should not merely switch an accent colour on. It should look as though the room quietly changed to their colour while they were reading. His words: a slight blend mode, overlay, but changed towards the colour in the background, so elements turn into their style while the text we have stays readable. WHAT MAY CHANGE, and what may not: the ground a wash of their colour at low strength, in overlay, so black stays black and picks up a hue rather than becoming a colour; the marks rules, the perforation, numerals, the dust, list markers and links take the accent at strength, because they carry no meaning that contrast can lose; the paper the reading sheet takes a whisper of it, the way a printed page takes the ink of the room it was printed in; the text NEVER. Body colour, link legibility and every contrast floor are fixed, and the accent is darkened before it is used for anything that has to be read (see --papir-aksent and the checker in univers.js). HOW IT SWITCHES ON. `data-brand="1"` on , set by the theme the moment a brand is known. Nothing before that moment changes, so a first visit is still black and white and the change is something a reader watches happen rather than something they are told about. */ :root{ --vask:0 } html[data-brand="1"]{ --vask:1 } #vask{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:calc(var(--vask) * .5); transition:opacity 1.2s ease;mix-blend-mode:overlay; background: radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--accent) 55%, transparent) 0%, transparent 60%), radial-gradient(90% 60% at 100% 100%, color-mix(in srgb, var(--accent) 34%, transparent) 0%, transparent 70%); } /* A mark, for the few phrases that deserve to be their colour: a tint behind the words rather than a colour in them, so the sentence keeps its contrast and the emphasis is visible at a glance. */ .mark{background:linear-gradient(transparent 62%, color-mix(in srgb, var(--accent) 38%, transparent) 0); padding:0 .06em;border-radius:1px} .papir .mark{background:linear-gradient(transparent 62%, color-mix(in srgb, var(--papir-aksent) 26%, transparent) 0)} html[data-brand="1"] .papir{background:color-mix(in srgb, var(--papir) 96%, var(--accent))} html[data-brand="1"] .innhaldsliste a::before, html[data-brand="1"] .les h2.avsnitt .merke, html[data-brand="1"] .figur figcaption b{color:var(--papir-aksent)} html[data-brand="1"] .topp .merkelink svg, html[data-brand="1"] .slutt .merke svg, html[data-brand="1"] .lese-topp .kven .merke svg{color:var(--accent)} /* ── inputs ──────────────────────────────────────────────────────────────────────────────── */ .felt{display:block;width:100%;padding:.95rem 1.1rem;background:#0C0E10;border:1px solid var(--kant2); border-radius:var(--radius);color:var(--ink);font:var(--t-body)/1.4 var(--srift-ut-brand)} .felt:focus{outline:none;border-color:var(--ink)} .felt::placeholder{color:var(--ink4)} /* ── the phone ───────────────────────────────────────────────────────────────────────────── */ @media(max-width:700px){ /* THE BAR KEEPS ITS OWN FRAME. The old rule here was `padding:var(--s4) var(--s5)` on a flex row, which is where the four row phone layout came from: the bar's vertical padding is on .hald now (see the 900 pixel block above), and what is left here is the gutter, so the bar's words stay on the same edge as the page under them. */ .topp{padding-left:var(--s5);padding-right:var(--s5)} .hero,.les,.innhald,.avslutning,.slutt{padding-left:var(--s5);padding-right:var(--s5)} [data-nettstad] .inngang,[data-nettstad] .les,[data-nettstad] .les-flate, [data-nettstad] .lese-topp,[data-nettstad] .vidare,[data-nettstad] .avslutning, [data-nettstad] .inngangsbilete, [data-nettstad] .papir .les{padding-left:var(--s5);padding-right:var(--s5)} [data-nettstad] .inngang{padding-bottom:var(--s5)} .innhald a{grid-template-columns:1fr auto;gap:var(--s2) var(--s4)} .innhald .side{grid-column:1/2;grid-row:2;flex-direction:row;gap:var(--s4);flex-wrap:wrap; align-items:baseline} .innhald .side .kategori{order:3;flex-basis:100%} .innhald.kapittel a{grid-template-columns:2.25rem 1fr auto} .steg{grid-template-columns:1fr;gap:var(--s3)} .steg .nr{font-size:1.75rem} .verk{grid-template-columns:1fr;gap:var(--s3)} .verk .handling{grid-row:auto} .tal{gap:var(--s6)} .dome{grid-template-columns:1fr}} /* ── the sheet, on paper, for a reader who prints it ──────────────────────────────────────── */ @media print{ #stov,#vask,#framgang,#til-toppen,.topp,.avslutning,.slutt,.vidare,.slutt-pa-stykket{display:none} body{background:#fff;color:#000} .papir{margin:0;padding:0} .papir::before{display:none} /* a drawing printed at the width of a phone column would be five pixel type on A4, and the one thing that must not happen to a diagram is that it becomes unreadable in the copy somebody forwards */ .figur svg{width:100%;max-width:none} .figur .teikning{overflow:visible} .les h2.avsnitt{break-after:avoid} .figur,.steg,.dome{break-inside:avoid} } /* ========================================================================================== NINE: THE READING PAGES, MEASURED AND REBUILT. 17 September 2026. THIS BLOCK SUPERSEDES THE FULL WIDTH BLOCK THAT STOOD HERE (16.09.2026, "the page is the width of the window, the text column is the width of a sentence"). That block fixed one fault and opened three, and the owner read them all at once on 17 September: "the H1 and H2 on all articles are left-aligned instead of center-aligned, which looks very odd", "some kind of design rule that left-aligns fonts or gives them a very small width", "it is just a design mess". WHAT WAS WRONG, MEASURED at 1440 on /articles/ and /articles/your-colours-your-typeface.html before this block, with the block above it in force: the header, the index rows and the footer x=112 (76rem ceiling, 144 with their own gutter) the H1 and the standfirst x=32 (1280 ceiling, 32 gutter) the reading column and every paragraph x=32 the contents ribbon on the sheet x=120 the lead picture x=32, 1376 wide Five left edges on one page, and every one of them an accident of which ceiling its container happened to carry: 1280 for some, 76rem for others, and a content-box padding that turned 112 into 144. That is the "design rule that left-aligns fonts" the owner was describing. It was not a rule. It was three rules disagreeing. THE REPAIR IS ONE CEILING AND ONE AXIS. ONE CEILING. `--kant-vid`, 76rem, the site's existing widest measure, is the page. The header already used it, the footer already used it, the index rows already used it and the contents ribbon already used it. The blocks that did not, do now. ONE AXIS. Everything a reader's eye lands on stands on the container's own left edge: x=112 at 1440, x=24 at 390. The H1, the standfirst, the prose, the ribbon, the lead picture, the index rows and the footer all share it. Nothing is centred by accident and nothing is off the axis except the two ceremonies the sheet already allows (the claim at the foot, the closing call). CENTRED HEADINGS ARE THE OWNER'S DECISION, not a taste of mine, and they are scoped to the one place he asked for them: the article and the chapter. The H1, the H2 and the H2's own "Section 01" marker are centred over the measure. Prose, lists, tables and figures stay left, because a centred paragraph is a paragraph nobody finishes. On the index the newest piece's heading is centred with the hero it belongs to; the rows below it stay left, because a row has a date column on its left edge and a centred title over a left-aligned date is the zigzag this sheet exists to stop. The chapter rows on /how-it-works.html are left for the same reason: they carry a number. THE MEASURE IS DELIBERATE AND IT IS WRITTEN DOWN. `--målegr-les` was 36rem, about 70 characters, which is a correct measure and a thin page: the owner read it as "a very small width". It is 40rem now, about 78 characters at 19px, still inside the comfortable band and no longer a ribbon in the middle of a desk. It is capped by the screen so a phone is never affected. `--målegr` itself is NOT changed: it is read by steps, captions and figures across every page on the site. MEASURED AFTER, at 1440 and 390, in _bevis/lesing/tabell-etter.txt. */ :root{--målegr-les:min(40rem, 100%)} /* ── the head of a page is a unit, so its own gaps are the small ones ───────────────────────── MEASURED at 1440 on /how-it-works.html: the gap between the heading and the standfirst was the space scale's `--s4`, sixteen pixels, and the gap between the standfirst and the counter under it was `--s5`, twenty-four: the two sentences that belong together were further apart than the heading was from the first of them. Nothing outside the head of the page changes. */ [data-nettstad] .inngang .teljar{margin-top:var(--s4)} /* ── the page, one ceiling for every reading page ──────────────────────────────────────────── `.skall` is the container a nettstad page's intro block wears. The class is worn in the HTML rather than inferred here, because a rule that guessed which blocks are pages would break the first time a block was added. */ .skall{max-width:var(--kant-vid);margin-inline:auto;padding-inline:var(--sidegate);box-sizing:border-box} /* ── the intro block: the page's own container, and the title inside it ─────────────────────── `[data-nettstad]` is in both selectors so this beats the older `[data-nettstad] .inngang` rule above (which is content-box at 31em and was the reason the title started 80 pixels left of the header) and so it beats it for the right reason rather than by order of appearance. */ [data-nettstad] .inngang{max-width:var(--kant-vid);width:auto;box-sizing:border-box;margin-inline:auto; padding:clamp(2.25rem,6vh,4rem) var(--s6) clamp(1.25rem,2vw,2rem)} [data-nettstad] .inngang .tittel, [data-nettstad] .inngang .under, [data-nettstad] .inngang .teljar, [data-nettstad] .inngang .kicker{max-width:none} /* the heading is centred over the column its prose will use: 40rem, on the same centre */ [data-nettstad] .inngang .tittel{text-align:center;max-width:min(52rem,100%);margin-inline:auto} [data-nettstad] .inngang{text-align:center} /* ── the standfirst keeps a measure, and the page does not fall apart because of it ─────────── MEASURED at 1440 after taking the ceiling off the intro block: the standfirst, which is the largest body text on the page at 22 pixels, ran 1152 pixels wide, which is 114 characters. A sentence nobody can read to the end of is not a design decision, it is the same fault the owner was describing from the other side. So it is held to 34rem, which is about 76 characters at 22 pixels, centred on the same axis as the title above it and the prose below it. At 390 the screen is narrower than the measure and nothing changes. The counter line under it stays with it. */ [data-nettstad] .inngang .under, [data-nettstad] .inngang .teljar{max-width:min(34rem, 100%);margin-inline:auto;text-align:center} [data-nettstad] .inngang .kicker{text-align:center} /* ── the sheet, and the reading column on it ───────────────────────────────────────────────── */ [data-nettstad] .papir{padding-left:0;padding-right:0} [data-nettstad] .les{--målegr:100%;max-width:var(--kant-vid);width:auto;box-sizing:border-box; margin-inline:auto;padding-inline:var(--sidegate)} [data-nettstad] .papir .les{margin-inline:auto;max-width:var(--kant-vid);padding-inline:var(--sidegate)} [data-nettstad] .lese-topp{max-width:var(--kant-vid);padding-inline:var(--sidegate)} [data-nettstad] .vidare{max-width:var(--kant-vid);padding-inline:var(--sidegate)} [data-nettstad] .avslutning{--målegr:100%;max-width:var(--kant-vid);padding-inline:var(--sidegate)} /* the contents ribbon is a box that happens to be full width, and the words inside it keep the measure, so a reader does not have to cross a thousand pixels to read one line of a list */ [data-nettstad] .lese-topp .innhaldsliste{max-width:100%} /* ── where the words stop, and where a heading is centred ──────────────────────────────────── */ /* AND THE COLUMN IS CENTRED, WHICH IT WAS NOT (measured 17.09.2026, an article at 1440). The measure was already right. One line was missing, and the page told on itself the moment anything was measured instead of looked at: the title centred on 713 the standfirst centred on 713 the prose centred on 457 A heading centred over the page, with the paragraph it introduces sitting 256 pixels to its left, is the «very left aligned, looks odd» the owner kept describing. It is also why the sheet read as a thin ribbon: 640 pixels of words pinned to the left edge of a 1216 pixel shell, with 576 pixels of nothing beside them. The TEXT stays ragged-left inside the column; only the box moves. */ .les :where(p, h1, h2, h3, h4, li, blockquote, .ingress, .meta, figcaption, dd, dt, .kva, .svar, .vidare-steg, .opning), .les-flate :where(p, h1, h2, h3, h4, li, blockquote, .ingress, .meta, figcaption, dd, dt, .kva, .svar), .lese-flate :where(p, h1, h2, h3, h4, li, blockquote, .ingress, .meta, figcaption, dd, dt, .kva, .svar), .avslutning :where(p, h1, h2, h3, li, .kva){max-width:var(--målegr-les);margin-inline:auto} .steg{max-width:var(--kant-vid)} .steg :where(p, h3){max-width:var(--målegr-les)} .les :where(figure, img, svg, video, .figur, .bilde, .bilete, .tal-tabell){max-width:100%} /* THE ONE THING THE OWNER ASKED FOR BY NAME. The section heading and its own marker are centred over the same measure the prose is, so the heading sits over its own column and not over the page. The rule above the heading still runs the width of the reading frame, which is what makes the centring read as a section and not as a floating word. */ .papir .les h2.avsnitt{text-align:center;margin-inline:auto} .papir .les h2.avsnitt .merke{text-align:center} /* The article shell has one job: get the reader to the words without making the reader cross a desert first. Keep the contents list as a useful grid, but bring the first paragraph and each numbered section into the same compact rhythm. */ .papir .les h2.avsnitt{margin-top:clamp(1.75rem,2.8vw,2.5rem)} .papir .les > * + *{margin-top:var(--s4)} /* A narrow phone should keep all four destinations on one calm line. The primary action gets its own centred row, while the logo, theme control and sign-in stay in the top row. */ @media(max-width:700px){ .topp .midt{flex-wrap:nowrap;width:max-content;max-width:100%;gap:0 4px} .topp .midt a{min-width:0;padding-left:2px;padding-right:2px;font-size:13px;letter-spacing:-.015em} } @media(max-width:400px){ .topp .midt{gap:0 1px} .topp .midt a{font-size:12.5px;padding-left:1px;padding-right:1px} } /* The article shell belongs to the same dark reading environment as the rest of Nine. The old paper-white surface made a wide page look like a pasted document, especially before the reader reached the first paragraph. Keep the separate surface and its contents ribbon, but use the site's graphite palette so the panel supports the reading instead of becoming the largest object on screen. */ [data-nettstad] .papir{ --papir:var(--flate); --papir-2:var(--bg); --papir-ink:var(--ink); --papir-ink2:var(--ink2); --papir-ink3:var(--ink3); --papir-kant:var(--kant2); --papir-aksent:var(--accent); background:var(--flate); border:1px solid var(--kant); box-shadow:0 30px 80px -50px rgb(0 0 0 / .8); } /* A sequence is read top to bottom. It may use a grid for the contents index, but the actual steps must not turn into three narrow newspaper columns on a wide display. */ @media(min-width:701px){ [data-nettstad] .stegramme{grid-template-columns:minmax(0,1fr);max-width:var(--målegr-les);margin-inline:auto} [data-nettstad] .stegramme .steg{display:block} [data-nettstad] .stegramme .steg > div{display:block} [data-nettstad] .stegramme .steg .nr, [data-nettstad] .stegramme .steg .steg-merke{float:none} [data-nettstad] .stegramme .steg .steg-merke{margin-left:0} [data-nettstad] .stegramme .steg h3{text-align:center} [data-nettstad] .stegramme .steg .steg-merke, [data-nettstad] .stegramme .steg .nr{display:block;text-align:center} [data-nettstad] .stegramme .steg .nr::after{display:none} [data-nettstad] .stegramme .steg .stegin{clear:none} [data-nettstad] .stegramme .steg p{margin-inline:auto} [data-nettstad] .lese-topp .kven{justify-content:center;text-align:center} [data-nettstad] .lese-topp .kven .ned{text-align:center} } /* Public reading pages should feel composed rather than like a report pasted into a wide window. The contents box and genuine comparison grids keep their columns, while the prose around them shares one centred axis. A shorter lead-in keeps the first useful words close to the title on large screens. */ [data-nettstad] .inngang{padding-top:clamp(1.5rem,4vh,3rem);padding-bottom:clamp(1rem,2vw,1.75rem)} [data-nettstad] .papir{margin-top:clamp(1rem,2vw,2rem)} [data-nettstad] .papir .les > .les-flate > :where(p,h2,h3,blockquote){ text-align:center;margin-inline:auto} [data-nettstad] .papir .les > .les-flate > :where(ul,ol){ max-width:min(44rem,100%);margin-inline:auto;text-align:left} [data-nettstad] .papir .les > .les-flate > :where(figure,table,.tal-tabell,.figur){margin-inline:auto} [data-nettstad] .papir .les > .les-flate > p + p{margin-top:var(--s4)} [data-nettstad] .papir .les > .les-flate > h2:not(.avsnitt){margin-top:var(--s6)} /* the index's newest piece is a piece, not a row: it is centred with the hero above it. THE LABEL AND THE LINK STAY LEFT, and that is a correction found by looking at the picture rather than at the numbers. MEASURED after the first attempt: `.rader` (the date and the reading time) was centred on 720 and `.les-denne` ("Read it") was still on the container's left edge at 144, because `justify-content` does nothing to a grid child that is not itself a flex or grid container. So the block centres its INLINE content and the two small labels are put back on the axis. */ [data-nettstad="indeks"] .innhald .fyrst{text-align:center} [data-nettstad="indeks"] .innhald .fyrst h2, [data-nettstad="indeks"] .innhald .fyrst p{text-align:center;margin-inline:auto} [data-nettstad="indeks"] .innhald .fyrst .rader{margin-inline:auto} [data-nettstad="indeks"] .innhald .fyrst .les-denne{text-align:left} /* and the list under it: a heading is a shape and goes on the axis, a row of cards is a grid and does not. MEASURED at 1440 after the second rule above: the newest piece was centred while the three cards under it sat on 272, 667 and 1061, which is a grid doing its job rather than a fault, so `midtstilling.mjs` reports three headings off the axis on /articles/index.html and the page is right. Written down here so the next agent does not "fix" it into a single centred column. */ /* ══ THE HEAD OF A SURFACE PAGE, AND THE HEADING OF EVERY PANEL ON IT ═════════════════════════════ THE OWNER HAS ASKED FOR THIS THREE TIMES, ABOUT THREE PLACES: the articles, the cost page, and the front page by name. The three marketing pages got it (`.del h2` on /the-nine-standard.html and /book-me.html, `.stegkort .svar h2` on /for-cmos.html), and two whole pages were missed, because they are the account and the operator's own surfaces and nobody had looked at them: `/settings.html` and `/admin.html`, the two pages a signed in customer and an operator meet. MEASURED BEFORE THIS RULE, at 1440: `/settings.html` put all eight of its headings off the axis, the worst of them 446 pixels left of it, and `/admin.html` put all eleven off, the worst 532 pixels left. Both pages wear the same three names for the same three things, so the rule is stated once, here, rather than six times in six inline blocks where the next page will miss it. THE PROSE IS NOT TOUCHED. `.kva` (the sentence under a panel heading), `.kjelde` (the route a figure came from), the rows, the tables and the code stay on their left edge: a heading is a shape and is centred, a sentence is read and is not. */ .opning h1,.opning .under,.blokk > h2,.blokk > .kva,.blokk > .kjelde, .panel > h2,.panel > .kva,.panel > .kjelde{text-align:center;margin-left:auto;margin-right:auto} /* ══ THE THREE STANDALONE PAGES WEAR THE SHARED HEADER'S NAMES, SO THEY GET ITS SHAPE ═════════════ `/for-cmos.html`, `/the-nine-standard.html` and `/book-me.html` write their own bar, and they took the markup of the nettstad bar without the rules that go with it. `.topp .merke svg` had NO RULE ANYWHERE, so the logo drawing had nothing to size it: an inline SVG with a viewBox and no width or height fills its container, which is `svg{max-width:100%}` and so 1216 pixels wide and 1265 tall. MEASURED on the built page at 1440 BEFORE this rule: the header's own box was 1333 pixels tall, the logo sat at y 1167 where the bar should end by 74, and the claim a CMO is meant to read first began 1365 pixels down the page, one and a half screens below the fold. The page's own notes say the claim, the paragraph, the action and the film stand above the fold at 1440 by 900, and that was true of the words and false of the page. MEASURED AFTER: the header is 74 pixels, the claim begins at 106, and the whole first screen is the one the page was written around. WHY THE RULE LIVES HERE and not in three copies: these pages link this sheet, they were all three wrong in the same way, and a fourth page written from the same markup would have been wrong in the same way too. The nettstad bar keeps its own `.topp .merkelink` names and is untouched. */ .topp .merke{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--ink); flex:none;margin-top:0;font-size:var(--t-small);letter-spacing:0;text-transform:none; min-height:44px;box-sizing:border-box} .topp .merke svg{width:2.2rem;height:2.3rem;display:block;overflow:visible;flex:none} .topp .plass{display:flex;align-items:center;gap:var(--s5);margin-left:auto;flex-wrap:wrap} /* ── the foot of a one-sentence page: two halves, centred, and the links in a row ──────────────── MEASURED on `/for-cmos.html` at 1440 BEFORE this rule: the footer's own grid was 1116 pixels wide inside a 1440 page and its two children were a sentence beginning at x 162 and a group of links ending at x 1278, which is the left column and the right column of a two column layout applied to what is one line of text. Every other page of nine ends on one centred column of links. */ .botn{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center; gap:var(--s4);max-width:var(--kant-vid);margin-inline:auto} .botn .høgre{display:flex;flex-wrap:wrap;gap:var(--s5);justify-content:center;align-items:center} .botn .høgre a{text-decoration:none;color:var(--ink2)} .botn .høgre a:hover{color:var(--ink)} /* the front page's own short reading sections keep a measure of their own, in characters */ .words p,.words .say,.words .erleg{max-width:62ch} /* on a phone the two rem gutter is a sixth of the screen. MEASURED at 390: 2rem leaves 342 pixels of text, which is 41 characters, and 1.15rem leaves 356, which is 43. The narrower gutter is the one the older phone rule already chose, so it is the one kept, and it is chosen for EVERY reading block or the intro and the sheet beside it stand on two left edges eighteen pixels apart, which is the whole complaint this block exists to answer. */ @media(max-width:700px){ .skall,[data-nettstad] .inngang,[data-nettstad] .les,[data-nettstad] .papir .les, [data-nettstad] .lese-topp,[data-nettstad] .vidare,[data-nettstad] .avslutning, [data-nettstad] .innhald,[data-nettstad] .inngangsbilete, [data-nettstad] header.topp,[data-nettstad] footer.slutt{padding-inline:1.15rem} } /* ══ THE READING CONTROLS AT THE FOOT ═══════════════════════════════════════════════════════════════ A quiet strip, centred, with air above it, so it reads as an aside to the page rather than as one more thing to decide. It carries the same control the top bar used to carry; only the place changed. */ .lesekontroll{max-width:var(--kant-vid);margin:var(--s8) auto var(--s7);padding:var(--s5) var(--sidegate) 0; border-top:1px solid var(--kant);display:flex;justify-content:center} .lesekontroll:empty,.lesekontroll:not(:has(.kontroll)){display:none} /* ══ THE SITE HAS NO COLOUR OF ITS OWN ══════════════════════════════════════════════════════════════ THE OWNER, 18.09.2026, after rejecting four proposed palettes: «the idea is that the website is black and white, but obviously it can be that on the top. It doesn't need it all the way down. If they scan it, then it changes.» And then, correctly, that this is not a new idea to design: it is how the site should already work, and the machinery for it has been here all along. IT HAD. applyBrand() writes data-brand="1" on the root the moment a customer's site has been read, and rules have hung off that attribute for weeks. What was missing is that the page looked the same before and after in every way that a person actually notices. The colour arrived in the accent and in a wash nobody could name, while the photographs, the film frames and the marks sat there in full colour from the first paint, chosen by us, meaning nothing. SO THE PICTURES WAIT NOW. Every image on the site is greyscale until the site has read somebody, and comes up in colour when it has. That is the product's one sentence performed instead of claimed: it has no palette, it reads yours. A visitor who does nothing sees a black and white site, which is honest, because at that point nothing about them is known. A visitor who presses a single borrowed brand, or hands over their own address, watches the whole page arrive. WHY GREYSCALE AND NOT A SECOND SET OF IMAGES. There is one file per picture and one rule. No asset is duplicated, nothing is downloaded twice, and a page with images disabled or a reader who cannot see colour at all loses nothing that carries meaning. THE EXCEPTIONS ARE NAMED. A logo belonging to somebody else, a colour swatch that IS the colour it is showing, and anything already marked as its own evidence keep their colour, because greying those would not be restraint, it would be wrong information. */ :where(main, article, .les, .innhald) img:not([data-eiga-farge]):not(.merke):not(.logo), :where(main, article, .les, .innhald) figure img:not([data-eiga-farge]), .striper img:not([data-eiga-farge]){ filter:grayscale(1) contrast(1.03); transition:filter 1.1s cubic-bezier(.16,1,.3,1)} html[data-brand="1"] :where(main, article, .les, .innhald) img:not([data-eiga-farge]):not(.merke):not(.logo), html[data-brand="1"] :where(main, article, .les, .innhald) figure img:not([data-eiga-farge]), html[data-brand="1"] .striper img:not([data-eiga-farge]){ filter:grayscale(0) contrast(1)} @media(prefers-reduced-motion:reduce){ :where(main, article, .les, .innhald) img{transition-duration:.01ms} } /* ══ THE FRIENDLY LOOK (30.09.2026, branch front/friendly) ═══════════════════════════════════════════════════ The founder: "Just make sure that no pages have those weird old colors." The dark ground, the glass, the serif and mono faces are retired (brand manual, section 12). Every page that still wears this file (the API, the process pages, the older studio pages) keeps its layout and gets the friendly palette here: cream paper, ink text, white cards with an ink outline, Bricolage Grotesque and Figtree, one orange action. */ :root:root{ color-scheme:light; --bg:#FFF7EC; --flate:#FFFFFF; --kant:rgba(28,26,39,.16); --kant2:rgba(28,26,39,.34); --ink:#1C1A27; --ink2:#3E3B4E; --ink3:#55526A; --ink4:rgba(28,26,39,.30); --accent:#1C1A27; --srift-inn:'Bricolage Grotesque','Figtree',system-ui,sans-serif; --srift-ut:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif; --papir:#FFFFFF; --papir-2:#FFEFD9; --papir-ink:#1C1A27; --papir-ink2:#3E3B4E; --papir-ink3:#55526A; --papir-kant:#EADFCF; --papir-aksent:#1C1A27; --teikning-ink:#1C1A27; --radius:14px; } html,body{background:#FFF7EC;color:#1C1A27} body{font-family:var(--srift-ut)} h1,h2,h3,h4{font-family:var(--srift-inn);font-weight:800;letter-spacing:-.025em} #vask{display:none} code,kbd,pre,samp,.les code,.papir .les code{font-family:'Figtree',system-ui,sans-serif!important;background:#FFEFD9;border-radius:6px;padding:.1em .35em} pre{padding:12px 14px;border:2px solid #1C1A27;overflow:auto} pre code{background:none;padding:0} .papir{background:#FFFFFF;color:#1C1A27;border-top:2.5px solid #1C1A27;border-bottom:2.5px solid #1C1A27} .knapp,.kjop-knapp,.topp a.knapp-topp{border:2.5px solid #1C1A27!important;border-radius:999px!important;box-shadow:3px 3px 0 #1C1A27;font-family:'Figtree',system-ui,sans-serif;font-weight:700} .knapp:not(.stille):not(.roleg),.kjop-knapp,.topp a.knapp-topp{background:#FF6B3D!important;color:#1C1A27!important} .knapp:active,.kjop-knapp:active,.topp a.knapp-topp:active{transform:translate(3px,3px);box-shadow:0 0 0 #1C1A27} .rute{background:#1C1A27;border:2.5px solid #1C1A27} .felt{background:#FFFFFF!important;color:#1C1A27;border:2.5px solid #1C1A27!important;border-radius:14px} .felt::placeholder{color:#8A8699} .feil,.status.pausa i{color:#A3262C} .status.pausa i{background:#E8558A} .status.kjorer i{background:#D4A418} a{text-decoration-color:#FF6B3D} :focus-visible{outline:3px solid #4C8DF6!important;outline-offset:2px} /* the friendly top bar and footer (venleg-shell.js) replace the old ones where a page carries them */ body:has(> .v-nav) header.topp, body:has(> .v-foot) footer.slutt, body:has(> .v-foot) footer.botn{display:none!important} html:has(body > .v-nav){--topphogd:0px} .v-nav a, .v-foot a{text-decoration:none} /* a page whose body is itself a narrow column (book-me, for-cmos): the bar and footer still span the window */ body > .v-nav, body > .v-foot{width:100vw;margin-left:calc(50% - 50vw);margin-right:0;box-sizing:border-box} html:has(body > .v-nav){overflow-x:clip} .v-foot h3,.v-foot p,.v-foot a,.v-foot .v-logo{color:#fff} .kontroll-merke{color:#55526A}