/* XLII360 — brand pack v2 tokens and the private-tools shell.
   Source of truth: xlii360-brand-pack-v2.zip / BRAND.md. Do not add colours here
   that are not in BRAND.md. The landing page has its own colourway (inline). */

@font-face { font-family: 'Cormorant Garamond'; font-weight: 300; font-style: normal; font-display: swap;
  src: url('/assets/fonts/CormorantGaramond-Light.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('/assets/fonts/CormorantGaramond-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 300; font-style: italic; font-display: swap;
  src: url('/assets/fonts/CormorantGaramond-LightItalic.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 200; font-style: normal; font-display: swap;
  src: url('/assets/fonts/BarlowCondensed-ExtraLight.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 300; font-style: normal; font-display: swap;
  src: url('/assets/fonts/BarlowCondensed-Light.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('/assets/fonts/BarlowCondensed-Regular.woff2') format('woff2'); }

:root {
  /* Brand tokens */
  --logo: #4A1C24;   /* Oxblood — logo XLII on light backgrounds, nothing else */
  --ink:  #2C2824;   /* Warm Charcoal — text only, never data */
  --bg:   #FFFFFF;

  /* Chart palette C1–C12 */
  --c1: #003366;  --c2: #843740;  --c3: #5B8DB8;  --c4: #B8863C;
  --c5: #4A6E8A;  --c6: #9A9080;  --c7: #0D4D7A;  --c8: #2E8B6E;
  --c9: #8BAABF;  --c10: #8AAF8A; --c11: #C4A97A; --c12: #C8C4BC;

  --hair: #e8e4e0;   /* logo underline hairline, light background */

  --serif: 'Cormorant Garamond', Garamond, Georgia, serif;
  --sans:  'Barlow Condensed', 'Bahnschrift Light Condensed', 'Bahnschrift', 'DIN Condensed', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.45;
}
a { color: var(--c1); }

/* ---- Shell: header with the mark, signed-in address, sign-out ---- */
.x-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--c1);
}
.x-mark { display: inline-flex; align-items: center; text-decoration: none; line-height: 1; }
.x-mark .xlii { font-family: var(--serif); font-weight: 300; font-size: 30px; color: var(--logo); letter-spacing: -0.01em; }
.x-mark .rule { width: 1.1px; height: 24px; background: var(--c1); margin: 0 7px 0 5px; }
.x-mark .n360 { font-family: var(--sans); font-weight: 200; font-size: 27px; color: var(--c1); }
.x-who { font-size: 14px; color: var(--c6); text-align: right; }
.x-who a { margin-left: 12px; }

.x-main { max-width: 1080px; margin: 0 auto; padding: 32px 24px 64px; }
.x-kicker { font-size: 13px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c1); margin: 0 0 6px; }
h1.x-title { font-family: var(--serif); font-weight: 300; font-size: 40px; margin: 0 0 28px; color: var(--ink); }

.x-apps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c12); }
.x-apps li { border-bottom: 1px solid var(--c12); }
.x-apps a, .x-apps span.x-app {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 14px 2px; text-decoration: none; color: var(--ink);
}
.x-apps a:hover .x-name { color: var(--c1); }
.x-name { font-size: 22px; font-weight: 400; }
.x-desc { font-size: 15px; color: var(--c6); text-align: right; }
.x-soon .x-name { color: var(--c6); }

@media (max-width: 600px) {
  .x-head { padding: 16px; }
  .x-main { padding: 24px 16px 48px; }
  .x-apps a, .x-apps span.x-app { flex-direction: column; gap: 2px; }
  .x-desc { text-align: left; }
}