* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

.about-container {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 8vh 6vw;
}

.column {
  display: flex;
  justify-content: center;
}

.text {
  max-width: 420px;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.left .text {
  text-align: right;
}

.right .text {
  text-align: left;
}

.text p {
  margin: 0 0 1.6em 0;
}

.text strong {
  font-weight: 600;
}

.closing {
  margin-top: 3em;
  font-weight: 500;
  opacity: 0.85;
}



.divider {
  width: 1px;
  height: 72%;
  background: rgba(255,255,255,0.45); /* slightly stronger, still elegant */
  opacity: 1;
}

@media (max-width: 900px) {
  .about-container {
    grid-template-columns: 1fr;
    padding: 6vh 8vw;
  }

  

.divider {
  width: 1px;
  height: 72%;
  background: rgba(255,255,255,0.45); /* slightly stronger, still elegant */
  opacity: 1;
}

.left .text,
  .right .text {
    text-align: left;
  }
}



/* --- Skyline Archive v39: About paragraphs float into place --- */
.text p{
  opacity: 0;
  transform: translateY(22px);
  filter: blur(0.0px);
  will-change: transform, opacity;
}

@keyframes floatIn {
  to { opacity: 1; transform: translateY(0); }
}

.about-ready .text p{
  animation: floatIn 1100ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.about-ready .text p:nth-child(1){ animation-delay: 120ms; }
.about-ready .text p:nth-child(2){ animation-delay: 220ms; }
.about-ready .text p:nth-child(3){ animation-delay: 320ms; }
.about-ready .text p:nth-child(4){ animation-delay: 420ms; }
.about-ready .text p:nth-child(5){ animation-delay: 520ms; }
.about-ready .text p:nth-child(6){ animation-delay: 620ms; }
.about-ready .text p:nth-child(7){ animation-delay: 720ms; }
.about-ready .text p:nth-child(8){ animation-delay: 820ms; }
.about-ready .text p:nth-child(9){ animation-delay: 920ms; }

/* Divider also eases in */

.divider {
  width: 1px;
  height: 72%;
  background: rgba(255,255,255,0.45); /* slightly stronger, still elegant */
  opacity: 1;
}

.about-ready 
.divider {
  width: 1px;
  height: 72%;
  background: rgba(255,255,255,0.45); /* slightly stronger, still elegant */
  opacity: 1;
}

/* --- Skyline Archive v41: inner wrapper for scroll-lag (avoids transform conflicts) --- */
.text p .pInner{
  display: block;
  transform: translateY(0);
  will-change: transform;
}



/* --- Skyline Archive v43: ensure divider visible on smartphones --- */
@media (max-width: 900px) {
  .divider{
    display:block;
    width: 84%;
    height: 1px;
    margin: 30px auto;
    background: rgba(255,255,255,0.45);
    opacity: 1;
  }
}

/* --- Skyline Archive v44: emphasize first title --- */
.text p:first-child strong{
  font-size: 1.4em;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* --- Skyline Archive v44: force horizontal divider on mobile --- */
@media (max-width: 900px){
  .divider{
    width: 86%;
    height: 1px;
    margin: 36px auto;
    background: rgba(255,255,255,0.45);
  }
}


/* --- Skyline Archive v45: definitive divider behavior --- */
/* Desktop: vertical divider */
@media (min-width: 901px){
  .divider{
    display:block;
    width: 1px;
    height: 72%;
    margin: 0 auto;
    background: rgba(255,255,255,0.45);
  }
}

/* Mobile: horizontal divider ONLY */
@media (max-width: 900px){
  .divider{
    display:block;
    width: 88%;
    height: 1px;
    margin: 36px auto;
    background: rgba(255,255,255,0.45);
  }
}


/* --- Skyline Archive v46: mobile layout = single column with horizontal divider between EN/FR --- */
@media (max-width: 900px){
  .about-container{
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto;
    align-items: start;
  }
  .divider{
    display:block !important;
    width: 88% !important;
    height: 1px !important;
    margin: 32px auto !important;
    background: rgba(255,255,255,0.45) !important;
  }
}


/* --- Skyline Archive v49: About reveal fade-in (silent, perceptible) --- */
html, body{
  height: 100%;
}

body{
  opacity: 0;
  transition: opacity 520ms ease;
}

body.about-reveal{
  opacity: 1;
}

@media (prefers-reduced-motion: reduce){
  body{ transition: none; }
}





/* --- Skyline Archive v55: subtle gyro on About (wrap around pInner to avoid transform conflicts) --- */
@media (hover: none) and (pointer: coarse){
  .gyro-wrap{
    display: block;
    transform: translate3d(0,0,0);
    will-change: transform;
  }
}