/* === Global tokens === */
:root{
  --maxw: 1200px;
  --ui-mono: "input-mono", "Input Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --bio-gray: 143,143,143;
  --link-gray: 110,110,110;
}

/* Box sizing + safety */
*,*::before,*::after{ box-sizing:border-box; }

/* Background + underlay */
html, body { height: 100%; }
html, body { overflow-x: hidden; }                /* prevent sideways scroll */
body{ background:#000 !important; }
body::before{
  content:""; position:fixed; inset:0;
  background:rgba(0,0,0,.15); pointer-events:none; z-index:0;
}
.page{ position:relative; z-index:1; }

/* Menubar spacer */
.menubar-slot { display:block; height: var(--barh, 32px); }

/* === Base layout (desktop default) === */
.page{
  padding:24px 0 48px;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.about-grid{
  width:100%; max-width:var(--maxw);
  margin:48px auto 20px;
  display:grid; grid-template-columns:1fr 0.9fr;
  column-gap:5px; row-gap:10px;
  align-items:start;
}
.about-grid > * { min-width:0; }

.about-blurb{
  display:flex; justify-content:center; align-items:flex-start;
}
.right-col{ display:flex; flex-direction:column; gap:14px; }

/* Photo block */
figure{ margin-block-start:0; }                    /* remove UA top margin */
.about-photo{
  position:relative;
  margin:0 0 8px 0;
  max-width: clamp(340px, 32vw, 420px);
  width:100%;
}
.about-photo img{
  display:block; width:100%; height:auto; border:0;
}

/* Bio text */
.bio{
  font-family: var(--ui-mono);
  font-size:13px;
  line-height:1.6;
  color: rgb(var(--bio-gray));
  margin:4px 0 1.05rem;
  text-align:left;
  hyphens:none;
  word-break:normal;
  overflow-wrap:anywhere;                           /* long tokens won’t overflow */
}
.bio:first-child{ margin-top:0; }
.bio-compact{ margin-bottom:.5rem; }

/* Links */
.ext-link,
.ext-link:link,
.ext-link:visited{
  color: rgb(var(--link-gray));
  text-decoration-color: rgb(var(--link-gray));
}
.ext-link:hover,
.ext-link:focus,
.ext-link:active{
  color:#fff;
  text-decoration-color:#fff;
}

/* === Mobile shared === */
@media (max-width:900px){
  body{ background-attachment:scroll; }
}

/* === Mobile PORTRAIT — photo first and HARD centered === */
@media (max-width:900px) and (orientation:portrait){
  .about-grid{
    display:flex; flex-direction:column;
    row-gap:18px;
    margin-top:20px;
    padding:0 24px;
    align-items:stretch;
    max-width:100%;
  }

  /* Center photo robustly (iOS-safe) */
  .about-blurb{
    order:1;
    display:grid;                 /* grid centering is rock-solid on iOS */
    place-items:center;
    width:100%;
  }
  .about-photo{
    margin:16px auto 24px;
    max-width: clamp(240px, 70vw, 380px);
    width:auto;                   /* shrink to fit content so centering is true */
  }
  .about-photo img{
    display:block; width:100%; height:auto; margin:0 auto;
  }

  /* Text column full width, justified blocks (no hyphen splits) */
  .right-col{ order:2; width:100%; }
  .right-col .bio{
    text-align:justify;
    text-justify:inter-word;
    hyphens:none;
    word-break:normal;
    overflow-wrap:break-word;     /* break only overly-long tokens */
    margin:4px 0 1.05rem;
  }
}

/* === Mobile LANDSCAPE — side by side, top-aligned === */
@media (max-width:900px) and (orientation:landscape){
  .about-grid{
    display:grid;
    grid-template-columns:1fr 0.9fr;
    column-gap:6px; row-gap:10px;
    margin-top:28px; padding-inline:10px;
    align-items:start;
    max-width:100%;
  }
  .about-blurb{ grid-column:1; align-self:start; justify-content:center; }
  .right-col{
    grid-column:2;
    display:flex; flex-direction:column; gap:14px;
    padding-right:8px; min-width:0; align-self:start;
  }
  .about-photo{
    max-width:clamp(240px, 50vw, 360px);
    margin:0 0 8px 0;
  }
}

/* === Desktop re-assert === */
@media (min-width:901px){
  .about-grid{
    display:grid !important;
    grid-template-columns:1fr 0.9fr !important;
    column-gap:5px !important; row-gap:10px !important;
    margin-top:48px !important; padding:0 !important;
    align-items:start !important;
  }
  .right-col{ display:flex !important; flex-direction:column !important; gap:14px !important; }
  .about-blurb{ display:flex !important; justify-content:center !important; align-items:flex-start !important; }
  .about-photo{ max-width:clamp(340px, 32vw, 420px) !important; margin:0 0 8px 0 !important; }
}

/* === Optional debug borders (enable by adding .debug on body) === */
body.debug .about-grid{ outline:2px dashed #00ffff; }
body.debug .about-blurb{ outline:2px dashed #ff00ff; }
body.debug .about-photo{ outline:2px solid #ff8800; }
body.debug .right-col{ outline:2px dashed #00ff00; }