/* =========================================================
   DANIEL LUCIAN — ABOUT
   PAGE-SPECIFIC LAYOUT ONLY
   GLOBAL APPEARANCE PROVIDED BY SHARED FRAMEWORK
   ========================================================= */

.about-main{
  width:min(calc(100% - 40px), 1040px);
  margin:0 auto;
  padding:0 0 72px;
}

.about-intro{
  text-align:center;
}

.about-intro .page-title{
  margin:0;
}

.about-title-rule{
  width:72px;
  margin:18px auto 0;
}

.about-content{
  width:min(100%, 754px);
  margin:54px auto 0;
}

.about-section{
  margin:0 0 42px;
}

.about-section h2{
  margin:0 0 14px;
  font-size:14px;
  line-height:1.4;
  font-weight:400;
  letter-spacing:.08em;
}

.about-section p{
  margin:0;
  font-family:"Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
  font-size:13px;
  line-height:1.85;
  font-weight:400;
  letter-spacing:0;
}

.about-finishing-rule{
  width:min(100%, 754px);
  margin:56px auto 0;
}

@media(max-width:719px){

  .about-section p{
    font-size:12px;
  }

  .about-main{
    width:calc(100% - 32px);
    padding-bottom:56px;
  }

  .about-content{
    margin-top:44px;
  }

  .about-section{
    margin-bottom:36px;
  }
}


/* =========================================================
   ABOUT — EXACT CONTACT BACKGROUND / VIEWPORT SYSTEM
   Copied from locked contact/contact.css.
   Only .contact-page -> .about-page was substituted.
   ========================================================= */

html{
  background:#0c0906 !important;
  background-image:none !important;
}

body{
  background-color:#0c0906 !important;
  background-image:url("../collection/assets/scroll-light-background.png") !important;
  background-repeat:no-repeat !important;
  background-position:center top !important;
  background-size:cover !important;
  background-attachment:fixed !important;
}

.about-page{
  background:none !important;
  background-image:none !important;
  background-color:transparent !important;
}


/* Mobile — keep decorative background attached to visible viewport */
@media (max-width:719px){

  html{
    background:#0b0a08 !important;
  }

  body{
    position:relative;
    background-image:none !important;
    background-color:transparent !important;
    background-attachment:scroll !important;
  }

  body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    width:100vw;
    height:100vh;
    height:100dvh;
    background:
      #0b0a08 url("../collection/assets/scroll-light-background.png")
      center center / cover no-repeat;
    pointer-events:none;
    transform:translateZ(0);
  }
}


/* Proven short-landscape viewport glow */
@media (orientation:landscape) and (max-height:520px) and (max-width:1000px){

  html{
    background:#0f0b07 !important;
  }

  body{
    background:transparent !important;
    background-image:none !important;
    min-height:100%;
  }

  body::before{
    display:none !important;
  }

  html::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;

    background:
      radial-gradient(
        ellipse 48% 105% at 50% 18%,
        rgba(107,105,97,.96) 0%,
        rgba(82,79,73,.88) 20%,
        rgba(48,44,39,.72) 46%,
        rgba(24,19,14,.48) 66%,
        rgba(15,11,7,0) 82%
      );

    background-repeat:no-repeat;
    background-position:center top;
    background-size:100% 760px;
  }
}


/* =========================================================
   ABOUT — SHORT MOBILE LANDSCAPE TYPOGRAPHY
   Matches locked Library article behaviour.

   Purpose:
   - Preserve established 12px mobile prose in short landscape.
   - Prevent Safari from automatically inflating Legal text.
   ========================================================= */

@media (orientation:landscape) and (max-height:520px) and (max-width:1000px){

  .about-main,
  .about-main *{
    -webkit-text-size-adjust:100% !important;
    text-size-adjust:100% !important;
  }

  .about-section p{
    font-size:12px !important;
  }
}


/* =========================================================
   ABOUT — EDITORIAL STORY
   Established Library prose typography.
   ========================================================= */

.about-content{
  width:min(100%,754px);
  margin:56px auto 0;
}

.about-content p{
  margin:0 0 22px;
  font-family:"Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
  font-size:13px;
  line-height:1.85;
  font-weight:400;
  letter-spacing:0;
}

.about-content p:last-child{
  margin-bottom:0;
}

.about-content em{
  font-style:italic;
}

.about-content strong{
  font-weight:600;
}

.about-transition,
.about-emphasis{
  text-align:center;
}

.about-transition{
  margin-top:34px !important;
  margin-bottom:34px !important;
}

.about-emphasis{
  width:min(100%,650px);
  margin-left:auto !important;
  margin-right:auto !important;
}

.about-section-start{
  margin-top:48px !important;
}

.about-final{
  width:min(100%,650px);
  margin:38px auto 0 !important;
  text-align:center;
}

.about-finishing-rule{
  width:min(100%,754px);
  margin:54px auto 0;
}

@media(max-width:719px){

  .about-content{
    margin-top:44px;
  }

  .about-content p{
    font-size:12px;
    line-height:1.85;
    margin-bottom:20px;
  }

  .about-transition{
    margin-top:30px !important;
    margin-bottom:30px !important;
  }

  .about-section-start{
    margin-top:40px !important;
  }

  .about-final{
    margin-top:34px !important;
  }

  .about-finishing-rule{
    margin-top:46px;
  }
}

@media (orientation:landscape) and (max-height:520px) and (max-width:1000px){

  .about-content p{
    font-size:12px !important;
  }
}