/* Sinesi brand identity (Elisa, v0.1, October 2026): fonts, palette and shared chrome. */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/bricolage-grotesque.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/instrument-sans.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('/fonts/instrument-sans-italic.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/geist-mono.woff2') format('woff2'); }
/* Greek only: none of the brand faces include it. */
@font-face { font-family: 'GFS Didot'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/b2a20f4d-60bc-4a4a-af9a-2bac43e68ea3.woff2') format('woff2'); unicode-range: U+0370-03FF; }
@font-face { font-family: 'GFS Didot'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/45ab2cc2-6a46-4f24-8f61-bcd417b48111.woff2') format('woff2'); unicode-range: U+1F00-1FFF; }

:root {
  /* Base */
  --calce: #F2EEE6; --calce-2: #E9E3D7; --carta: #F8F6F0;
  --nero: #151412; --nero-2: #1E1C19; --nero-3: #2B2824;
  /* Brand */
  --oro: #C9962E; --lapis: #24477F;
  /* Mosaic: illustration and data, not body text on Calce */
  --cinabro: #A8322D; --rosa: #D6A198; --azzurro: #7FA8BE; --ocra: #C4672E;
  /* Text and lines */
  --ink-muted: #5E5A52; --ink-soft: #3B3833; --line: #D6CFC2;
  --calce-muted: #BDB6AA; --line-dark: rgba(242,238,230,.16);
  --display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --radius: 4px;
}

/* Wordmark: Bricolage outlines, dotless «ı», one gold tile on the first. */
.wordmark-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--calce); text-decoration: none; }
.wordmark-link svg { display: block; width: 104px; height: auto; overflow: visible; }
/* The tile sits above the letters: lift the mark so the letters, not the whole box, centre on the line. */
.wordmark-link svg { transform: translateY(-18%); }
.wordmark-link:hover { color: var(--calce); }

/* Language dropdown: <details> so it works on the script-free pages too. */
.lang-switch { position: relative; margin-left: 8px; font: 500 13px/1 var(--mono); }
.lang-switch summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid rgba(242,238,230,.32); border-radius: var(--radius); color: var(--calce); cursor: pointer; user-select: none; }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary::after { content: ''; width: 10px; height: 6px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s ease; }
.lang-switch[open] summary::after { transform: rotate(180deg); }
.lang-switch summary:hover { border-color: var(--oro); }
.lang-switch summary:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
.lang-switch ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 168px; margin: 0; padding: 6px; list-style: none; background: var(--carta); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(21,20,18,.18); }
.lang-switch li a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; padding: 0 10px; border-radius: 2px; color: var(--nero) !important; text-decoration: none !important; font: 400 15px/1.2 var(--sans); }
.lang-switch li a:hover { background: var(--calce-2); }
.lang-switch li a[aria-current="true"] { background: var(--calce-2); font-weight: 600; }
.lang-switch li a span { font: 400 11px/1 var(--mono); color: var(--ink-muted); }