/* Émilie Fouilloux — shared base, components & responsive */
*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#f3f3f2; --ink:#262626; --muted:#979797; --line:rgba(40,40,40,.1);
  --ink-2:#474747; --ink-3:#3d3d3d; --grey-panel:#eaeaea; --grey-footer:#e4e4e4;
  --dark:#262626; --dark-ink:#eaeaea; --maxw:1440px; --pad:6vw;
  /* Type scale — keep the order h2 > h3 > body, and never let a heading drop below body. */
  --fs-body:clamp(17px,1.7vw,22px);
  --fs-h3:clamp(20px,2vw,26px);
  --fs-h2:clamp(23px,2.4vw,32px);
  --fs-lead:clamp(19px,2vw,28px);
  --fs-prose:clamp(16px,1.65vw,21px);
}
html{scroll-behavior:smooth;scroll-padding-top:92px;}
body{background:var(--bg);color:var(--ink);font-family:'Cormorant Garamond',Georgia,serif;-webkit-font-smoothing:antialiased;line-height:1.4;}
a{color:var(--ink);text-decoration:none;transition:color .35s ease;}
a:hover{color:var(--muted);}
img{max-width:100%;}
::selection{background:var(--ink);color:var(--bg);}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(243,243,242,.86);backdrop-filter:blur(8px);border-bottom:1px solid rgba(40,40,40,.08);}
.site-header .bar{max-width:var(--maxw);margin:0 auto;padding:22px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:32px;}
.brand img{height:46px;width:auto;display:block;}
.nav-desktop{display:flex;flex-wrap:wrap;gap:26px;justify-content:flex-end;}
.nav-desktop a{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;}
.nav-desktop a.active{color:var(--muted);}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px;width:34px;}
.burger span{display:block;height:1px;background:var(--ink);width:22px;transition:transform .35s ease,opacity .3s ease;}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.mobile-menu{position:fixed;inset:0;z-index:45;background:var(--bg);display:flex;flex-direction:column;justify-content:center;padding:0 8vw;gap:8px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility .4s ease;}
.mobile-menu.open{opacity:1;visibility:visible;pointer-events:auto;}
.mobile-menu a{font-size:clamp(30px,9vw,44px);font-weight:300;letter-spacing:-.01em;padding:10px 0;border-bottom:1px solid var(--line);}

/* Footer */
.site-footer{border-top:1px solid rgba(40,40,40,.12);background:var(--grey-footer);}
.site-footer .inner{max-width:var(--maxw);margin:0 auto;padding:9vh var(--pad) 7vh;}
.footer-cols{margin-top:9vh;display:flex;flex-wrap:wrap;gap:48px;justify-content:space-between;align-items:flex-end;}
.footer-legal{margin-top:6vh;padding-top:32px;border-top:1px solid rgba(40,40,40,.12);display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:12.5px;letter-spacing:.06em;color:#8b8b8b;}
.footer-social{display:flex;gap:26px;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;}
/* Separators are drawn by CSS so removing a link cannot leave a dangling '·'. */
.footer-legal .fl-i + .fl-i::before{content:'·';margin:0 8px;color:#a8a8a8;}

/* Reveal */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity 1.1s cubic-bezier(.16,.7,.2,1),transform 1.1s cubic-bezier(.16,.7,.2,1);}
[data-reveal].in{opacity:1;transform:none;}

/* Hero — coreografia d'ingresso in sequenza (parole in direzioni opposte).
   Animazioni CSS pure: partono al caricamento, funzionano anche senza JS.
   Ordine: Creative (da sinistra) → Direction (da destra) → testo → pulsante. */
.ef-hero .hero-word{display:inline-block;vertical-align:top;line-height:1.3;}
.ef-hero .hero-word > span{display:inline-block;}
.ef-hero .hero-word:nth-of-type(1) > span{animation:heroInLeft .95s cubic-bezier(.16,.7,.2,1) both;animation-delay:.25s;}
.ef-hero .hero-word:nth-of-type(2) > span{animation:heroInRight .95s cubic-bezier(.16,.7,.2,1) both;animation-delay:.55s;}
@keyframes heroInLeft{from{opacity:0;transform:translateX(-42px);}to{opacity:1;transform:translateX(0);}}
@keyframes heroInRight{from{opacity:0;transform:translateX(42px);}to{opacity:1;transform:translateX(0);}}

.ef-hero .hero-line{opacity:0;transform:translateY(20px);animation:heroLineUp 1.1s cubic-bezier(.16,.7,.2,1) both;}
.ef-hero .hero-intro{animation-delay:1.15s;}
.ef-hero .hero-cta{animation-delay:1.55s;}
@keyframes heroLineUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}

/* Il pulsante arriva dal basso, la sua freccia scivola dentro da sinistra:
   direzioni diverse, come richiesto. */
.ef-hero .hero-arrow{display:inline-block;opacity:0;transform:translateX(-10px);animation:heroArrowIn .8s cubic-bezier(.16,.7,.2,1) both;animation-delay:1.9s;}
@keyframes heroArrowIn{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:translateX(0);}}

/* Buttons / links */
.btn-line{display:inline-flex;align-items:center;gap:14px;font-size:13px;letter-spacing:.22em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:6px;}
.eyebrow{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);}
/* Available to screen readers and crawlers, invisible on screen. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* Home hero kicker — the eyebrow, six points up, now carrying the h1 */
.hero-kicker{font-size:19px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);line-height:1.3;}

/* Sections */
.section{border-top:1px solid var(--line);}
.section .inner{max-width:var(--maxw);margin:0 auto;padding:11vh var(--pad);}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:8vh;}
.section-head h2{font-size:var(--fs-h2);font-weight:300;text-transform:uppercase;letter-spacing:.02em;}
.section-head .idx{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#b0b0b0;}
.entry{display:grid;grid-template-columns:0.9fr 1.4fr;gap:min(6vw,90px);padding:6vh 0;border-top:1px solid var(--line);align-items:start;}
.entry h3{font-size:var(--fs-h3);font-weight:300;line-height:1.15;letter-spacing:.01em;}
.entry .sub{margin-top:12px;font-size:15px;font-style:italic;color:#8b8b8b;line-height:1.45;}
.entry .body{font-size:var(--fs-body);font-weight:300;line-height:1.6;color:var(--ink-3);max-width:640px;}

/* Body copy helpers — replace the per-element inline sizes on work.html */
.lead{font-size:var(--fs-lead);font-weight:300;line-height:1.5;color:#2a2a2a;}
.prose{font-size:var(--fs-prose);font-weight:300;line-height:1.65;color:var(--ink-2);}
.prose-invert{font-size:var(--fs-body);font-weight:300;line-height:1.65;color:#c6c6c6;}
.feature-title{font-size:clamp(26px,3.2vw,42px);font-weight:300;line-height:1.05;letter-spacing:.01em;}

/* Legal pages (privacy, cookie) */
.legal{margin-top:6vh;display:flex;flex-direction:column;gap:20px;font-size:var(--fs-prose);font-weight:300;line-height:1.7;color:var(--ink-2);}
.legal h2{font-size:var(--fs-h3);font-weight:400;color:var(--ink);margin-top:18px;}
.legal h3{font-size:var(--fs-prose);font-weight:500;color:var(--ink);margin-top:8px;}
.legal code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;background:rgba(40,40,40,.06);padding:2px 5px;border-radius:3px;}
.legal ul{padding-left:20px;display:flex;flex-direction:column;gap:8px;}
.legal .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.legal table{width:100%;min-width:520px;border-collapse:collapse;font-size:15px;}
.legal th,.legal td{text-align:left;padding:11px 14px 11px 0;border-bottom:1px solid var(--line);vertical-align:top;}
.legal th{font-weight:500;color:var(--ink);}
.legal .note{font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:24px;margin-top:20px;}
/* Legal copy is dense: links must be identifiable without relying on colour alone. */
.legal a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}

/* Project thumbnail + lightbox */
.thumb{display:block;margin-top:20px;padding:0;border:0;background:none;cursor:zoom-in;width:100%;max-width:250px;line-height:0;}
.thumb img{width:100%;height:auto;display:block;transition:opacity .4s ease;}
.thumb:hover img{opacity:.82;}
.thumb:focus-visible{outline:1px solid var(--ink);outline-offset:4px;}

.lb{position:fixed;inset:0;z-index:400;background:rgba(18,18,18,.92);display:none;align-items:center;justify-content:center;padding:6vh 6vw;}
.lb.open{display:flex;}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:18px;max-width:100%;}
/* Sources are 460x300, so the frame is capped: blowing them up further only softens them. */
.lb img{max-width:min(94vw,1280px);max-height:86vh;width:auto;height:auto;display:block;}
.lb figcaption{font-size:14px;line-height:1.5;letter-spacing:.04em;color:#c9c9c9;text-align:center;max-width:520px;}
.lb-close{position:absolute;top:24px;right:26px;font-family:inherit;font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:11px 20px;border:1px solid #eaeaea;background:none;color:#eaeaea;cursor:pointer;transition:.25s;}
.lb-close:hover,.lb-close:focus-visible{background:#eaeaea;color:#262626;}
@media (max-width:620px){
  .thumb{max-width:100%;}
  .lb{padding:4vh 5vw;}
  .lb-close{top:14px;right:14px;}
}

/* Cookie banner + generic UI */
.cc-banner{position:fixed;left:0;right:0;bottom:0;z-index:200;background:#262626;color:#eaeaea;padding:22px var(--pad);display:flex;flex-wrap:wrap;gap:18px 40px;align-items:center;justify-content:space-between;}
.cc-banner p{font-size:16px;line-height:1.5;max-width:720px;color:#cfcfcf;}
.cc-actions{display:flex;flex-wrap:wrap;gap:12px;}
.cc-btn{font-family:inherit;font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:12px 22px;border:1px solid #eaeaea;background:none;color:#eaeaea;cursor:pointer;transition:.25s;}
.cc-btn:hover{background:#eaeaea;color:#262626;}
.cc-btn.primary{background:#eaeaea;color:#262626;}
.cc-btn.primary:hover{opacity:.8;}
.cc-modal{position:fixed;inset:0;z-index:210;background:rgba(20,20,20,.55);display:none;align-items:center;justify-content:center;padding:24px;}
.cc-modal.open{display:flex;}
.cc-card{background:var(--bg);max-width:560px;width:100%;max-height:85vh;overflow:auto;padding:40px;}
/* .cc-btn is styled for the dark banner (light text/border). On the light card that leaves
   "Reject all" and "Save preferences" nearly invisible — reject must read as clearly as accept. */
.cc-card .cc-btn{border-color:var(--ink);color:var(--ink);}
.cc-card .cc-btn:hover{background:var(--ink);color:var(--bg);}
.cc-card .cc-btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.cc-card .cc-btn.primary:hover{opacity:.82;}
.cc-cat{border-top:1px solid var(--line);padding:20px 0;display:flex;gap:18px;align-items:flex-start;justify-content:space-between;}
.cc-cat h4{font-size:20px;font-weight:500;}
.cc-cat p{font-size:15px;color:var(--ink-2);line-height:1.5;margin-top:6px;}
.switch{position:relative;width:44px;height:24px;flex:none;}
.switch input{opacity:0;width:0;height:0;}
.switch .track{position:absolute;inset:0;background:#c9c9c9;border-radius:24px;transition:.25s;cursor:pointer;}
.switch .track:before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.25s;}
.switch input:checked + .track{background:#262626;}
.switch input:checked + .track:before{transform:translateX(20px);}
.switch input:disabled + .track{opacity:.5;cursor:not-allowed;}

@media (max-width:860px){
  .nav-desktop{display:none;}
  .burger{display:flex;}
}
@media (max-width:820px){
  .entry{grid-template-columns:1fr;gap:20px;}
  .cc-banner{flex-direction:column;align-items:flex-start;}
}
@media (max-width:620px){
  :root{--pad:7vw;}
  .cc-card{padding:26px;}
  /* Right-aligned buttons wrap badly in a narrow card — stack them full width instead. */
  .cc-card .cc-actions{flex-direction:column;align-items:stretch;}
  .cc-card .cc-actions .cc-btn{width:100%;text-align:center;}
}

/* Accessibility: honour the OS "reduce motion" setting — content stays visible, animation stops. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  [data-reveal]{opacity:1;transform:none;transition:none;}
  /* Hero: nessun movimento, contenuto subito visibile. */
  .ef-hero .hero-word > span,
  .ef-hero .hero-line,
  .ef-hero .hero-arrow{opacity:1 !important;transform:none !important;animation:none !important;}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}