/* ============================================================
   codebymks — ABOUT page (about.html)
   Two-layer composition (full-bleed background + top-left panel),
   the "About me" title, the read-only terminal, and the CTA.
   ============================================================ */

.about2{position:relative;min-height:158vh;background:#dfe6e6 url('../images/muscari-grass.jpg') center/cover no-repeat;overflow:hidden}
.about-stack{display:contents}

/* layer 2 — panel flush to the top-left corner (shows the lotus bloom) */
.about-panel{position:absolute;z-index:2;top:0;left:0;width:min(48vw,700px);height:min(112vh,1150px);background:url('../images/lotus-blue.jpg') center/cover no-repeat;box-shadow:0 24px 60px rgba(30,50,80,.28);opacity:0.7;}

/* "About me" title — upper-left, big */
.about-title{position:absolute;z-index:3;top:7vh;left:50%;transform:translateX(-50%);white-space:nowrap;margin:0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(3.6rem,11vw,8rem);line-height:.95;color:#141824;text-align:center;text-shadow:0 1px 20px rgba(240,244,250,.55)}

/* terminal — foreground, static box, scrolls internally */
.terminal{position:absolute;z-index:5;top:62vh;left:50%;transform:translateX(-50%);width:min(760px,72vw);border-radius:12px;overflow:hidden;box-shadow:0 34px 80px rgba(20,22,34,.45);background:#1e2027;font-family:'JetBrains Mono',ui-monospace,monospace}
.term-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:#2b2d36}
.term-bar .dot{width:12px;height:12px;border-radius:50%;flex:none}
.term-bar .r{background:#ff5f56}.term-bar .y{background:#ffbd2e}.term-bar .g{background:#27c93f}
.term-bar .ttl{margin-left:10px;color:#9aa0ab;font-size:.78rem;letter-spacing:.02em}
.term-body{padding:18px 20px 20px;color:#cfd4dd;font-size:.9rem;line-height:1.7;height:clamp(400px,54vh,640px);overflow-y:auto}
.term-body .prmpt{color:#7ee787}
.term-body .cmd{color:#eef0f3}
.term-body .out{display:block;color:#a9afbb;white-space:pre-wrap;margin-top:2px}
.term-body .dir{color:#8ab4f8}
.term-body .k{color:#e6c07b}
.term-body .blk{margin:0 0 12px}
.term-prompt-row{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap}
.term-select{background:#2b2d36;color:#eef0f3;border:1px solid #3a3d47;border-radius:6px;padding:6px 10px;font-family:inherit;font-size:.8rem;cursor:pointer;max-width:100%}

/* call to action */
.about-cta{position:absolute;z-index:3;left:0;right:0;bottom:clamp(28px,9vh,80px);text-align:center;padding:0 20px}
.about-cta .q{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3.4vw,2.3rem);color:#141824;margin-bottom:clamp(30px,6vh,64px);text-shadow:0 1px 16px rgba(240,244,250,.5)}
.about-cta .btn-in{display:inline-block;font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,2vw,1.3rem);color:#141824;padding-bottom:3px;border-bottom:1px solid rgba(20,24,36,.5);transition:color .2s,border-color .2s}
.about-cta .btn-in:hover{color:var(--pink-deep);border-color:var(--pink-deep)}

/* ---------- Responsive ---------- */
/* Tablet portrait & below: switch from the absolute composition to a stack */
@media(max-width:900px){
  .about2{min-height:auto;padding:0 clamp(16px,5vw,40px) 48px;position:relative}
  /* lotus panel as a shorter full-width banner at the top */
  .about-panel{position:relative;top:auto;left:auto;width:100vw;margin-left:calc(50% - 50vw);height:44vh;aspect-ratio:auto;opacity:1}
  /* "About me" overlaid on the lotus panel */
  .about-title{position:absolute;z-index:4;top:22vh;left:0;right:0;width:100%;transform:none;white-space:normal;text-align:center;padding:0 6vw;margin:0;color:#fff;text-shadow:0 2px 22px rgba(12,26,58,.6),0 1px 3px rgba(12,26,58,.45);font-size:clamp(2.6rem,12vw,4rem)}
  .terminal{position:relative;top:auto;left:auto;transform:none;width:min(620px,100%);margin:34px auto 0}
  .term-body{height:clamp(240px,40vh,360px)}
  .about-cta{position:relative;bottom:auto;left:auto;right:auto;margin:36px auto 0}
}
/* Small phones: tighten the title */
@media(max-width:380px){
  .about-title{font-size:clamp(2.2rem,10vw,2.8rem)}
}