:root{--bg:#0b0b0c;--text:#f2f2f2;--muted:rgba(255,255,255,.72);--shadow:rgba(0,0,0,.55);--pill:rgba(0,0,0,.55);--pill-border:rgba(255,255,255,.18);
--frame-bg:rgba(0,0,0,.62);--frame-border:rgba(255,255,255,.14);}
*{box-sizing:border-box}html,body{height:100%;margin:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
.container{min-height:100svh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.hero{position:absolute;inset:0;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.10));}
.hero.dark::after{background:radial-gradient(60% 60% at 50% 35%, rgba(0,0,0,.35), rgba(0,0,0,.78)),linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.78));}
.click-layer{position:absolute;inset:0;z-index:2}
.content{position:relative;z-index:3;width:min(1000px,92vw);text-align:center;padding:56px 0}

/* Parallax / floating layers */
.float-layer{will-change:transform;transform:translate3d(0,0,0)}
.brand{display:inline-flex;flex-direction:column;align-items:center;gap:16px;filter:drop-shadow(0 10px 24px var(--shadow))}
.brand .logo-frame{
  height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--frame-bg);
  border:1px solid var(--frame-border);
  border-radius:20px;
  padding:34px 44px;           /* A: +30% feel */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}

.logo-frame img{
  display:block;
  width:auto;
  height:auto;
  max-width:86%;
  max-height:86%;
}
.brand img{
  width:auto;
  max-height:50%;
  height:50%;
  opacity:.95;
}
.brand .name{letter-spacing:.42em;text-transform:uppercase;font-weight:600;font-size:28px;opacity:.92;margin-top:18px;text-align:center;
  white-space:nowrap;}

.brand-name{
  letter-spacing:.42em;
  text-transform:uppercase;
  font-weight:600;
  font-size:28px;
  opacity:.92;
  margin-top:18px;
  text-align:center;
  white-space:nowrap;
}

/* Page 1: no phrase, just the visual — move a bit lower to "reculer l'écriteau" */
.page1 .content{padding:70px 0}
.page1 .brand{margin-top:28px;}

/* Page 1: give more breathing room between the black frame and the label name */
.page1 .brand-name{ margin-top:34px; }
.page1 .brand img{
  width:auto;
  max-height: 92%;
  height: 92%;
  max-width: 92%;
  opacity:.95;
}
.page1 .brand .logo-frame{padding:38px 50px;}
.page1 .brand .name{letter-spacing:.42em;text-transform:uppercase;font-weight:600;font-size:28px;opacity:.92;margin-top:18px;text-align:center}

/* Page 2: bigger frame but keep balanced */
.page2 .brand img{
  width:auto;
  max-height: 92%;
  height: 92%;
  max-width: 92%;
  opacity:.95;
}
.page2 .brand .logo-frame{padding:38px 52px;}

/* Page 2: more air between the manifesto line and the copyright */
.page2 .content{padding:56px 0 120px;}
.page2 .sub{margin-top:22px;}

@media (max-width:430px){
  .brand .logo-frame{height:240px;}

  /* Prevent label wrapping on phones */
  .brand-name{
    font-size:20px;
    letter-spacing:.28em;
  }
  /* Same for the page-2 label (.name) */
  .name{
    font-size:20px;
    letter-spacing:.28em;
    white-space:nowrap;
  }


  .brand img{
  width:auto;
  max-height:50%;
  height:50%;
  opacity:.95;
}
  .brand .logo-frame{padding:26px 34px; border-radius:18px;}
  .page1 .brand{margin-top:18px;}
  .page1 .brand img{
  width:auto;
  max-height: 92%;
  height: 92%;
  max-width: 92%;
  opacity:.95;
}
  .page1 .brand .logo-frame{padding:18px 24px;}
  .page2 .brand img{
  width:auto;
  max-height: 92%;
  height: 92%;
  max-width: 92%;
  opacity:.95;
}
  .page2 .brand .logo-frame{padding:30px 40px;}
}
@media (min-width:1400px){
  .brand .logo-frame{height:380px;}

  .page1 .brand img{
  width:auto;
  max-height: 92%;
  height: 92%;
  max-width: 92%;
  opacity:.95;
}
  .page1 .brand .logo-frame{padding:46px 66px;}
  .page2 .brand img{
  width:auto;
  max-height: 92%;
  height: 92%;
  max-width: 92%;
  opacity:.95;
}
  .page2 .brand .logo-frame{padding:46px 70px;}
}

.quote{margin:40px auto 0;font-family:ui-serif,Georgia,"Times New Roman",Times,serif;font-size:clamp(30px,4.8vw,52px);line-height:1.08;font-weight:500;letter-spacing:.02em;text-shadow:0 12px 28px var(--shadow)}
.sub{margin:18px auto 0;font-size:16px;opacity:.72;max-width:560px;line-height:1.6;text-shadow:0 10px 22px var(--shadow)}
.footer{position:absolute;left:0;right:0;bottom:34px;z-index:3;text-align:center;font-size:14px;opacity:.55;letter-spacing:.22em;text-transform:uppercase}

/* === Archive page (Polaroïds) === */
body.archive .container{align-items:flex-start;justify-content:center;overflow:visible;padding-bottom:40px;}
body.archive .content{padding:56px 0 24px;}
body.archive .footer{position:relative;left:auto;right:auto;bottom:auto;margin:70px 0 22px;}

.archive-wrap{position:relative;z-index:3;width:min(1180px,94vw);margin:0 auto 20px;padding:0 0 10px;}
.archive-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin:10px 6px 18px;}
.archive-title{letter-spacing:.42em;text-transform:uppercase;font-weight:600;font-size:18px;opacity:.78;}
.archive-note{font-size:13px;opacity:.55;letter-spacing:.08em;}

.archive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
@media (max-width:980px){.archive-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.archive-grid{grid-template-columns:1fr;gap:14px;}}

.polaroid{background:rgba(255,255,255,.92);color:#111;border-radius:16px;box-shadow:0 22px 60px rgba(0,0,0,.45);overflow:hidden;transform:translateZ(0);}
.polaroid-photo{aspect-ratio:1/1; width:100%; background-image:var(--img); background-size:cover; background-position:center; background-color:#111;}
.polaroid-photo::after{content:"";display:block;inset:0;}
.polaroid-label{padding:14px 16px 16px;font-family:ui-serif,Georgia,"Times New Roman",Times,serif;font-size:16px;letter-spacing:.01em;line-height:1.2;}

.topbar{position:absolute;top:22px;left:0;right:0;z-index:4;display:flex;justify-content:center;pointer-events:none}
.pill{pointer-events:auto;display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;background:var(--pill);border:1px solid var(--pill-border);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 24px rgba(0,0,0,.25);font-size:14px}
.pill .dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.85);opacity:.9}
.pill:hover{transform:translateY(-1px)}

/* Micro fade between pages */
body.fade-out { opacity: 0; transition: opacity 180ms ease; }
body { opacity: 1; transition: opacity 180ms ease; }



@media (max-width:360px){
  .name, .brand-name{font-size:18px; letter-spacing:.22em;}
}


/* --- V10 FIX: unify centering on Page 2 to match Page 1 --- */
.page2 .content{ text-align:center; }
.page2 .brand{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin-left:auto;
  margin-right:auto;
}
.page2 .logo-frame{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:auto;
  margin-right:auto;
}
.page2 .name{
  display:block;
  text-align:center;
  margin-top:22px;
  letter-spacing:.42em;
  text-transform:uppercase;
  font-weight:600;
  font-size:28px;
  opacity:.92;
  white-space:nowrap;
}
/* Mobile: keep on one line */
@media (max-width:430px){
  .page2 .name{
    font-size:20px;
    letter-spacing:.28em;
    white-space:nowrap;
  }
}
@media (max-width:360px){
  .page2 .name{
    font-size:18px;
    letter-spacing:.24em;
  }
}



/* === V12: Page 1 long black scroll with floating overlay === */
body.page1{background:#000}
.page{position:relative;min-height:100svh;background:#000}
.hero-stage{position:relative;height:100svh;overflow:hidden}
.after-stage{background:#000}
.p2-scroll{height:520vh;background:#000;position:relative}
.p2-stage{position:sticky;top:0;height:100svh;overflow:hidden}

/* Layered elements (text phrases) */
.p2-item{position:absolute;pointer-events:none}

/* Reveal wrappers: text arrives from the bottom on scroll */
#recompose-trigger{height:1px}


/* Scene 2: clean black canvas + reserved space for future icon links */
.scene2{position:relative;min-height:120svh;background:#000}
.scene2-spacer{height:100svh}
.icon-dock{
  position:absolute;
  left:0;right:0;
  bottom:42px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  padding:0 20px;
  opacity:.85;
}
.icon-dock a{display:inline-flex;align-items:center;justify-content:center;opacity:.9;transition:opacity 180ms ease, transform 180ms ease}
.icon-dock a:hover{opacity:1;transform:translateY(-1px)}

/* Keep the original overlay floating ABOVE both sections */
body.page1 .content{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(1000px,92vw);
  padding:0;
  margin:0;
  z-index:5;
  pointer-events:none;
}
body.page1 .content .brand,
body.page1 .content .brand-name,
body.page1 .content a{
  pointer-events:auto;
}

/* Make sure hero footer/click-layer stay only on the hero stage */
body.page1 .click-layer{position:absolute;inset:0;z-index:2}
body.page1 .footer{position:absolute;left:0;right:0;bottom:34px;z-index:3}

/* Black scroll area */
.after-stage{background:#000}


/* Hero fade overlay (cinema) */
.hero-fade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;will-change:opacity;}


/* --- V24: Page 2 overlay + scroll stage to restore floating layers --- */
body.page2 .hero{position:fixed;inset:0}
body.page2 .content{
  position:fixed;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(1000px,92vw);
  padding:0;margin:0;
  z-index:5;
  pointer-events:none;
}
body.page2 .content .brand,
body.page2 .content .name,
body.page2 .content .quote,
body.page2 .content .sub,
body.page2 .content a{pointer-events:auto}
body.page2 .topbar{position:fixed;top:22px;left:0;right:0;z-index:6}
body.page2 .footer{position:fixed;left:0;right:0;bottom:34px;z-index:6;text-align:center}
body.page2 .after-stage{position:relative;z-index:1}


/* ==============================
   Archive phrases – cinema layers
   One line only, no overlap with logo/name, different sizes & heights
============================== */

.p2-text{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;          /* always one line */
  line-height:1;
  pointer-events:none;
  will-change:transform, opacity;
  text-align:center;
  text-shadow:0 0 22px rgba(0,0,0,.65);
  z-index:4;
}

/* Safe vertical lanes: clearly above the frame and below the brand */
.p2-text-1{
  top:12vh;
  font-size:34px;
  letter-spacing:0.05em;
  color:rgba(255,255,255,0.88);
}

.p2-text-2{
  top:20vh;
  font-size:18px;
  letter-spacing:0.10em;
  color:rgba(255,255,255,0.62);
}

.p2-text-3{
  top:78vh;
  font-size:26px;
  letter-spacing:0.06em;
  color:rgba(255,255,255,0.72);
}

.p2-text-4{
  top:86vh;
  font-size:16px;
  letter-spacing:0.14em;
  color:rgba(255,255,255,0.55);
}

/* Reveal motion base */
.p2-text.reveal-wrap{
  opacity:0;
  transform:translate3d(-50%,90px,0);
}


/* --- Skyline Archive v33: Mobile clamp for phrases (1 line, never cut) --- */
.phrase, .text-layer, .tagline {
  white-space: nowrap;
  overflow: visible;
}
@media (max-width: 768px) {
  .phrase, .text-layer, .tagline {
    font-size: clamp(12px, 3.4vw, 18px);
    line-height: 1;
    max-width: 92vw;
  }
}

/* --- Contact button (cinematic, subtle) --- */
#contactButton {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(40px);
  bottom: 8vh;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms ease, transform 900ms ease, color 300ms ease;
  z-index: 20;
}
#contactButton.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
#contactButton:hover { color: #ffffff; }



/* --- Skyline Archive v34: Mobile safeguard for archive phrases (1 line, never cut) --- */
.p2-item.p2-text .float-layer {
  white-space: nowrap;
  overflow: visible;
}

@media (max-width: 768px) {
  .p2-item.p2-text .float-layer {
    font-size: clamp(11px, 3.2vw, 18px);
    line-height: 1;
    max-width: 92vw;
  }
}

/* --- Skyline Archive v34: Contact button (cinematic, subtle) --- */
#contactButton {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(40px);
  bottom: 8vh;

  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;

  color: rgba(255,255,255,0.75);
  text-decoration: none;

  opacity: 0;
  pointer-events: none;

  transition:
    opacity 900ms ease,
    transform 900ms ease,
    color 300ms ease;
  z-index: 50;
}

#contactButton.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

#contactButton:hover { color: #ffffff; }



/* --- Skyline Archive v35: top-right 3-dots menu (no backdrop) --- */
#menuDots{
  position: fixed;
  top: 18px;
  right: 18px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;

  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;

  opacity: 0.85;
  transition: opacity 250ms ease, transform 250ms ease;
  z-index: 60;
}
#menuDots:hover{ opacity: 1; }
#menuDots:active{ transform: scale(0.96); }

#menuDots .dot{
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  display: block;
}

#topMenu{
  position: fixed;
  top: 58px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;

  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;

  z-index: 60;

  transition: opacity 420ms ease, transform 420ms ease;
}

#topMenu.open{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 350ms ease, transform 350ms ease;
}

#topMenu .menuItem{
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  opacity: 0.82;
  transition: opacity 250ms ease, transform 250ms ease;
  white-space: nowrap;
}
#topMenu .menuItem:hover{ opacity: 1; transform: scale(1.06); }
#topMenu .menuItem:active{ opacity: 1; transform: scale(1.06); }
#topMenu .menuItem.isPressed{ opacity: 1; transform: scale(1.06); }

@media (max-width: 390px){
  #menuDots{ top: 14px; right: 14px; }
  #topMenu{ top: 52px; right: 14px; }
  #topMenu .menuItem{ font-size: 11px; }
}

/* --- Skyline Archive v36: bigger dots, subtle presence --- */
#menuDots{
  width: 36px;
  height: 36px;
}
#menuDots .dot{
  width: 6px;
  height: 6px;
}



/* --- Skyline Archive v37: menu ergonomics + harmony --- */
#topMenu{
  gap: 18px; /* more breathing room for finger */
}

#topMenu .menuItem{
  display: inline-block;
  padding: 8px 0;          /* bigger tap target without adding a background */
  font-weight: 600;        /* subtle bold */
  letter-spacing: 0.26em;  /* a touch more spacing */
  opacity: 0.84;           /* keep it elegant */
}


/* --- Skyline Archive v46: menu slides in from the right edge (horizontal) --- */
#topMenu{
  opacity: 0;
  transform: translateX(28px);
  pointer-events: none;
  transition: opacity 420ms ease, transform 420ms ease;
}
#topMenu.open{
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}


/* --- Skyline Archive v47: definitive right-slide menu (no JS transform overrides) --- */
#topMenu{
  opacity: 0;
  transform: translateX(34px);
  pointer-events: none;
  transition: opacity 520ms ease, transform 520ms ease;
  will-change: transform, opacity;
}
#topMenu.open{
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* --- Skyline Archive v48: silent Home → About transition --- */
#silentTransition{
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms ease;
  z-index: 9998;
}

body.transitioning #silentTransition{
  opacity: 0.55; /* not full black, just a veil */
}


/* --- Skyline Archive v50: tactile long-press (menu items only) --- */
@media (hover: none) and (pointer: coarse){
  #topMenu .menuItem{
    display: inline-block;
    -webkit-tap-highlight-color: transparent;
    transform: translateZ(0);
    transition: transform 380ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 250ms ease, text-shadow 380ms ease;
    will-change: transform, text-shadow;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }

  #topMenu .menuItem.tactile-pressed{
    transform: scale(1.20);
    text-shadow: 0 0 18px rgba(255,255,255,0.40);
  }
}





/* --- Skyline Archive v52: menu-only tactile, very visible (long press) --- */
@media (hover: none) and (pointer: coarse){
  #topMenu .menuItem{
    transition: transform 520ms cubic-bezier(0.18, 0.92, 0.2, 1), opacity 250ms ease, text-shadow 520ms ease;
  }
  #topMenu .menuItem.tactile-pressed{
    transform: scale(1.20);
    text-shadow: 0 0 18px rgba(255,255,255,0.40);
  }
}


/* --- Skyline Archive v53: stronger tactile scale (press + click) --- */
@media (hover: none) and (pointer: coarse){
  #topMenu .menuItem{
    transition:
      transform 620ms cubic-bezier(0.18, 0.92, 0.2, 1),
      text-shadow 520ms ease,
      opacity 200ms ease;
  }

  /* long press */
  #topMenu .menuItem.tactile-pressed{
    transform: scale(1.32);
    text-shadow: 0 0 22px rgba(255,255,255,0.48);
  }

  /* immediate feedback on tap/click */
  #topMenu .menuItem:active{
    transform: scale(1.32);
    text-shadow: 0 0 22px rgba(255,255,255,0.48);
  }
}


/* --- Skyline Archive v54: desktop hover tactile on menu --- */
@media (hover: hover) and (pointer: fine){
  #topMenu .menuItem{
    transition:
      transform 420ms cubic-bezier(0.18, 0.92, 0.2, 1),
      text-shadow 420ms ease,
      opacity 200ms ease;
    transform-origin: center;
  }

  #topMenu .menuItem:hover{
    transform: scale(1.18);
    text-shadow: 0 0 18px rgba(255,255,255,0.40);
  }
}


/* --- Skyline Archive v55: subtle gyro "bousculer" on mobile (texts only) --- */
@media (hover: none) and (pointer: coarse){
  .gyro-wrap{
    display: inline-block;
    transform: translate3d(0,0,0);
    will-change: transform;
  }
}


/* --- Skyline Archive v56: motion enable button (only shows if iOS blocks gyro) --- */
#motionEnable{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10000;
  padding: 10px 12px;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 520ms ease, transform 520ms ease;
}
#motionEnable.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (hover: hover) and (pointer: fine){
  #motionEnable{ display:none; }
}


/* --- Skyline Archive v62: menu always clickable above layers --- */
#menuDots{ z-index: 10050 !important; }
#topMenu{ z-index: 10040 !important; }


/* --- Skyline Archive v67: menu dots wander (right side, first third) --- */
#menuDots{
  position: fixed !important;
  right: 18px !important;
  top: 12vh !important; /* base in first third */
  z-index: 10050 !important;
  transform: translate3d(0,0,0);
  will-change: transform;
}