/* ============================================================
   PIETRA LAVICA — design system for Corsara Rent

   Catania is built out of two materials: black volcanic basalt
   and pale limestone. Every façade on via Etnea is the two of
   them stacked. This site is the same two materials and nothing
   else, with one warm signal colour between them.

   Limestone is the reading ground. Basalt is a full-bleed band:
   the header, the hero, the instrument, the footer. A page is a
   wall — courses of stone, alternating, with the light one
   carrying the words and the dark one carrying the machinery.

   Every role below exists twice. Put `.on-basalt` on a band and
   the roles flip inside it, so a button, a rule or a caption is
   written once and reads correctly on either stone.
   ============================================================ */

:root {
  /* — the two materials — */
  --basalt: #1A1815;
  --basalt-raised: #252118;
  --limestone: #F2EEE7;
  --limestone-raised: #FAF8F3;

  /* — roles on limestone (the default course) —
       ink   14.2:1   muted 5.3:1   amber-ink 4.8:1, and 5.6:1 the other way
       The amber has to darken on paper: the signal orange that reads at 6:1 on
       basalt only manages 3.9:1 here, which is under the bar for anything that
       is a word rather than a decoration. */
  --color-bg: var(--limestone);
  --color-raised: var(--limestone-raised);
  --color-ink: #221F1A;
  --color-muted: #6A6156;
  --color-rule: #DAD4C8;
  --color-rule-strong: #C4BCAB;
  --color-accent: #C1571A;        /* decorative: bars, marks, figures */
  --color-accent-ink: #A94E14;    /* anything that is a word */
  --color-accent-wash: #F7E9DC;
  --color-on-accent: #FFFFFF;

  /* — type — */
  --font-body: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: clamp(2.1rem, 1.2rem + 3.6vw, 3.4rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Cut stone, not soft plastic: one small radius, held everywhere. */
  --radius: 4px;

  --measure: 68ch;
  --container: 1200px;
  --gutter: var(--space-6);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: 0.18s var(--ease-out);
}

/* — the dark course. Same roles, other material. — */
.on-basalt {
  --color-bg: var(--basalt);
  --color-raised: var(--basalt-raised);
  --color-ink: #F2EEE7;
  --color-muted: #A79E92;
  --color-rule: #332E26;
  --color-rule-strong: #46402F;
  --color-accent: #E8762A;
  --color-accent-ink: #E8762A;    /* 6:1 here; no need to darken it */
  --color-accent-wash: #2E2519;
  --color-on-accent: #1A1815;

  background: var(--color-bg);
  color: var(--color-ink);
}

/* — a pale block set into a dark course. Roles have to be restated rather than
     inherited, or the words inside it would still be written in limestone. — */
.on-limestone {
  --color-bg: var(--limestone);
  --color-raised: var(--limestone-raised);
  --color-ink: #221F1A;
  --color-muted: #6A6156;
  --color-rule: #DAD4C8;
  --color-rule-strong: #C4BCAB;
  --color-accent: #C1571A;
  --color-accent-ink: #A94E14;
  --color-accent-wash: #F7E9DC;
  --color-on-accent: #FFFFFF;

  background: var(--color-bg);
  color: var(--color-ink);
}

/* — reset & base — */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.14;
  margin: 0 0 var(--space-3);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); line-height: 1.04; letter-spacing: -0.032em; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 var(--space-4); }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button, input, select { font-family: inherit; font-size: inherit; }

.mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; }
.muted { color: var(--color-muted); }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

:focus-visible { outline: 2px solid var(--color-accent-ink); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--color-accent-wash); color: var(--color-accent-ink); }

/* — the eyebrow: 13px at 0.06em. Enough tracking to read as a label, nowhere
     near the 0.16em that dates a page to about 2016. — */
.label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
}
.lead { font-size: var(--text-md); line-height: 1.6; color: var(--color-muted); max-width: 56ch; }

/* — buttons: 44px, which is both the tap target the guidance asks for and the
     height at which a call to action stops looking like a link — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-5);
  border-radius: var(--radius);
  font-weight: 500; font-size: var(--text-sm);
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.btn-primary { background: var(--color-accent-ink); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--color-accent); }
.btn-ghost { background: transparent; color: var(--color-ink); border-color: var(--color-rule-strong); }
.btn-ghost:hover { border-color: var(--color-ink); }

.lnk {
  color: var(--color-accent-ink); text-decoration: none; font-weight: 500;
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent-ink) 40%, transparent);
  transition: border-color var(--transition);
}
.lnk:hover { border-bottom-color: var(--color-accent-ink); }

/* — the marker is a cut hairline, not a bullet — */
.list { margin: 0 0 var(--space-4); padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.list li { padding-left: var(--space-5); position: relative; }
.list li::before {
  content: ''; position: absolute; left: 0; top: 0.72em;
  width: 10px; height: 1px; background: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}