/* Hearthrealm Studio. Fonts are self-hosted (SIL OFL, licences beside them), so the site makes
   no third-party requests. Design: docs/design/studio-site.md in the Lueur repo (2026-10-14).

   The site is the app's split: a dark room (header, hero, footer) over a page (the middle).
   Studio pages wear Earl Grey; the FAQ wears Evening Tea, Lueur's default theme; the Lueur page
   wears Midnight Tea (docs/design/studio-site-lueur-hero.md). Every colour below is a tested
   theme value; do not add colours. */

@font-face {
  font-family: "EB Garamond";
  src: url("fonts/EBGaramond_400Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/SchibstedGrotesk_400Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/SchibstedGrotesk_500Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/SchibstedGrotesk_600SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

:root {
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* The lockup is the same on every page */
  --lockup-hearth: #DEDAD2;
  --lockup-realm: #7490C9;
  --lockup-studio: #9EA0A4;
}

/* Earl Grey: the studio */
.theme-studio .room {
  --bg: #1A1C1F;
  --head: #DEDAD2;
  --body: #9EA0A4;
  --small: #8C9096;
  --link: #7490C9;
  --hover: #DEDAD2;
  --focus: #7490C9;
  --rule: #3B3E40;
  --lit: #E0B26A;
  --lit-core: #F2D59A;
}
.theme-studio .page {
  --bg: #25282C;
  --head: #DEDAD2;
  --body: #9EA0A4;
  --small: #8C9096;
  --link: #7490C9;
  --hover: #DEDAD2;
  --focus: #7490C9;
  --rule: #3B3E40;
  --lit: #E0B26A;
  --button: #E0B26A;
  --button-label: #1A1C1F;
  --field: #1A1C1F;
  --field-border: #6E737B;
}

/* Evening Tea: Lueur. Room = onDark, page = onLight (docs/themes/evening-tea.md). */
.theme-lueur .room {
  --bg: #2B3142;
  --head: #E8D9CE;
  --body: #C1B7B2;
  --small: #AEA8A7;
  --link: #F38E74;
  --hover: #E8D9CE;
  --focus: #E8856B;
  --rule: #555D74;
  --lit: #EFAA52;
  --lit-core: #FBD886;
}
.theme-lueur .page {
  --bg: #E8D9CE;
  --head: #2B3142;
  --body: #454856;
  --small: #5D5F69;
  --link: #9F432C;
  --hover: #2B3142;
  --focus: #BE5F47;
  --rule: #C6B9AF;
  --lit: #BE5F47;
}

/* Midnight Tea: the Lueur page (docs/themes/midnight-tea.md). Both navies are dark: the room
   carries the header bar, the intro and everything under it; the lighter page carries the hero. */
.theme-midnight .room, .theme-midnight .page {
  --head: #ECEFF5;
  --body: #C5CBDB;
  --small: #AFB8D3;
  --link: #FFA086;
  --hover: #ECEFF5;
  --focus: #E8856B;
  --rule: #555D74;
  --lit: #EFAA52;
  --lit-core: #FBD886;
}
.theme-midnight .room { --bg: #2B3142; }
.theme-midnight .page { --bg: #3F4860; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.theme-studio { background: #1A1C1F; }
.theme-lueur, .theme-midnight { background: #2B3142; }

.room, .page { background: var(--bg); color: var(--body); }

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

a { color: var(--link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--hover); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--head);
  margin: 0;
}
p { margin: 0; }

/* The lockup: STUDIO is 0.569 x the Garamond size, so its capitals stand as tall as the
   Garamond lowercase (x-height 0.400em / cap height 0.703em). The gap is 0.36 x. */
.lockup {
  display: inline-flex;
  align-items: baseline;
  gap: calc(var(--lockup-size) * 0.36);
  text-decoration: none;
  --lockup-size: 28px;
}
.lockup .word { display: inline-flex; align-items: baseline; font-family: var(--serif); font-size: var(--lockup-size); line-height: 1; }
.lockup .hearth { color: var(--lockup-hearth); }
.lockup .realm { color: var(--lockup-realm); }
.lockup .studio {
  font-family: var(--sans);
  font-weight: 500;
  font-size: calc(var(--lockup-size) * 0.569);
  letter-spacing: 0.16em;
  line-height: 1;
  color: var(--lockup-studio);
}

/* Header */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 40px;
  padding-top: 28px;
  padding-bottom: 28px;
}
.theme-midnight .site-header { padding-top: 26px; padding-bottom: 26px; }
.site-nav { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.site-nav a { color: var(--body); text-decoration: none; padding: 12px 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--hover); }

/* Hero */
.hero { padding-top: 88px; padding-bottom: 120px; }
.hero h1 {
  font-size: clamp(44px, 6.2vw, 80px);
  line-height: 1.06;
  max-width: 13ch;
}
.hero .lede { margin-top: 28px; font-size: 19px; line-height: 1.6; max-width: 560px; }
.hero.short { padding-top: 56px; padding-bottom: 72px; }
.hero.short h1 { max-width: none; }
/* Lueur's title on one line: the tagline is 0.759 x the Garamond size, so its lowercase stands as
   tall as Garamond's (x-height 0.400em / 0.527em). It moves under "Lueur:" whole when it can't fit. */
.hero .title { font-size: clamp(37px, 7vw, 76px); line-height: 1.1; max-width: none; }
.title .tagline { display: inline-block; font-family: var(--sans); font-size: 0.759em; }
.hero .title + .lede { margin-top: 12px; font-size: 20px; }
.hero .app-text { max-width: none; }
.meta { margin-top: 16px; font-size: 14px; color: var(--small); }

/* Sections on the page */
.section { padding-top: 96px; padding-bottom: 72px; }
.section + .section { padding-top: 72px; }
.section h2 { font-size: 44px; line-height: 1.1; }
.section > h2 + * { margin-top: 44px; }
.section:last-child { padding-bottom: 112px; }
.divided { border-top: 1px solid var(--rule); padding-top: 72px; }

.hero strong { color: var(--head); font-weight: 600; }
.hero .contact { margin-top: 28px; }
.hero .small { margin-top: 16px; }
.app-text .lede { margin-top: 0; }

/* The intro written on ruled lines, as on the app's page. Each rule sits on a baseline: in a 38px
   line, Schibsted's baseline is 38 / 2 + 0.3594 x 19 = 25.8px down (typo metrics 0.9766 / 0.2578em).
   Two empty lines wait under the text. Keep any top padding off .ruled, or the rules drift. */
.ruled-intro { padding-top: 104px; padding-bottom: 128px; }
.ruled-intro + .section { padding-top: 0; }
.ruled {
  max-width: 740px;
  font-size: 19px;
  line-height: 38px;
  padding-bottom: 76px;
  color: var(--head);
  background-image: linear-gradient(to bottom,
    transparent 25.8px, var(--rule) 25.8px,
    var(--rule) 27.3px, transparent 27.3px);
  background-size: 100% 38px;
}
.supporting > * + * { margin-top: 16px; }
.supporting h2 + p { margin-top: 24px; }
.supporting p { max-width: 640px; }

/* An app */
.app {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px 48px;
}
.app-icon { display: block; width: 168px; height: 168px; border-radius: 38px; flex-shrink: 0; }
/* On Evening Tea's room the icon's own navy meets the navy ground: its border keeps the edge. */
.theme-lueur .room .app-icon { box-shadow: 0 0 0 1px #555D74; }
.theme-midnight .app-icon { outline: 1px solid #555D74; outline-offset: -1px; }
.app-text { display: flex; flex-direction: column; gap: 12px; flex: 1 1 360px; min-width: 0; max-width: 620px; }
.app-text h3 { font-size: 40px; line-height: 1.1; }
.app-text .line { font-size: 18px; line-height: 1.55; color: var(--head); }
.app-links { display: flex; flex-wrap: wrap; gap: 0 28px; }
.app-links a { padding: 10px 0; }
.more { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rule); font-size: 15px; color: var(--small); }

.status { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-top: 4px; }
.status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lit);
  flex-shrink: 0;
}

/* Points: a short lit rule over each heading. No boxes, no icons. */
.points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px 56px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.points.wide { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.points li { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.points li::before {
  content: "";
  width: 32px;
  height: 2px;
  background: var(--lit);
  margin-bottom: 6px;
}
.points h2, .points h3 { font-size: 28px; line-height: 1.15; }

/* Newsletter */
.letters { display: flex; flex-direction: column; gap: 16px; }
.letters p { font-size: 17px; max-width: 520px; }
.signup { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 12px; }
.button {
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 0 24px;
  text-decoration: none;
  border-radius: 8px;
  border: none;
  background: var(--button);
  color: var(--button-label);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.button:hover { color: var(--button-label); }

/* Reading pages: the FAQ, support, privacy and terms */
.prose { max-width: 40rem; font-size: 17px; padding-top: 72px; padding-bottom: 112px; }
.prose > * + * { margin-top: 16px; }
.prose h2 { font-size: 32px; line-height: 1.15; margin-top: 56px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 23px; line-height: 1.2; margin-top: 36px; }
.prose h2 + h3 { margin-top: 24px; }
.prose h3 + p { margin-top: 8px; }
.prose ul { padding-left: 1.2rem; }
.prose li + li { margin-top: 8px; }
.prose strong { color: var(--head); font-weight: 600; }
.prose code { font-size: 0.92em; }
.small { font-size: 14px; color: var(--small); }
.contact { font-family: var(--serif); font-size: 28px; line-height: 1.2; }
.contact a { overflow-wrap: anywhere; }

.topics { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 28px; font-size: 16px; }
.topics a { padding: 8px 0; }
.prose h2[id] { scroll-margin-top: 24px; }

/* Footer */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding-top: 48px;
  padding-bottom: 56px;
}
.site-footer .lockup { --lockup-size: 20px; }
/* On Evening Tea's navy, "realm" (#7490C9) is 4.06:1: it passes only as large text (24px and up). */
.theme-lueur .site-footer .lockup, .theme-midnight .site-footer .lockup { --lockup-size: 24px; }
.footer-brand { display: flex; flex-direction: column; gap: 12px; }
.made { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--small); }
.made svg { width: 10px; height: 14px; flex-shrink: 0; }
.made .flame { fill: var(--lit); }
.made .flame-core { fill: var(--lit-core); }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; font-size: 14px; }
.footer-links a { color: var(--body); text-decoration: none; padding: 12px 0; }
.footer-links a:hover, .footer-links a[aria-current="page"] { color: var(--hover); }
.footer-links .copy { color: var(--small); }