* { box-sizing: border-box; }
/* Centred block; socials tucked into a narrow side column so more of the page
   shows above the fold. */
.about-page { width: min(1080px, calc(100vw - 56px)); margin: clamp(56px, 8vh, 96px) auto 84px; }
.about-head { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 5px; border-bottom: 1px dotted currentColor; font-size: 11px; }
.about-head nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.about-head button { padding: 0; color: inherit; background: transparent; border: 0; cursor: pointer; }
/* portrait | bio + controls | compact socials column */
.about-stage { display: grid; grid-template-columns: minmax(160px, 270px) minmax(240px, 400px) minmax(160px, 215px); justify-content: center; align-items: start; gap: clamp(20px, 3vw, 52px); padding: 30px 0 40px; }
.lalc { position: sticky; top: 66px; display: block; width: 100%; max-height: 560px; object-fit: contain; }
.about-copy { min-width: 0; font: 300 13px/1.65 'Doto', "Helvetica Neue", Helvetica, Arial, sans-serif; }
.identity { margin: 0 0 24px; font: 400 1em/1.5 'Doto', "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .06em; }
/* Bio keeps the exact line breaks / spacing / bracketed notes from source,
   and reads thinner + slightly dimmer than the rest of the copy (bio only). */
.about-bio { white-space: pre-wrap; font-family: 'Doto', Arial, Helvetica, sans-serif; font-size: 11px; line-height: 1.5; font-weight: 400; opacity: .78; text-transform: none; -webkit-font-smoothing: antialiased; }
/* Compact side column beside the bio (was a wider block under it). */
.socials { margin: 0; padding: 2px 0 0; list-style: none; font: 300 9px/1.55 'Doto', "Helvetica Neue", Helvetica, Arial, sans-serif; opacity: .82; }
.socials li { margin: 2px 0; }
.socials a { display: inline-flex; align-items: center; gap: 5px; min-width: 0; border-bottom: 1px dotted transparent; overflow-wrap: anywhere; }
.socials a:hover, .socials a:focus-visible { border-color: currentColor; filter: blur(.18px); }
.service-icon { flex: 0 0 auto; display: inline-grid; place-items: center; width: 15px; height: 12px; font: 400 8px/1 'Doto', "Helvetica Neue", Helvetica, Arial, sans-serif; opacity: .62; }
.service-icon::before { display: block; }
.service-icon[data-service="instagram"]::before { content: "◎"; font-size: 12px; }
.service-icon[data-service="x"]::before { content: "𝕏"; font-size: 9px; }
.service-icon[data-service="mail"]::before { content: "@"; font-size: 9px; }
.service-icon[data-service="tumblr"]::before { content: "t"; font-family: Georgia, serif; font-size: 11px; }
.service-icon[data-service="soundcloud"]::before { content: "◒"; font-size: 10px; }
.service-icon[data-service="mal"]::before { content: "▤"; font-size: 10px; }
.service-icon[data-service="youtube"]::before { content: "▶"; font-size: 8px; }
.about-settings { display: grid; gap: 9px; margin-top: 28px; padding-top: 9px; border-top: 1px dotted currentColor; font-size: .82em; }
.about-settings label { display: grid; grid-template-columns: auto minmax(100px, 1fr); align-items: center; gap: 10px; }
.text-scale-control input {
  width: 100%;
  height: 16px;
  margin: 0;
  padding: 0;
  color: inherit;
  background:
    radial-gradient(circle at 0% 50%, currentColor 0 1px, transparent 1.5px),
    radial-gradient(circle at 25% 50%, currentColor 0 1px, transparent 1.5px),
    radial-gradient(circle at 50% 50%, currentColor 0 1px, transparent 1.5px),
    radial-gradient(circle at 75% 50%, currentColor 0 1px, transparent 1.5px),
    radial-gradient(circle at 100% 50%, currentColor 0 1px, transparent 1.5px),
    linear-gradient(currentColor,currentColor) center / 100% 1px no-repeat;
  border: 0;
  opacity: .72;
  cursor: ew-resize;
  appearance: none;
  transition: opacity .22s ease, filter .22s ease;
}
.text-scale-control input:hover,
.text-scale-control input:focus-visible { opacity: 1; filter: drop-shadow(0 0 3px currentColor); outline: none; }
.text-scale-control input::-webkit-slider-runnable-track { height: 16px; background: transparent; }
.text-scale-control input::-webkit-slider-thumb { width: 9px; height: 9px; margin-top: 3.5px; background: currentColor; border: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--slider-bg, #000), 0 0 5px currentColor; appearance: none; }
.text-scale-control input::-moz-range-track { height: 16px; background: transparent; border: 0; }
.text-scale-control input::-moz-range-thumb { width: 9px; height: 9px; background: currentColor; border: 2px solid var(--slider-bg, #000); border-radius: 50%; box-shadow: 0 0 5px currentColor; }
.about-settings button, .manifesto-toggle { width: max-content; padding: 0; color: inherit; background: transparent; border: 0; border-bottom: 1px dotted currentColor; cursor: pointer; font: inherit; letter-spacing: inherit; }
.manifesto-toggle { margin-top: 18px; }
.manifesto { max-height: 0; margin-top: 10px; overflow: hidden; opacity: 0; filter: blur(5px); transform: translateY(-8px); transition: max-height .65s cubic-bezier(.16,1,.3,1), opacity .4s ease, filter .55s ease, transform .65s cubic-bezier(.16,1,.3,1); }
.manifesto > iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.manifesto-fallback { margin: 6px 0 0; font-size: .72em; opacity: .56; }
.manifesto-fallback a { border-bottom: 1px dotted currentColor; }
.manifesto.local-preview > iframe { display: none; }
.manifesto.local-preview .manifesto-fallback::before { content: "local preview / "; }
.manifesto.open { max-height: 420px; opacity: 1; filter: blur(0); transform: translateY(0); }
.background-picker { margin-top: 20px; padding-top: 9px; border-top: 1px dotted currentColor; font-size: .76em; }
.background-picker h2 { display: flex; justify-content: space-between; align-items: center; margin: 0; font: inherit; }
.background-picker h2 button { padding: 0; color: inherit; background: transparent; border: 0; cursor: pointer; font: inherit; }
.background-picker-body { display: grid; gap: 13px; max-height: 540px; margin-top: 10px; overflow: hidden auto; opacity: 1; filter: blur(0); transition: max-height .65s cubic-bezier(.16,1,.3,1), opacity .35s ease, filter .48s ease; }
.background-picker.minimized .background-picker-body { max-height: 0; margin-top: 0; opacity: 0; filter: blur(3px); }
.background-picker h3 { margin: 0 0 5px; font: inherit; opacity: .62; }
.background-options { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 5px; }
.background-option { position: relative; aspect-ratio: 1.45 / 1; min-width: 0; padding: 0; overflow: hidden; color: inherit; background: transparent; border: 1px solid transparent; cursor: pointer; opacity: .45; transition: opacity .3s ease, filter .35s ease, border-color .3s ease; }
.background-option img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.55); }
.background-option:hover,
.background-option:focus-visible,
.background-option.is-active { border-color: currentColor; opacity: 1; filter: drop-shadow(0 0 5px currentColor); outline: 0; }
.background-option.is-active::after { content: "•"; position: absolute; right: 3px; top: 0; }
html[data-theme="light"] .about-page { color: #222; }
html[data-theme="light"] .about-page { --slider-bg: #ffffff; }
/* Tablet: drop to two columns (portrait | copy) with the socials tucked under
   the copy so the side column never crushes. */
@media (max-width: 980px) {
  .about-stage { grid-template-columns: minmax(150px, 230px) minmax(0, 1fr); }
  .socials { grid-column: 2; }
}
@media (max-width: 700px) {
  .about-page { width: min(470px, calc(100vw - 24px)); margin: 54px auto 84px; }
  .about-stage { grid-template-columns: 1fr; gap: 10px; padding-top: 20px; }
  /* Portrait scrolls with the page on phones (was pinned via sticky). */
  .lalc { position: static; width: min(240px, 62vw); max-height: 350px; margin: 0 auto; }
  .about-copy, .socials { grid-column: auto; width: min(100%, 470px); margin: 0 auto; }
  /* Nudge the bio in off the screen edge on phones. */
  .about-bio { padding-inline: clamp(14px, 6vw, 30px); }
  .background-options { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* Settings page reuses this stylesheet (about.js is null-guarded, so the same
   script drives both). Single centred column instead of the about grid. */
.settings-copy { width: min(560px, 100%); margin: 34px auto 0; }
.settings-page .background-picker { margin-top: 26px; }
.settings-page .about-settings { margin-top: 0; padding-top: 0; border-top: 0; }
.settings-hint { margin: 8px 0 0; font-size: .78em; line-height: 1.55; opacity: .72; }
/* links + manifesto share the right-hand column */
.about-links { min-width: 0; }
.about-links .manifesto-toggle { margin-top: 16px; }
.about-mail { border-bottom: 1px dotted currentColor; }