/* Identité éditoriale unifiée de Djochrist K - inspirée par l'élégance
   du site d'Adham Dannaway, mais animations et styles originaux. */
:root {
  --font-display: 'Proxima Nova';
  --font-body: 'Proxima Nova';
  --paper: #faf9f6;
  --surface: #ffffff;
  --ink: #202020;
  --muted: #696966;
  --line: #e7e3dd;
  --pale: #f4f2ed;
  --accent: #c96743;
  font-family: var(--font-body);
  background: var(--paper);
}
:root[data-theme='dark'] {
  --paper: #151719;
  --surface: #242629;
  --ink: #f2f0ec;
  --muted: #b9b7b0;
  --line: #373a3c;
  --pale: #1e2124;
  --accent: #ea926a;
}
@media(prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #151719;--surface:#242629;--ink:#f2f0ec;--muted:#b9b7b0;--line:#373a3c;--pale:#1e2124;--accent:#ea926a;
  }
}
body, .blog-page { font-family: var(--font-body); background: var(--paper); color: var(--ink); }
h1,h2,h3,.section-title,.selected-project h3,.work-copy h2,.contact-band h2,.blog-intro h1,.blog-card h2,.article-header h1 { font-family: var(--font-display); letter-spacing: -.055em; }
h2, .section-title { font-size: clamp(32px,3.8vw,52px); }
.site-header, .blog-header { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); }
.site-header { height: 82px; }
.site-header .header-inner { width: min(1380px,calc(100% - 96px)); }
.header-inner > .brand {
  width: auto; height: auto; border-radius: 0; background: none; color: var(--ink);
  font-family: var(--font-display); font-size: 25px; font-weight: 800;
  letter-spacing: -.065em; white-space: nowrap;
}
.header-inner > .brand span { font-size: inherit; font-weight: inherit; letter-spacing: inherit; padding: 0; transform: none; }
#main-nav { gap: clamp(18px,2.5vw,40px); font-size: 15px; }
#main-nav > a,
.blog-header nav > a { color: var(--ink); opacity: .78; text-decoration: none; transition: opacity .2s ease; }
#main-nav > a:is(:hover,:focus-visible),
#main-nav > a.active,
.blog-header nav > a:is(:hover,:focus-visible),
.blog-header nav > a[aria-current] { color: var(--ink); opacity: 1; text-decoration: none; }
#main-nav > a::after, .blog-header nav > a::after { content: ''; display:block; height: 1px; background: var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .32s cubic-bezier(.2,.7,.2,1); }
#main-nav > a:is(:hover,:focus-visible)::after,
#main-nav > a.active::after,
.blog-header nav > a:is(:hover,:focus-visible)::after,
.blog-header nav > a[aria-current]::after { transform:scaleX(1); }
.theme-toggle { color: var(--ink); border: 1px solid var(--line); background: var(--surface); }
.theme-toggle:hover { opacity: 1; border-color: var(--accent); }
.menu-toggle span { background: var(--ink); }
.band { border-color: var(--line); }
.pale, .site-footer { background: var(--pale); }
.hero-summary .inline-link { border-color: var(--accent); }
.snapshots { border-color: var(--line); }
.snapshot { border-radius: 5px; box-shadow: none; border:1px solid var(--line); background:var(--surface); transition: transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s ease; }
.snapshot:hover { transform:translateY(-7px); box-shadow:0 12px 30px #20202012; }
.snapshot img { border-radius: 2px; }
.selected-project { border-color:var(--line); }
.selected-project .selected-image img, .work-window img { transition:transform .75s cubic-bezier(.16,.8,.2,1); }
.selected-project:hover .selected-image img, .work-window:hover img { transform:scale(1.035); }
.button, .contact-form .button { background: var(--ink); color: var(--paper); border-radius: 3px; }
.button:hover { background: var(--accent); opacity: 1; }
.process-step.is-visible .process-bar { border-color: var(--accent); }
.process-step.is-visible .process-bar span { color: var(--accent); }
.blog-header { height: 82px; }
.blog-header .blog-brand { background:none; color: var(--ink); border-radius:0; letter-spacing:-.055em; font-size:25px; width:auto; height:auto; }
.blog-header .blog-brand span { letter-spacing:inherit; }
.blog-header nav > a { color: var(--ink); }
.blog-header .blog-contact-link { border-color: var(--line); }
.blog-page .blog-card-visual { border-radius:3px; }
.blog-page .blog-intro h1 { font-size:clamp(50px,7vw,90px); }
@media (max-width: 800px) {
  .site-header .header-inner { width:calc(100% - 44px); }
  .header-inner > .brand { font-size: 22px; }
  #main-nav { gap:18px; }
}
@media (max-width: 620px) {
  .site-header { height:72px; }
  .site-header .header-inner { width:calc(100% - 36px); }
  #main-nav { top: 72px; left:0; right:0; padding: 10px 25px 22px; background: var(--paper); border-bottom:1px solid var(--line); box-shadow:0 8px 14px #00000012; }
  #main-nav > a { border-color: var(--line); font-size: 17px; }
  .blog-header .blog-brand { font-size:22px; }
}
@media (prefers-reduced-motion: reduce) {
  .snapshot, .selected-project, .selected-project .selected-image img,
  .work-window img, #main-nav > a::after, .blog-header nav > a::after { transition:none !important; }
}