/* ---------------------------------------------------------
   Interactive.li — one-page site

   Light editorial styling in the tradition of the quality
   press: warm paper, high-contrast ink, a display serif for
   the headline, a text serif for reading, hairline rules.
   No imagery — typography and colour carry the design.

   Sections, in source order:
     Custom properties ...... palette, type stack, measure
     Base ................... reset, links, focus, skip link
     Masthead ............... brand, section nav, language switcher
     Article ................ headline, standfirst, pitch
     Experiences ............ shared section rhythm, session list
     Actions ................ call to action
     Footer ................. mission line, copyright
     Responsive ............. single breakpoint at 40rem
     Motion ................. prefers-reduced-motion
     Print

   Two rules worth keeping in mind when editing:

   1. Spacing between sections is padding, never margin. Each
      section draws its own border-top, so a margin would let
      two rules stack into a visible parallel pair.
   2. --muted is set at the lightest value that still clears
      WCAG AA (4.5:1) on BOTH paper tones. Lightening it fails.
--------------------------------------------------------- */

:root {
  /* Paper & ink */
  --paper:      #fbf8f2;   /* warm ivory */
  --paper-deep: #f4efe4;   /* footer band */
  --ink:        #1a1714;   /* headlines */
  --ink-body:   #35312b;   /* running text */
  --muted:      #6f685d;   /* meta, inactive UI — WCAG AA (4.5:1) on both paper tones */
  --rule:       #ded5c6;   /* hairlines */

  --accent:     #8a2e24;   /* claret — links and the call to action */
  --accent-dk:  #6b221a;

  /* Type */
  --display: 'Playfair Display', 'Times New Roman', Times, serif;
  --text:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --measure: 34rem;  /* comfortable reading width */
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  background: var(--paper);
  color: var(--ink-body);
  font-family: var(--text);
  font-size: 100%;
  line-height: 1.75;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}

::selection {
  background: rgba(138, 46, 36, 0.15);
  color: var(--ink);
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

hr { border: none; margin: 0; }

/* Keyboard-only skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 0.7rem 1.1rem;
  font-family: var(--ui);
  font-size: 0.85rem;
  text-decoration: none;
}
.skip-link:focus { left: 1.5rem; top: 1.5rem; }

/* ---------- Masthead ---------- */

.masthead {
  border-bottom: 1px solid var(--rule);
}

.masthead-inner,
.footer-inner,
.content {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.masthead-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

/* Section links. Sentence case and a shade larger than the language
   switcher, so navigation reads as distinct from the utility control. */
.site-nav {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  font-family: var(--ui);
  font-size: 0.8rem;
}

.site-nav a {
  color: var(--ink-body);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.site-nav a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.brand {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: 0.005em;
  color: var(--ink);
}

.switcher {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.switcher-sep { color: var(--rule); }

/* Translation happens in the browser, so without scripting the switcher
   cannot deliver what it promises. Hide it rather than offer a dead control;
   the sitemap and hreflang tags still expose every language to crawlers. */
html:not(.js) .switcher {
  display: none;
}

/* Real links to ?lang=xx, so they can be opened in a new tab, copied, and
   followed by crawlers. Padding keeps the hit area at least 24px tall,
   per WCAG 2.2 Target Size (Minimum). */
.lang-link {
  display: inline-block;
  padding: 0.35rem 0.15rem;
  color: var(--muted);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.lang-link:hover { color: var(--ink); }

/* aria-current marks the language on screen; the style follows the state
   rather than a separate class, so the two cannot drift apart. */
.lang-link[aria-current] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ---------- Article ---------- */

.wrap {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  padding: clamp(3rem, 9vh, 6.5rem) 0 clamp(3rem, 8vh, 5.5rem);
}

/* The article is hidden for its entrance fade only when scripting is available
   (html.js is set inline in <head>). Without JS the copy simply shows. */
.js .content {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js body.is-ready .content {
  opacity: 1;
  transform: none;
}

/* Fade used while swapping language */
.content.is-fading {
  opacity: 0;
  transform: none;
  transition: opacity 0.2s ease;
}

.headline {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.4rem, 6.2vw, 4.1rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
}

.flourish {
  width: 3.25rem;
  height: 1px;
  background: var(--accent);
  margin: clamp(1.6rem, 4vw, 2.3rem) 0;
  opacity: 0.75;
}

/* Standfirst */
.hook {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
  line-height: 1.48;
  color: var(--ink);
  max-width: 33rem;
  margin: 0 0 clamp(1.8rem, 4vw, 2.5rem);
  text-wrap: pretty;
}

.pitch {
  font-family: var(--text);
  font-size: clamp(1.02rem, 1.15vw, 1.1rem);
  line-height: 1.78;
  color: var(--ink-body);
  max-width: var(--measure);
  margin: 0 0 clamp(2.2rem, 5vw, 3rem);
  text-wrap: pretty;
}

/* ---------- Experiences ---------- */

/* One shared rhythm for every section below the pitch. Spacing is padding
   only, never margin: each section's own border-top closes the one above it,
   so two rules can never stack into a parallel pair. */
.experiences,
.contact {
  border-top: 1px solid var(--rule);
  padding-top: clamp(1.9rem, 4vw, 2.5rem);
  padding-bottom: clamp(1.2rem, 3vw, 1.5rem);
  max-width: var(--measure);
  scroll-margin-top: 1.5rem;
}

/* Last section on the page: the wrap's own padding closes it. */
.contact { padding-bottom: 0; }

/* Section head in the display serif, sized to outrank the 1.2rem item titles
   it introduces while staying well clear of the h1. */
.section-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.7rem;
}

.section-intro {
  font-family: var(--text);
  font-size: clamp(0.99rem, 1.1vw, 1.05rem);
  line-height: 1.7;
  color: var(--ink-body);
  margin: 0 0 1.7rem;
  text-wrap: pretty;
}

.exp-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.exp {
  padding: 1.05rem 0;
  border-top: 1px solid var(--rule);
}

.exp-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 0.28rem;
}

.exp-title a {
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.exp-title a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.exp-tag {
  font-family: var(--ui);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 0.5rem;
  vertical-align: 0.18em;
}

.exp-hook {
  font-family: var(--text);
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--ink-body);
  margin: 0;
  text-wrap: pretty;
}

/* ---------- Actions ---------- */

.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.9rem;
}

.btn {
  display: inline-block;
  font-family: var(--ui);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--paper);
  background: var(--accent);
  padding: 0.8rem 1.7rem;
  text-decoration: none;
  transition: background 0.2s ease;
}

.btn:hover { background: var(--accent-dk); }

/* ---------- Footer ---------- */

.site-footer {
  flex-shrink: 0;
  background: var(--paper-deep);
  border-top: 1px solid var(--rule);
}

.footer-inner {
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
  text-align: center;
}

.mission {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 34ch;
  margin: 0 auto 0.85rem;
  text-wrap: pretty;
}

.copyright {
  font-family: var(--ui);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 40rem) {
  .masthead-inner,
  .footer-inner,
  .content {
    padding-left: 1.35rem;
    padding-right: 1.35rem;
  }

  .masthead-inner {
    padding-top: 1.15rem;
    padding-bottom: 1.15rem;
  }

  /* Brand and language switcher share the first row; the section links drop
     to a row of their own rather than being hidden. */
  .brand    { order: 1; }
  .switcher { order: 2; }
  .site-nav {
    order: 3;
    width: 100%;
    /* Tight enough that the longest set of labels (French) still holds one
       line at 375px; it wraps gracefully on its own row if it ever cannot. */
    gap: 0.95rem;
    padding-top: 0.2rem;
    font-size: 0.78rem;
  }

  .headline { max-width: none; }
  .hook { max-width: none; }

  .actions { gap: 0.9rem 1.4rem; }
  .btn { padding: 0.78rem 1.5rem; }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js .content,
  .content,
  .content.is-fading {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .lang-link,
  .btn,
  .site-nav a,
  .exp-title a {
    transition: none;
  }
}

/* ---------- Print ---------- */

@media print {
  .masthead, .switcher, .actions { display: none; }
  body { background: #fff; color: #000; }
}