/* ------------------------------------------------------------------
   Glossarum Insights. Monument, light register only.
   Governed by monument-style-guide (decision D-0010), section 9:
   "Marketing pages, when they exist - Light only - Sections 3.5, 5, 6".

   Shared stylesheet for /insights/. Same-origin, no external request
   of any kind (style guide 3.4, the no-egress rule). Font faces are
   the same two subset files the rest of the site uses, referenced one
   directory up.

   Paths in this file and in every page under /insights/ are RELATIVE,
   not root-absolute. That is deliberate: it keeps the section legible
   when the folder is opened off disk as well as when it is served.
   404.html at the site root does the opposite, for its own reason.
   ------------------------------------------------------------------ */

@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../fonts/schibsted-grotesk-var-subset.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/geist-mono-var-subset.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 2.1 light register - the only register a reader ever sees */
  --paper:        #FFFFFF;
  --substrate:    #F1F1EF;
  --ghost:        #E6E6E2;
  --hairline:     #DEDEDA;
  --rule-strong:  #C4C4BE;
  --display-ink:  #71767B;
  --muted:        #5E6469;
  --ink:          #14171A;
  --accent:       #A4300F;

  --display: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --body:    'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --gutter: clamp(20px, 5vw, 76px);
  --measure: 66ch;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* 7 - radius 0 and shadow none everywhere, no exceptions */
* { border-radius: 0 !important; box-shadow: none !important; }

a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--muted); }
a:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

p { margin: 0 0 1.15em; max-width: var(--measure); }
strong { font-weight: 700; }
em { font-style: italic; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.2em; max-width: var(--measure); }
li { margin-bottom: .5em; }

.wrap { padding-left: var(--gutter); padding-right: var(--gutter); max-width: 1320px; margin: 0 auto; }

/* 3.6 - mono label: 10-10.5px, +180/1000, uppercase, muted.
   All-caps is reserved for small structural labels only. */
.label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}
.label--cite { letter-spacing: .10em; }

/* inline mono, for a URL or an identifier quoted inside running text */
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: .01em; word-break: break-word; }

hr.rule { border: 0; border-top: 1px solid var(--hairline); margin: 0; }

/* ---------------- masthead ---------------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 26px;
  padding-bottom: 22px;
  flex-wrap: wrap;
}
.lockup { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.lockup svg { display: block; width: 28px; height: 28px; }
.wordmark {
  font-family: var(--display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: .30em;
  color: var(--ink);
  line-height: 1;
}

/* ---------------- the draft block ----------------
   Same form as the T-0043 legal pages. Bounded by hairlines, set in
   mono over a strong rule, never in the accent: a temporary marker
   must not spend the page's one accent instance. Delete the whole
   block when the page is signed off. */

.draft {
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  padding: 18px 0;
  margin: 26px 0 0;
  max-width: 1100px;
}
.draft p { font-size: 14.5px; color: var(--muted); margin: 0 0 .6em; max-width: 80ch; }
.draft p:last-child { margin-bottom: 0; }
.draft .t { color: var(--ink); }

/* ---------------- hero, index only ---------------- */

.hero { position: relative; padding-top: clamp(44px, 8vw, 104px); padding-bottom: clamp(40px, 6vw, 80px); overflow: hidden; }

/* 5 form 2 - the page of rule. Carries no information. */
.ghost {
  position: absolute;
  top: 0;
  right: -6vw;
  width: min(46vw, 560px);
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    var(--ghost) 0, var(--ghost) 1px,
    transparent 1px, transparent 15px
  );
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 92%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 92%);
  pointer-events: none;
  z-index: 0;
}
.hero > *:not(.ghost) { position: relative; z-index: 1; }

/* 3.5 - exactly three lines, indents 0 / 7.5% / 17% */
h1.stagger {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 7.2vw, 96px);
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--display-ink);
  margin: 22px 0 0;
  max-width: none;
}
h1.stagger span { display: block; }
h1.stagger .l2 { margin-left: 7.5%; }
h1.stagger .l3 { margin-left: 17%; color: var(--ink); }

/* ---------------- document head, post pages ----------------
   Posts are the document register, not the marketing hero: no
   stagger, no solid ink block. The landing page keeps those. */

.dochead { padding-top: clamp(36px, 5vw, 64px); padding-bottom: 8px; }
h1.doc {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 4.6vw, 58px);
  line-height: 1.08;
  letter-spacing: -.030em;
  color: var(--ink);
  margin: 18px 0 0;
  max-width: 20ch;
}

.standfirst {
  font-size: 18px;
  line-height: 1.62;
  color: var(--muted);
  max-width: 60ch;
  margin-top: clamp(22px, 3vw, 34px);
}

.byline {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin: clamp(26px, 4vw, 40px) 0 0;
  padding: 14px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 34px;
  max-width: 1100px;
}
.byline p { margin: 0; max-width: none; }

/* ---------------- the date rail ---------------- */
/* Form per 6.1. Every value is a date published in a public document
   with a URL, cited at the point it is stated in the body. */
.rail {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  padding: 26px 0;
  margin: 0;
}
.rail div { min-width: 0; }
.rail dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.rail dd { margin: 8px 0 0; font-size: 23px; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.rail dd.accent { color: var(--accent); }

/* ---------------- sections ---------------- */

section { padding-top: clamp(46px, 6vw, 80px); padding-bottom: clamp(4px, 1vw, 12px); }
section > .label { margin-bottom: 16px; }

h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(24px, 3.0vw, 38px);
  line-height: 1.12;
  letter-spacing: -.030em;
  color: var(--ink);
  margin: 0 0 24px;
  max-width: 24ch;
}
h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--ink);
  margin: 26px 0 6px;
}

.gloss { font-size: 14.5px; line-height: 1.6; color: var(--muted); }

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px 44px; max-width: 1100px; }
.cols p { max-width: 46ch; }

/* 2.1 - substrate is for quoted rule text only, used sparingly */
.quoted { background: var(--substrate); padding: 22px 26px; max-width: 74ch; margin: 0 0 1.15em; }
.quoted p { font-size: 17px; line-height: 1.55; margin: 0 0 .8em; max-width: none; }
.quoted p:last-child { margin-bottom: 0; }
.quoted .attrib { font-family: var(--mono); font-size: 10.5px; letter-spacing: .10em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }

.notblock { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 28px 0; max-width: 1100px; }

/* rules close things, they do not box things (7) */
.rows { list-style: none; margin: 0; padding: 0; max-width: 1100px; border-top: 1px solid var(--hairline); }
.rows li {
  border-bottom: 1px solid var(--hairline);
  padding: 16px 0;
  margin: 0;
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 8px 30px;
  align-items: baseline;
}
.rows .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.rows .v { font-size: 16px; color: var(--ink); max-width: 60ch; }
.rows .v p { margin: 0 0 .6em; max-width: none; }
.rows .v p:last-child { margin-bottom: 0; }

/* ---------------- the post index ---------------- */

.posts { list-style: none; margin: 0; padding: 0; max-width: 1100px; border-top: 1px solid var(--hairline); }
.posts li {
  border-bottom: 1px solid var(--hairline);
  padding: 26px 0;
  margin: 0;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 10px 30px;
  align-items: baseline;
}
.posts .meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.posts h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(21px, 2.3vw, 30px);
  line-height: 1.12;
  letter-spacing: -.028em;
  color: var(--ink);
  margin: 0 0 10px;
  max-width: 26ch;
}
.posts h3 a { text-decoration: none; }
.posts h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.posts p { font-size: 16px; color: var(--muted); max-width: 56ch; margin: 0 0 10px; }
.posts .tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* ---------------- one solid block per page (7) ---------------- */

.cta {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  padding: 15px 24px;
  font-family: var(--body);
  font-size: 15px;
  letter-spacing: .01em;
  margin-top: 10px;
}
.cta:hover { background: #000; }
.cta:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

/* ---------------- source register ---------------- */

.sources { border-top: 1px solid var(--hairline); margin-top: clamp(50px, 6vw, 84px); padding-top: 30px; }
.sources ol { list-style: none; margin: 0; padding: 0; max-width: 1100px; }
.sources li { border-bottom: 1px solid var(--hairline); padding: 13px 0; margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.sources a { word-break: break-word; }
.sources .t { color: var(--ink); }

/* ---------------- footer ---------------- */

footer { border-top: 1px solid var(--hairline); margin-top: clamp(44px, 5vw, 72px); padding: 30px 0 60px; }
footer p { font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 78ch; }
footer .legal { color: var(--ink); }
.footlinks { margin: 0 0 18px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; max-width: none; }
.footlinks li { margin: 0; }
.footlinks a {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.footlinks a:hover { color: var(--ink); }

/* ---------------- responsive ---------------- */

@media (max-width: 900px) {
  h1.stagger .l2 { margin-left: 5%; }
  h1.stagger .l3 { margin-left: 10%; }
  .rail { grid-template-columns: repeat(2, 1fr); }
  .rows li { grid-template-columns: 1fr; }
  .posts li { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  /* 3.5 rule 2 - at 34px an indent reads as an accident */
  h1.stagger .l2, h1.stagger .l3 { margin-left: 0; }
  .rail { grid-template-columns: 1fr; gap: 22px; }
  .ghost { display: none; }
}
@media print {
  .cta, .ghost { display: none; }
  body { font-size: 11pt; }
}