/* Phone layout v1. Keep the desktop layout and existing interaction lifecycles. */
@media (max-width:760px) {
 html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
 :root { --phone-mono:"Cascadia Code",Consolas,monospace; --phone-sans:Arial,"Segoe UI",sans-serif; --mono:var(--phone-mono); }
 body { font-family:var(--phone-mono); font-size:13px; line-height:1.65; }
 .site-shell { padding-inline:18px; }
 .home-page .topbar,.portfolio-page .topbar { display:grid;grid-template-columns:minmax(0,1fr) 38px 38px;gap:10px 8px;padding:14px 0 16px;min-height:0;align-items:center; }
 .topbar .brand { grid-row:1;grid-column:1;justify-self:start;font-family:var(--phone-mono); }
 .home-page .brand-word,.portfolio-page .brand-word {font-size:20px;letter-spacing:-1px;}
 .brand-domain {font:11px/1 var(--phone-mono);}
 .language-toggle::after {font-family:var(--phone-mono)!important;}
 .home-page .header-controls,.portfolio-page .header-controls {display:contents;}
 .topbar .language-toggle {grid-row:1;grid-column:2;min-width:38px;width:38px;height:38px;font:11px/1 var(--phone-mono);}
 .topbar .theme-toggle {grid-row:1;grid-column:3;width:38px;height:38px;}
 .home-page .palette-control,.portfolio-page .palette-control {grid-row:2;grid-column:1/-1;width:100%;height:40px;min-width:0;gap:7px;padding:3px 5px 3px 12px;border-radius:13px;}
 .home-page .palette-slider-wrap,.portfolio-page .palette-slider-wrap {flex:1;min-width:0;}
 #palette {width:100%;min-width:0;}
 #palette-reset,.palette-control .palette-cycle {width:32px;height:32px;flex:0 0 32px;border-radius:9px;}
 .home-page .home-hero {padding:20px 0 20px;overflow:visible;}
 .home-page .hero-signature {font:10px/1.6 var(--phone-mono);margin:0;min-height:16px;padding-top:4px;box-sizing:border-box;align-items:flex-start;}
 .home-page .signature-path {display:none;}
 .home-page .home-hero h1 {width:100%;max-width:none;margin:12px 0 16px;height:auto!important;font:400 clamp(30px,9.1vw,44px)/1.09 var(--phone-sans);letter-spacing:-.055em;}
 .home-page .home-hero h1>span:first-child {display:flex;align-items:center;width:calc(100% - 68px);max-width:none;min-height:56px;}
 .home-page .home-hero h1>br {display:none;}
 .home-page .home-hero h1 em {display:block;margin-top:2px;max-width:100%;}
 .home-page .hero-orbit,.home-page #orbit {left:auto;right:7px;top:48px;width:56px;height:56px;transform:none;opacity:1;}
 .home-page .orbit-particle {--particle-radius:25px;}
 .home-page .orbit-particle-slow {--particle-radius:20px;}
 .home-page .hero-bottom {display:block;max-width:none;margin:0;}
 .home-page .hero-bottom p {max-width:34ch;width:auto;margin:0;height:auto!important;font:400 14px/1.65 var(--phone-sans);}
 .home-page .hero-margin-note {display:none;}
 .home-page .skills-section {padding:24px 0 0;}
 .home-page .skills-section>.section-heading {padding:0;}
 .home-page .section-heading {margin-bottom:13px;gap:8px;align-items:center;}
 .section-heading-title {gap:10px;align-items:flex-start;}
 .section-index {font:10px/1.5 var(--phone-mono);padding-top:4px;}
 .home-page .section-heading h2,.home-page #wall h2 {font:400 24px/1.3 "Segoe UI",Arial,sans-serif;letter-spacing:-.7px;}
 .home-page .skills-description {margin:0;font:600 13px/1.7 var(--phone-mono);}
 .home-page .skills-description p {margin:0 0 17px;height:auto!important;font:inherit;}
 .home-page .skills-description p:last-child {margin-bottom:0;}
 .mobile-note-hint {display:none!important;}
 .home-page .personal-notes {margin:14px 0 0;gap:11px;font:600 11px/1.7 var(--phone-mono);}
 .home-page .personal-notes>div {display:flex;align-items:baseline;gap:6px 10px;flex-wrap:wrap;margin:0;}
 .home-page .personal-notes dt {font-size:10px;flex:0 0 auto;}
 .home-page .personal-notes dd {display:flex;flex-wrap:wrap;align-items:baseline;gap:5px;margin:0;flex:1;min-width:0;}
 .home-page .personal-notes .interest-chip {font:inherit;padding:1px 6px;border-radius:5px;min-height:0;}
 .home-page .personal-notes>div:has(.plans-chip) {margin:3px 0 0;}
 .home-page .personal-notes>div:has(.plans-chip) dd {flex-wrap:nowrap;}
 .home-page .plans-caption {font:10px/1.5 var(--phone-mono);}
 .home-page .owner-note {margin-top:20px;}
 .home-page .listening-section {margin:22px 0 30px;}
 .listening-section .listening-label {margin:0 0 10px;align-items:center;font:10px/1.5 var(--phone-mono);}
 .music-artists-trigger,.music-history>summary {font-family:var(--phone-mono);font-size:10px;}
 .home-page .listening-card {border-radius:16px;overflow:hidden;isolation:isolate;clip-path:inset(0 round 16px);padding:16px;gap:13px;min-height:0;}
 .listening-card .listening-art {width:54px;height:54px;flex:0 0 54px;border-radius:10px;}
 .listening-card .listening-heading {min-height:54px;}
 .listening-card .listening-title {font:600 17px/1.25 var(--phone-sans);}
 .listening-card .listening-artist {font-size:11px;line-height:1.5;}
 .listening-card .listening-bottom {min-height:28px;}
 .listening-card .listening-service-stack {right:16px;top:82px;}
 .home-page .listening-footnote,.listening-footnote.has-lyrics-warning {display:flex;justify-content:flex-end;text-align:right;font:9px/1.55 var(--phone-mono);margin:9px 0 0;}
 .home-page .listening-footnote>span:not(.listening-footnote-exit) {max-width:100%;text-align:right;}
 .home-page .listening-section>.music-history {margin-top:5px;}
 .home-page #works>.section-heading {grid-template-columns:minmax(0,1fr) auto;gap:7px 10px;margin:0 0 16px;}
 .home-page #works .section-heading-title {grid-column:1;grid-row:1;}
 .home-page #works .works-heading-hint {grid-column:2;grid-row:1;font:10px/1.5 var(--phone-mono);white-space:nowrap;align-self:center;}
 .home-page #works .works-heading-note {grid-column:1/-1;grid-row:2;margin:0;max-width:calc(100% - 28px);height:auto!important;font:10px/1.55 var(--phone-mono);}
 .home-page #works .works-heading-wip {grid-column:2;grid-row:2;justify-self:end;align-self:end;font:9px/1.5 var(--phone-mono);}
 html body:is(.home-page,.portfolio-page) .wb-grid {gap:12px;}
 html body:is(.home-page,.portfolio-page) details.wb-card>summary {padding:18px 16px 16px!important;min-height:230px!important;gap:0;}
 html body:is(.home-page,.portfolio-page) details.wb-card>summary .project-teaser-kicker {margin:0 0 51px;font:9px/1.5 var(--phone-mono);}
 html body:is(.home-page,.portfolio-page) details.wb-card>summary :is(.case-index,.project-teaser-kicker>span) {font-family:var(--phone-mono);font-size:9px;}
 html body:is(.home-page,.portfolio-page) details.wb-card>summary :is(h2,h3,.project-teaser-title,.portfolio-title) {font-family:var(--phone-sans);font-size:23px;line-height:1.2;letter-spacing:-.7px;margin-bottom:9px;}
 html body:is(.home-page,.portfolio-page) details.wb-card>summary .wb-project-full-name {font-size:13px;letter-spacing:-.2px;}
 html body:is(.home-page,.portfolio-page) details.wb-card>summary :is(.wb-card-description,.card-description,.project-featured-description,.portfolio-tagline) {font:400 12px/1.55 var(--phone-sans);margin:0;max-width:40ch;}
 html body.home-page details.wb-card>summary .work-card-copy {margin:0;gap:12px;}
 html body.home-page details.wb-card>summary .card-title {margin:0 0 9px;}
 html body:is(.home-page,.portfolio-page) details.wb-card>summary :is(.card-title,.project-teaser-title,.portfolio-card-intro) {padding-top:0!important;height:auto!important;margin-top:auto;}
 html body:is(.home-page,.portfolio-page) details.wb-card>summary :is(.project-teaser-tags,.project-tags,.tag-list,.portfolio-tags) {gap:5px;margin-top:13px;}
 html body:is(.home-page,.portfolio-page) details.wb-card>summary .project-tags .tag {min-height:23px;height:auto;padding:4px 7px;font:500 9px/1.3 var(--phone-mono);border-radius:6px;letter-spacing:0;}
 html body:is(.home-page,.portfolio-page) details.wb-card>summary .project-tags .tag-available {font-weight:600;}
 html body:is(.home-page,.portfolio-page) details.wb-card>summary .project-tags .tag-available::before {width:4px;height:4px;margin-right:5px;}
 .home-page #wall .wall-heading {padding-top:24px;margin-bottom:12px;align-items:baseline;}
 .wall-heading-tools,.wall-channel,.wall-filter {font:10px/1.5 var(--phone-mono);}
 .wall-caption {font:12px/1.6 var(--phone-sans);margin-bottom:15px;}
 .wall-post-head,.wall-original,.wall-post-actions>button,.wall-pages,.wall-pages>button,.wall-page-form button,.wall-channel-user {font-family:var(--phone-mono);font-size:10px;}
 .wall-post-text,.wall-replies .wall-post-text,.wall-quote-text {font:400 13px/1.7 var(--phone-sans);}
 .wall-post-owner,.wall-post-hidden {padding:15px!important;margin-bottom:13px;border-radius:12px;}
 .wall-owner-reply {margin-left:14px;padding:12px;}
 .wall-compose textarea {font:16px/1.5 var(--phone-sans);}
 .wall-compose>label,.wall-send,.wall-page-form input,.wall-format-tools {font-family:var(--phone-mono);}
 .personal-footer {padding-top:24px;font-family:var(--phone-mono);}
 .personal-footer :is(.build-meta,.view-counter,.night-escape-counter,.footer-credits,.site-addresses) {font-family:var(--phone-mono);font-size:10px;line-height:1.6;}
 .personal-footer .footer-links a {font:12px/1.5 var(--phone-mono);padding:7px 12px;}
 .personal-footer .site-addresses {gap:7px;}
 .personal-footer .site-addresses a {font-family:var(--phone-mono);font-size:10px;}
 #night-switch,.night-switch-label {font-family:var(--phone-mono);}
 .personal-footer :is(.view-counter,.night-escape-counter) * {font-family:var(--phone-mono);font-size:inherit;}
 html body:is(.home-page,.portfolio-page) details:is(#home-phasmophobia,#phasmophobia)>summary .project-tags .tag {min-height:23px;font-size:9px;padding:4px 7px;}
 .wb-dialog .wb-content {padding:22px 18px;}
 .wb-dialog .wb-content :is(.project-story p,.project-teaser-copy,.work-detail-intro p) {font-size:14px;line-height:1.7;}
 .wb-dialog :is(.wb-eyebrow,.wb-footer p,.wb-close,.wb-download,.wb-meta-chip) {font-family:var(--phone-mono);}
 .wb-dialog .wb-header h2 {font-family:var(--phone-sans);font-size:27px;}
}
@media (max-width:360px) {
 .site-shell {padding-inline:15px;}
 .home-page .home-hero h1>span:first-child {max-width:none;min-height:56px;}
 .home-page #orbit {width:56px;height:56px;right:2px;top:48px;}
 .home-page #works .works-heading-hint {font-size:9px;}
 .home-page .personal-notes {font-size:10px;}
 .home-page .personal-notes dt {font-size:9px;}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce) {
 .hero-orbit *,.palette-control *,.brand *,.tag {animation:none!important;transition:none!important;}
}

/* Image zoom stays inside the viewer, including Safari's visual viewport. */
dialog.image-preview {
 inset:auto;left:var(--preview-x,0px);top:var(--preview-y,0px);
 width:var(--preview-width,100vw);height:var(--preview-height,100dvh);
 box-sizing:border-box;padding:calc(56px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
 overflow:hidden;
}
.image-preview-stage {width:100%;flex:1;min-height:0;display:grid;grid-template: minmax(0,1fr) / minmax(0,1fr);place-items:center;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;}
.image-preview-stage img {max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transform-origin:center;touch-action:none;user-select:none;-webkit-user-drag:none;}
.image-preview-stage[data-zoomed="true"] {cursor:grab;}
.image-preview-stage:active {cursor:grabbing;}
.image-preview-tools {display:flex;align-items:center;gap:8px;flex:none;font:12px/1.4 "Segoe UI",Arial,sans-serif;}
.image-preview-tools button {min-width:44px;min-height:40px;border:1px solid #ffffff30;border-radius:8px;color:#ececf1;background:#202128;font:inherit;}
.image-preview-tools [data-zoom-label] {min-width:5ch;text-align:center;font-variant-numeric:tabular-nums;}
.image-preview-caption {flex:none;max-width:100%;}
@media(max-width:760px) {
 .home-page .music-history {max-width:100%;min-width:0;overflow-x:clip;}
 .home-page .music-history-feature-column {min-width:0;max-width:100%;}
 .home-page .palette-control {overflow:clip;}
 .home-page .home-hero h1 {font-size:clamp(30px,9.4vw,46px);}
 .home-page .home-hero h1>span:first-child {width:calc(100% - 98px);min-height:78px;}
 .home-page .hero-orbit,.home-page #orbit {width:88px;height:88px;right:24px;top:44px;}
 .home-page .orbit-particle {--particle-radius:40px;}
 .home-page .orbit-particle-slow {--particle-radius:31px;}
 .home-page #orbit .orbit-ring,.home-page #orbit .orbit-ring::before {border-width:1.3px;}
 .home-page .skills-section {padding-top:16px;}
 .home-page .skills-section>.section-heading {padding:18px 0 8px;}
 .home-page .section-heading h2,.home-page #wall h2 {font-size:22px;}
 html body:is(.home-page,.portfolio-page) details.wb-card>summary .project-tags .tag.tag-available {gap:5px!important;}
 html body:is(.home-page,.portfolio-page) details.wb-card>summary .project-tags .tag.tag-available::before {margin:0!important;flex-basis:4px;width:4px;height:4px;}
 /* A wide image strip keeps the whole composition visible on narrow screens. */
 html body:is(.home-page,.portfolio-page) details.wb-card:is(#home-payday-the-heist,#payday-the-heist)>summary, html body:is(.home-page,.portfolio-page) details.wb-card>summary {
  min-height:0!important;height:auto!important;padding:16px!important;isolation:isolate;display:flex;flex-direction:column;
 }
 html body:is(.home-page,.portfolio-page) details.wb-card>summary .project-teaser-kicker {margin:0 0 116px!important;}
 html body:is(.home-page,.portfolio-page) details.wb-card>summary .project-card-backdrop {inset:0!important;z-index:0;pointer-events:none;}
 html body:is(.home-page,.portfolio-page) details.wb-card:is(#home-payday-the-heist,#payday-the-heist)>summary .project-card-backdrop img, html body:is(.home-page,.portfolio-page) details.wb-card>summary .project-card-backdrop img {
  top:38px!important;left:0!important;right:0!important;bottom:auto!important;width:100%!important;height:108px!important;
  object-fit:contain!important;object-position:center!important;mask-image:none!important;transform:none!important;filter:none!important;opacity:.85!important;
 }
 html body:is(.home-page,.portfolio-page) details.wb-card>summary .project-card-backdrop::after {background:linear-gradient(0deg,var(--bg) 0%,transparent 65%)!important;}
 html body:is(.home-page,.portfolio-page) details.wb-card>summary>:not(.project-card-backdrop) {position:relative;z-index:2;}
 html body:is(.home-page,.portfolio-page) details.wb-card>summary :is(.card-description,.wb-card-description,.portfolio-tagline) {position:relative;z-index:2;}
 html body:is(.home-page,.portfolio-page) details.wb-card>summary :is(.card-title,.project-teaser-title,.portfolio-card-intro,.work-card-copy) {margin-top:0!important;}
 html body:is(.home-page,.portfolio-page) details.wb-card>summary :is(.card-title,.card-description,.wb-card-description,.project-teaser-title,.project-teaser-kicker) {opacity:1!important;filter:none!important;}
}
@media(hover:none),(pointer:coarse) {
 html body:is(.home-page,.portfolio-page) details.wb-card>summary :is(.card-title,.card-description,.wb-card-description,.project-teaser-title,.project-teaser-kicker) {opacity:1!important;filter:none!important;transform:none!important;color:var(--text);}
 html body:is(.home-page,.portfolio-page) details.wb-card {transform:none!important;}
}

/* Phone refinement: readable content and comfortable controls, without desktop changes. */
@media (max-width:760px) {
 :root { --phone-gutter:18px; }
 body:is(.home-page,.portfolio-page) .site-shell {
  padding-left:max(var(--phone-gutter),env(safe-area-inset-left));
  padding-right:max(var(--phone-gutter),env(safe-area-inset-right));
 }
 .home-page .topbar,.portfolio-page .topbar {
  grid-template-columns:minmax(0,1fr) 44px 44px;
  gap:10px 8px;
 }
 .topbar .brand { min-height:44px;min-width:0;max-width:100%;align-items:center; }
 .topbar .language-toggle,.topbar .theme-toggle { width:44px;height:44px;min-width:44px; }
 .home-page .palette-control,.portfolio-page .palette-control { height:54px;padding:4px 5px 4px 12px;gap:8px; }
 #palette-reset,.palette-control .palette-cycle { width:44px;height:44px;flex:0 0 44px; }
 .home-page .palette-slider-wrap,.portfolio-page .palette-slider-wrap { min-height:44px;display:flex;align-items:center; }
 .topbar :is(button,input),.personal-notes button,.owner-note button { touch-action:manipulation; }

 .home-page .skills-description { font-size:14px;line-height:1.75;font-weight:500; }
 .home-page .skills-description p { margin-bottom:18px; }
 .home-page .personal-notes { margin-top:20px;gap:14px;font-size:12px;line-height:1.6; }
 .home-page .personal-notes>div { display:flex;flex-direction:column;align-items:stretch;gap:6px; }
 .home-page .personal-notes dt { flex:none;font-size:11px;line-height:1.5; }
 .home-page .personal-notes dd { flex:auto;min-width:0;gap:7px;margin:0;align-items:stretch; }
 .home-page .personal-notes dd>.skill-note { display:inline-flex;min-width:0;max-width:100%; }
 .home-page .personal-notes .interest-chip {
  box-sizing:border-box;display:inline-flex;align-items:center;gap:7px;
  min-height:44px;max-width:100%;padding:7px 10px;white-space:normal;
  overflow-wrap:anywhere;text-align:left;line-height:1.5;
 }
 .home-page .personal-notes>div:has(.plans-chip) dd { flex-wrap:wrap;align-items:center; }
 .home-page .plans-caption { top:0;margin-left:0;line-height:1.5; }
 .home-page .owner-note { margin-top:24px;padding:12px 14px 6px; }
 .home-page .owner-note-heading { gap:5px 12px; }
 .home-page .owner-note-text { padding-inline:18px;margin-block:7px 1px;font-size:16px;line-height:1.6; }
 .home-page .owner-note .owner-note-history-toggle { display:inline-flex;align-items:center;min-height:44px;padding-inline:4px; }
 .home-page .owner-note .owner-note-edit { display:inline-flex;align-items:center;min-height:44px;padding-inline:4px; }

 .home-page #works>.section-heading { gap:8px 10px;margin-bottom:16px; }
 .home-page #works .works-heading-hint { display:inline-flex;align-items:center;min-height:44px;font-size:11px; }
 .home-page #works .works-heading-note { max-width:calc(100% - 25px);font-size:11px;line-height:1.6; }
 html body:is(.home-page,.portfolio-page) .wb-grid { gap:14px; }
 html body:is(.home-page,.portfolio-page) details.wb-card>summary :is(.wb-card-description,.card-description,.project-featured-description,.portfolio-tagline) {
  font-size:13px;line-height:1.6;overflow-wrap:anywhere;
 }
 html body:is(.home-page,.portfolio-page) details.wb-card>summary .project-tags { gap:6px; }
 html body:is(.home-page,.portfolio-page) details.wb-card>summary .project-tags .tag,
 html body:is(.home-page,.portfolio-page) details:is(#home-phasmophobia,#phasmophobia)>summary .project-tags .tag {
  font-size:10px;line-height:1.4;min-height:26px;padding:5px 8px;white-space:normal;max-width:100%;overflow-wrap:anywhere;
 }
 .wb-dialog .wb-close { min-width:44px;min-height:44px;height:44px;align-items:center; }
 .wb-dialog .wb-download { min-height:44px; }
 .wb-dialog .wb-header h2 { overflow-wrap:anywhere; }

 .home-page #wall .wall-heading { flex-wrap:wrap;gap:8px 12px; }
 .wall-heading-main { flex:1 1 100%;min-width:0; }
 .wall-heading .wall-caption { font-size:11px;line-height:1.6; }
 .home-page #wall .wall-heading>.wall-filter { min-height:44px;line-height:1.5;font-size:11px;align-self:center; }
 #wall .wall-formatting {
  position:static;display:flex;align-items:center;justify-content:flex-end;
  gap:6px;min-height:44px;margin:0 0 8px;font-size:11px;line-height:1.5;
 }
 #wall .wall-formatting>span:first-child { padding-right:4px;font:inherit; }
 #wall .wall-shortcuts { display:flex;align-items:center;gap:4px; }
 #wall .wall-shortcut-hint { display:none; }
 #wall .wall-formatting button {
  display:inline-grid;place-items:center;width:44px;height:44px;min-height:44px;
  padding:0;border-radius:7px;font-size:15px;line-height:1;
 }
 #wall .wall-editor { padding-right:0;min-height:44px;height:44px;max-height:120px;font-size:16px;line-height:26px; }
 #wall .wall-editor[data-empty="true"]::before { white-space:normal;max-width:100%; }
 #wall .wall-send,#wall .wall-original,#wall .wall-archive-link,#wall .wall-read-full,
 #wall .wall-post-actions>button,#wall .wall-bottom>button,#wall .wall-owner button,
 #wall .wall-owner-reply>button,#wall .wall-return>button,#wall .wall-reply-target button {
  min-height:44px;touch-action:manipulation;
 }
 #wall .wall-post-actions { gap:4px 18px; }
 #wall .wall-owner-reply { margin-left:14px; }
 #wall .wall-owner-reply::before { left:-15px;width:10px; }
 #wall .wall-pages { grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 14px; }
 #wall .wall-page-center { grid-column:1/-1;grid-row:1; }
 #wall .wall-pages>[data-wall-prev] { grid-column:1;grid-row:2; }
 #wall .wall-pages>[data-wall-next] { grid-column:2;grid-row:2; }
 #wall .wall-pages>button,#wall .wall-page-form button { min-height:44px; }
 #wall .wall-page-form input { width:48px;min-height:44px;font-size:16px; }
 #wall .wall-media-close { min-height:44px; }

 body:is(.home-page,.portfolio-page) .personal-footer {
  gap:14px;padding-bottom:calc(36px + env(safe-area-inset-bottom));
 }
 .personal-footer .social-links { flex-wrap:wrap;gap:8px;max-width:100%; }
 .personal-footer .social-links a { min-height:44px;display:inline-flex;align-items:center; }
 .personal-footer .domain-switcher { gap:8px;max-width:100%; }
 .personal-footer .domain-switcher-label { flex-basis:100%;margin:0; }
 .personal-footer .domain-link { min-height:44px;box-sizing:border-box; }
 .personal-footer p { max-width:100%;overflow-wrap:anywhere;line-height:1.8; }
 .personal-footer p a { display:inline-block;min-height:32px;line-height:32px; }
 .personal-footer .build-meta { max-width:100%;flex-wrap:wrap;justify-content:center; }
}
@media (max-width:360px) {
 :root { --phone-gutter:15px; }
 .home-page #works>.section-heading { display:grid;grid-template-columns:minmax(0,1fr) auto;row-gap:5px; }
 .home-page #works .section-heading-title { grid-column:1/-1;grid-row:1;min-width:0;flex-wrap:nowrap;align-items:baseline; }
 .home-page #works .section-heading-title .section-index { flex:none;white-space:nowrap; }
 .home-page #works .section-heading-title h2 { white-space:nowrap; }
 .home-page #works .works-heading-hint { grid-column:1/-1;grid-row:2;justify-self:start;max-width:100%;font-size:10px;white-space:normal; }
 .home-page #works .works-heading-note { grid-column:1;grid-row:3;max-width:100%; }
 .home-page #works .works-heading-wip { grid-column:2;grid-row:3;align-self:start;padding-top:3px; }
}

/* Quiet player: shared title/subtitle rows keep the right-hand metadata aligned. */
body:is(.home-page,.portfolio-page) .listening-section .listening-shell .listening-symbol {
 display:grid;grid-template-columns:repeat(3,2px);column-gap:3px;align-items:center;justify-content:start;width:12px;
}
body:is(.home-page,.portfolio-page) .listening-section .listening-shell .listening-symbol i {
 width:2px;margin:0;padding:0;
}
body:is(.home-page,.portfolio-page) .listening-section .listening-shell .listening-card[data-listening-state="offline"] {
 --quiet-art-size:114px;--quiet-slot-size:110px;display:grid;grid-template-columns:var(--quiet-slot-size) minmax(0,1fr) max-content;grid-template-rows:auto auto;column-gap:24px;row-gap:7px;align-content:center;align-items:center;min-height:calc(var(--quiet-art-size) + 34px);
}
body:is(.home-page,.portfolio-page) .listening-section .listening-shell .listening-card[data-listening-state="offline"] :is(.listening-body,.listening-heading,.listening-copy) {
 display:contents;
}
body:is(.home-page,.portfolio-page) .listening-section .listening-shell .listening-card[data-listening-state="offline"] .listening-cover-stack {
 position:absolute;grid-area:auto;left:20px;top:50%;translate:0 -50%;width:var(--quiet-slot-size);min-height:0;
}
body:is(.home-page,.portfolio-page) .listening-section .listening-shell .listening-card[data-listening-state="offline"] .listening-art {
 width:var(--quiet-art-size);height:var(--quiet-art-size);
}
body:is(.home-page,.portfolio-page) .listening-section .listening-shell .listening-card[data-listening-state="offline"] :is(.listening-title,.listening-artist,.listening-symbol,.listening-service-stack) {
 position:relative;top:-2px;bottom:auto;left:auto;right:auto;transform:none;translate:none;align-self:center;margin:0;
}
body:is(.home-page,.portfolio-page) .listening-section .listening-shell .listening-card[data-listening-state="offline"] .listening-title {grid-column:2;grid-row:1;}
body:is(.home-page,.portfolio-page) .listening-section .listening-shell .listening-card[data-listening-state="offline"] .listening-artist {grid-column:2;grid-row:2;}
body:is(.home-page,.portfolio-page) .listening-section .listening-shell .listening-card[data-listening-state="offline"] .listening-symbol {grid-column:3;grid-row:1;justify-self:end;}
body:is(.home-page,.portfolio-page) .listening-section .listening-shell .listening-card[data-listening-state="offline"] .listening-service-stack {grid-column:3;grid-row:2;justify-self:end;min-height:0;}
@media(min-width:1100px) {
 body.home-page .listening-section .listening-shell .listening-card[data-listening-state="offline"] {--quiet-art-size:100px;column-gap:22px;min-height:140px;}
}
@media(max-width:760px) {
 body:is(.home-page,.portfolio-page) .listening-section .listening-shell .listening-card[data-listening-state="offline"] {--quiet-art-size:72px;--quiet-slot-size:72px;column-gap:14px;row-gap:5px;min-height:140px;}
 body:is(.home-page,.portfolio-page) .listening-section .listening-shell .listening-card[data-listening-state="offline"] .listening-cover-stack {left:16px;}
}

/* Mobile composition v2: a phone has its own rhythm, not a scaled desktop. */
@media (max-width:760px) {
 html:not([data-night-mode="on"]) body.home-page #top {
  --phone-orbit:clamp(62px,18vw,82px);
  display:grid;grid-template-columns:minmax(0,1fr) var(--phone-orbit);
  column-gap:16px;row-gap:16px;padding:22px 0 28px;overflow:visible;
 }
 html:not([data-night-mode="on"]) body.home-page #top .hero-signature {
  grid-column:1/-1;grid-row:1;padding:0;min-height:16px;
 }
 html:not([data-night-mode="on"]) body.home-page #top h1 {
  grid-column:1/-1;grid-row:2;margin:0;width:100%;max-width:100%;min-height:0;
  display:grid;grid-template-columns:minmax(0,1fr) var(--phone-orbit);
  column-gap:16px;row-gap:12px;height:auto!important;
  font:400 clamp(29px,8.7vw,46px)/1.06 var(--phone-sans);letter-spacing:-.055em;
  text-wrap:initial;
 }
 html:not([data-night-mode="on"]) body.home-page #top h1>span:first-child {
  grid-column:1;grid-row:1;display:flex;align-items:center;
  width:auto;max-width:none;min-height:var(--phone-orbit);height:auto!important;
 }
 html:not([data-night-mode="on"]) body.home-page #top h1>br {display:none;}
 html:not([data-night-mode="on"]) body.home-page #top h1 em {
  grid-column:1/-1;grid-row:2;display:block;margin:0;max-width:100%;
  font-size:clamp(36px,11.2vw,64px);line-height:1.05;letter-spacing:-.06em;
  text-wrap:balance;
 }
 html:not([data-night-mode="on"]) body.home-page #top #orbit {
  grid-column:2;grid-row:2;position:relative;inset:auto;
  align-self:start;justify-self:center;z-index:2;
  width:var(--phone-orbit);height:var(--phone-orbit);margin:0;
  transform:none;opacity:1;
 }
 html:not([data-night-mode="on"]) body.home-page #top #orbit .orbit-particle {--particle-radius:calc(var(--phone-orbit) * .45);}
 html:not([data-night-mode="on"]) body.home-page #top #orbit .orbit-particle-slow {--particle-radius:calc(var(--phone-orbit) * .35);}
 html:not([data-night-mode="on"]) body.home-page #top .hero-bottom {
  grid-column:1/-1;grid-row:3;margin:0;max-width:none;
 }
 html:not([data-night-mode="on"]) body.home-page #top .hero-bottom p {
  max-width:33ch;font-size:14px;line-height:1.65;
 }

 /* A small index of interests. The existing tap notes remain the controls. */
 html:not([data-night-mode="on"]) body.home-page .personal-notes {
  margin-top:22px;gap:0;font-size:12px;line-height:1.5;
 }
 html:not([data-night-mode="on"]) body.home-page .personal-notes>div {
  display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:14px;
  align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);
 }
 html:not([data-night-mode="on"]) body.home-page .personal-notes dt {
  font:400 10px/1.55 var(--phone-mono);padding-top:5px;color:var(--faint);
 }
 html:not([data-night-mode="on"]) body.home-page .personal-notes dd {
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;margin:0;min-width:0;
 }
 html:not([data-night-mode="on"]) body.home-page .personal-notes .interest-chip {
  display:inline-flex;min-height:30px;max-width:100%;padding:5px 0;
  border:0;border-radius:0;background:transparent;color:var(--muted);
  font:500 12px/1.55 var(--phone-mono);white-space:normal;overflow-wrap:normal;
  text-decoration:none;
 }
 html:not([data-night-mode="on"]) body.home-page .personal-notes .interest-chip::after {content:none;}
 html:not([data-night-mode="on"]) body.home-page .personal-notes .interest-chip[aria-expanded="true"] {
  color:var(--accent);background:none;
 }
 html:not([data-night-mode="on"]) body.home-page .personal-notes>div:has(.plans-chip) {
  display:block;margin:0;border:0;padding-top:13px;
 }
 html:not([data-night-mode="on"]) body.home-page .personal-notes .plans-chip {
  color:var(--accent);text-decoration:none;gap:6px;
 }
 html:not([data-night-mode="on"]) body.home-page .personal-notes .plans-caption {font-size:10px;top:0;margin-left:0;}

 /* A brief status line, with history alongside it instead of another tall card. */
 html:not([data-night-mode="on"]) body.home-page .owner-note {
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px 12px;
  margin-top:18px;padding:12px 14px;min-height:0;border-radius:9px;
 }
 html:not([data-night-mode="on"]) body.home-page .owner-note::after {display:none;}
 html:not([data-night-mode="on"]) body.home-page .owner-note-heading {grid-column:1/-1;min-height:0;gap:6px;}
 html:not([data-night-mode="on"]) body.home-page .owner-note-title {font-size:10px;}
 html:not([data-night-mode="on"]) body.home-page .owner-note-time {font-size:10px;}
 html:not([data-night-mode="on"]) body.home-page .owner-note-text {
  grid-column:1;align-self:center;min-width:0;min-height:0;margin:0;padding:0;
  font-size:16px;line-height:1.6;text-align:left;
 }
 html:not([data-night-mode="on"]) body.home-page .owner-note-text::before {display:none;}
 html:not([data-night-mode="on"]) body.home-page .owner-note-footer {grid-column:2;align-self:center;min-height:0;}
 html:not([data-night-mode="on"]) body.home-page .owner-note .owner-note-history-toggle {min-height:32px;font-size:9px;}
 html:not([data-night-mode="on"]) body.home-page .owner-note :is(.owner-note-history,.owner-note-editor,.owner-note-error) {grid-column:1/-1;}
 html:not([data-night-mode="on"]) body.home-page .owner-note-editor {min-width:0;}
}
@media (max-width:360px) {
 html:not([data-night-mode="on"]) body.home-page .personal-notes>div {grid-template-columns:68px minmax(0,1fr);column-gap:10px;}
 html:not([data-night-mode="on"]) body.home-page .personal-notes .interest-chip {font-size:11px;}
 html:not([data-night-mode="on"]) body.home-page .owner-note {column-gap:8px;padding-inline:11px;}
 html:not([data-night-mode="on"]) body.home-page .owner-note-text {font-size:14px;}
}
/* End mobile composition v2. */

/* Phone plans rail: preserve the board, change only its status navigation. */
@media(max-width:760px) {
 html body.plans-page .plans-lead {height:auto!important;min-height:0;}
 html body.plans-page .plans-intro {padding-bottom:19px;}
 html body.plans-page .plans-filters {
  flex:1 1 100%;min-width:0;max-width:100%;flex-wrap:nowrap;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
  scroll-snap-type:x proximity;gap:5px;padding:3px 0;
 }
 html body.plans-page .plans-filters::-webkit-scrollbar {display:none;}
 html body.plans-page .plans-filters button {
  flex:none;scroll-snap-align:start;white-space:nowrap;min-height:38px;
  padding:7px 10px;gap:6px;border:0;border-radius:6px;
  box-shadow:none;text-decoration:none;font-size:12px;
 }
 html body.plans-page .plans-filters button::after {content:none;display:none;}
 html body.plans-page .plans-filters button:not([aria-pressed="true"]) {
  border:0;box-shadow:none;background:transparent;color:var(--muted);
 }
 html body.plans-page .plans-filters button[aria-pressed="true"] {
  border:0;box-shadow:none;color:var(--accent);font-weight:600;
  background:color-mix(in srgb,var(--accent) 8%,transparent);
 }
 html body.plans-page .plans-filters button:focus-visible {outline:2px solid var(--accent);outline-offset:1px;}
 html body.plans-page .plans-actions {margin-left:auto;justify-content:flex-end;}
}
/* End phone plans rail. */

/* Phone polish: a compact heading row, quiet glass notes and visible interest chips. */
@media(max-width:760px) {
 html:not([data-night-mode="on"]) body.home-page #top {
  --phone-hero-font:clamp(29px,8.7vw,46px);
  --phone-orbit:clamp(58px,16vw,72px);
  column-gap:24px;row-gap:12px;padding-top:16px;
 }
 html:not([data-night-mode="on"]) body.home-page #top h1 {
  column-gap:24px;row-gap:16px;font-size:var(--phone-hero-font);
 }
 html:not([data-night-mode="on"]) body.home-page #top h1>span:first-child {
  min-height:1.25em;
 }
 html:not([data-night-mode="on"]) body.home-page #top #orbit {
  top:calc((var(--phone-hero-font) * 1.25 - var(--phone-orbit)) / 2);
  left:-10px;
 }
 html:not([data-night-mode="on"]) body.home-page #top #orbit .orbit-ring::before {
  inset:18% -7%;
 }

 html:not([data-night-mode="on"]) body.home-page .personal-notes dd {
  gap:6px 8px;
 }
 html:not([data-night-mode="on"]) body.home-page .personal-notes button.interest-chip {
  min-height:36px;padding:6px 9px;border-radius:5px;
  border:1px solid color-mix(in srgb,var(--text) 16%,transparent);
  background:color-mix(in srgb,var(--text) 5%,transparent);
 }
 html:not([data-night-mode="on"]) body.home-page .personal-notes button.interest-chip[aria-expanded="true"] {
  color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 40%,transparent);
  background:color-mix(in srgb,var(--accent) 7%,transparent);
 }

 /* The desktop glass recipe also applies to the body-portaled touch notes. */
 html:not([data-night-mode="on"]) body.home-page .skill-note-card[id^="note-"] {
  background:color-mix(in srgb,var(--bg) 24%,transparent);
  backdrop-filter:blur(7px) saturate(110%);
  -webkit-backdrop-filter:blur(7px) saturate(110%);
 }
 html:not([data-night-mode="on"])[data-theme="light"] body.home-page .skill-note-card[id^="note-"] {
  background:linear-gradient(135deg,#ffffff88,#ffffff18),hsl(var(--palette-hue) 55% 91% / .5);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
 }
}
@media(max-width:760px) {
 @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  html:not([data-night-mode="on"]) body.home-page .skill-note-card[id^="note-"] {
   background:color-mix(in srgb,var(--bg) 88%,transparent);
  }
  html:not([data-night-mode="on"])[data-theme="light"] body.home-page .skill-note-card[id^="note-"] {
   background:color-mix(in srgb,var(--bg) 96%,white);
  }
 }
}
/* End phone heading and annotation polish. */

/* Phone wall: one clear header and one compact pagination row. */
@media (max-width:760px) {
 html:not([data-night-mode="on"]) body.home-page #wall .wall-heading {
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:end;column-gap:12px;row-gap:0;
  padding:18px 0 14px;margin-bottom:0;
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-heading-main {
  display:contents;
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-heading .section-heading-title {
  grid-column:1;grid-row:1;align-self:end;align-items:baseline;
  flex-wrap:nowrap;gap:10px;min-width:0;
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-heading>.wall-filter {
  grid-column:2;grid-row:1;justify-self:end;align-self:end;
  min-height:44px;margin:0;padding:0;
  font:11px/1.5 var(--phone-mono,Consolas,monospace);
  text-align:right;white-space:nowrap;touch-action:manipulation;
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-heading .wall-caption {
  grid-column:1/-1;grid-row:2;align-self:end;
  margin:4px 0 0;min-width:0;
  font:11px/1.6 var(--phone-mono,Consolas,monospace);
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-pages {
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:8px;margin-top:8px;
  font:11px/1.5 var(--phone-mono,Consolas,monospace);
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-pages>[data-wall-prev] {
  grid-column:1;grid-row:1;justify-self:start;
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-page-center {
  grid-column:2;grid-row:1;justify-self:center;
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-pages>[data-wall-next] {
  grid-column:3;grid-row:1;justify-self:end;
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-pages>button,
 html:not([data-night-mode="on"]) body.home-page #wall .wall-page-form button {
  min-height:44px;font:inherit;touch-action:manipulation;
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-page-form {
  position:relative;gap:6px;min-height:44px;
 }
 /* The painted field is small; its numeric keyboard target remains 40 x 44. */
 html:not([data-night-mode="on"]) body.home-page #wall .wall-page-form::before {
  content:"";position:absolute;left:2px;top:7px;width:36px;height:30px;
  box-sizing:border-box;border:1px solid var(--line);border-radius:5px;
  background:var(--surface);pointer-events:none;
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-page-form input {
  position:relative;width:40px;height:44px;min-height:44px;
  margin:0;padding:0 4px;border:0;border-radius:0;box-shadow:none;
  background:transparent;font:16px/1.2 var(--phone-mono,Consolas,monospace);
  touch-action:manipulation;
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-page-form input:focus-visible {
  outline:2px solid var(--accent);outline-offset:-7px;border-radius:8px;
 }
}

/* Keep the phone footer compact while the portal follows the escaped counter. */
@media (max-width:760px) {
 html:not([data-night-mode="on"]) body.home-page .personal-footer {
  gap:10px;padding-top:22px;
 }
 html.has-night-entry:not([data-night-mode="on"]) body.home-page .personal-footer {
  padding-bottom:calc(32px + env(safe-area-inset-bottom) + var(--phone-player-space,0px));
 }
 html:not([data-night-mode="on"]) body.home-page .personal-footer>.build-meta,
 html:not([data-night-mode="on"]) body.home-page .personal-footer>.view-counter {
  margin-top:-4px;
 }
}

/* Mobile proportion follow-up from the 2026-10-23 dictation. */
/* Phone proportions: the orbit decorates the title without setting its line height. */
@media (max-width:760px) {
 html:not([data-night-mode="on"]) body.home-page #top {
  --phone-hero-font:clamp(29px,8.7vw,46px);
  --phone-orbit:clamp(76px,20.6vw,96px);
  --phone-hero-top:18px;
  --phone-greeting-height:16px;
  --phone-title-gap:14px;
  position:relative;display:block;
  padding:var(--phone-hero-top) 0 24px;
 }
 html:not([data-night-mode="on"]) body.home-page #top .hero-signature {
  display:flex;min-height:var(--phone-greeting-height);
  margin:0;padding:0;font-size:10px;line-height:1.6;
 }
 html:not([data-night-mode="on"]) body.home-page #top h1 {
  display:block;width:100%;max-width:100%;min-height:0;
  margin:var(--phone-title-gap) 0 14px;height:auto!important;
  font:400 var(--phone-hero-font)/1.06 var(--phone-sans,Arial,sans-serif);
  letter-spacing:-.055em;text-wrap:initial;
 }
 html:not([data-night-mode="on"]) body.home-page #top h1>span:first-child {
  display:block;width:calc(100% - var(--phone-orbit) - 18px);
  min-height:0;max-width:none;height:auto!important;
 }
 html:not([data-night-mode="on"]) body.home-page #top h1>br {display:none;}
 html:not([data-night-mode="on"]) body.home-page #top h1 em {
  display:block;margin:6px 0 0;width:100%;max-width:100%;
  min-height:0;height:auto!important;
  font-size:calc(1em + 2px);line-height:1.06;letter-spacing:-.055em;
  text-wrap:initial;
 }
 /* The ring ends with the first title line; it can grow upwards, never into the second line. */
 html:not([data-night-mode="on"]) body.home-page #top #orbit {
  position:absolute;inset:auto;
  top:calc(var(--phone-hero-top) + var(--phone-greeting-height) + var(--phone-title-gap) + var(--phone-hero-font) * 1.06 - var(--phone-orbit));
  right:8px;left:auto;
  width:var(--phone-orbit);height:var(--phone-orbit);
  margin:0;transform:none;opacity:1;
 }
 html:not([data-night-mode="on"]) body.home-page #top #orbit .orbit-ring::before {
  inset:18% -7%;
 }
 html:not([data-night-mode="on"]) body.home-page #top #orbit .orbit-particle {
  --particle-radius:calc(var(--phone-orbit) * .45);
 }
 html:not([data-night-mode="on"]) body.home-page #top #orbit .orbit-particle-slow {
  --particle-radius:calc(var(--phone-orbit) * .35);
 }
 /* Smaller painted coins keep their existing 44 x 44 touch and keyboard targets. */
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) .topbar :is(.language-toggle,.theme-toggle) {
  position:relative;isolation:isolate;
  width:44px;min-width:44px;height:44px;
  padding:0;border:0;background:transparent;box-shadow:none;
 }
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) .topbar :is(.language-toggle,.theme-toggle)::before {
  content:"";position:absolute;inset:5px;z-index:-1;
  box-sizing:border-box;border:1px solid color-mix(in srgb,var(--text) 22%,transparent);
  border-radius:50%;background:color-mix(in srgb,var(--text) 2%,transparent);
  pointer-events:none;transition:border-color .25s ease,background .25s ease;
 }
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) .topbar :is(.language-toggle,.theme-toggle):is(:hover,:focus-visible,[aria-busy="true"])::before {
  border-color:var(--accent);background:hsl(var(--palette-hue) 65% 70% / .06);
 }
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) .topbar .theme-toggle {font-size:15px;}
}
/* End phone hero proportions. */

/* Mobile follow-up: keep the wall type small and fit each card to its content. */
@media (max-width:760px) {
 html:not([data-night-mode="on"]) body.home-page #wall .wall-feed>.wall-post {
  min-height:0;margin-bottom:12px;
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-feed>.wall-post:last-child {
  margin-bottom:0;
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-feed>:is(.wall-post-guest,.wall-post-owner,.wall-post-author,.wall-archive) {
  padding:10px 12px!important;
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-post-head {
  gap:6px 12px;margin-bottom:5px;
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-post-text {
  margin-bottom:4px;
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-post-actions {
  gap:16px;min-height:28px;margin-top:4px;padding-top:0;
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-post-actions>button {
  position:relative;min-width:44px;min-height:28px;padding:0;
 }
 /* The link's painted row is quiet; its transparent hit region stays 44px tall. */
 html:not([data-night-mode="on"]) body.home-page #wall .wall-post-actions>button::after {
  content:"";position:absolute;inset:-8px 0;pointer-events:auto;
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-owner-reply {
  margin-top:10px;padding:9px 11px;
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-owner-reply>.wall-post-text {
  margin-bottom:0;
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-owner-reply>.wall-post-actions {
  margin-top:8px;
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-owner-reply::before {
  top:-10px;height:26px;
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-pages {
  margin-top:4px;gap:4px;
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-page-form {
  gap:2px;
 }
 /* The painted field is compact; inverse sizing keeps the transformed native hitbox 44px. */
 html:not([data-night-mode="on"]) body.home-page #wall .wall-page-form::before {
  content:"";position:absolute;left:8px;top:9px;width:28px;height:26px;
  box-sizing:border-box;border:1px solid var(--line);border-radius:5px;
  background:var(--surface);pointer-events:none;
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-page-form input {
  position:relative;flex:0 0 58.6667px;
  width:58.6667px;min-width:58.6667px;max-width:none;
  height:58.6667px;min-height:58.6667px;margin:-7.33335px;padding:0;
  border:0;background:transparent;border-radius:0;box-shadow:none;
  font:16px/1.2 var(--phone-mono,Consolas,monospace);
  transform:scale(.75);transform-origin:center;touch-action:manipulation;
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-page-form input:focus-visible {
  outline:1.3333px solid var(--accent);outline-offset:-10.6667px;border-radius:8px;
 }
}

/* Mobile follow-up: compact painted controls with unchanged native touch targets. */
@media (max-width:760px) {
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) .personal-footer {
  gap:7px;padding-top:18px;
 }
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) .personal-footer .social-links {
  gap:8px;margin-bottom:0;
 }
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) .personal-footer .social-links a {
  position:relative;isolation:isolate;box-sizing:border-box;
  min-height:44px;padding:0 10px;gap:6px;border:0;border-radius:6px;
  background:transparent;box-shadow:none;
  font:11px/1.5 var(--phone-mono,Consolas,monospace);
 }
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) .personal-footer .social-links a::before {
  content:"";position:absolute;inset:7px 0;z-index:-1;
  border:1px solid var(--line);border-radius:6px;background:var(--surface);
  pointer-events:none;
  transition:border-color .25s,box-shadow .35s;
 }
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) .personal-footer .social-links a:is(:hover,:focus-visible)::before {
  border-color:var(--accent);box-shadow:0 3px 12px #a69bf910;
 }
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) .personal-footer .social-links svg {
  width:13px;height:13px;
 }
 html.has-night-entry:not([data-night-mode="on"]) body.home-page .personal-footer {
  padding-bottom:calc(24px + env(safe-area-inset-bottom) + var(--phone-player-space,0px));
 }
 html.has-night-entry:not([data-night-mode="on"]) body.home-page .personal-footer>.night-escape-counter {
  box-sizing:border-box;width:100%;min-height:0;margin:-4px 0 0;padding:0;
  font-size:10px;line-height:1.6;white-space:nowrap;
 }
 /* The portal is absolute: keep its 44px target in the gutter, outside the counter flow. */
 html:not([data-night-mode="on"]) body.home-page .night-entry[data-blood-eye] {
  right:max(12px,env(safe-area-inset-right));
 }
 /* Count reels use the number's own box, not the taller footer row's line box. */
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) .personal-footer :is([data-view-count],[data-escape-count]) {
  display:inline-block;line-height:1;vertical-align:baseline;
 }
 /* Compact arrows land on the visible ring without reserving a taller counter row. */
 html:not([data-night-mode="on"]) body.home-page .night-entry[data-blood-eye] #night-switch .be-arrows {
  right:30.5px;bottom:10px;width:36px;height:37.3px;
 }
}
@media (max-width:760px) and (prefers-reduced-motion:reduce) {
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) .personal-footer .social-links a::before {
  transition:none;
 }
}

/* End mobile proportion follow-up. */

/* Touch audit: quiet painted controls keep comfortable, separated tap regions. */
@media (max-width:760px) and (pointer:coarse) {
 html:not([data-night-mode="on"]) body.portfolio-page .portfolio-contact a {
  position:relative;min-width:44px;touch-action:manipulation;
 }
 html:not([data-night-mode="on"]) body.portfolio-page .portfolio-contact a::before {
  content:"";position:absolute;inset:-10px 0;min-height:44px;pointer-events:auto;
 }
 html:not([data-night-mode="on"]) body.home-page .personal-notes dd {row-gap:8px;}
 html:not([data-night-mode="on"]) body.home-page .personal-notes button.interest-chip {
  position:relative;touch-action:manipulation;
 }
 html:not([data-night-mode="on"]) body.home-page .personal-notes button.interest-chip::after {
  content:"";display:block;position:absolute;inset:-4px 0;width:auto;height:auto;
  border:0;border-radius:0;background:none;box-shadow:none;filter:none;
  opacity:1;transform:none;transition:none;pointer-events:auto;
 }
 html:not([data-night-mode="on"]) body.home-page .owner-note-history-toggle {
  position:relative;touch-action:manipulation;
 }
 html:not([data-night-mode="on"]) body.home-page .owner-note-history-toggle::after {
  content:"";position:absolute;inset:-6px 0;pointer-events:auto;
 }
}
/* End touch audit. */

/* Mobile proportions v2: 2026-10-23 screenshot follow-up. */
/* Phone visual balance: keep the orbit below the divider and language as a pill. */
@media (max-width:760px) {
 html:not([data-night-mode="on"]) body.home-page #top #orbit {
  top:calc(var(--phone-hero-top) + var(--phone-greeting-height) + var(--phone-title-gap) + var(--phone-hero-font) * 1.06 - var(--phone-orbit) + 10px);
 }
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) .topbar .language-toggle::before {
  inset:6px 2px;border-radius:999px;
 }
}

/* Phone cover proportions: the artwork owns its own area, without a full-card veil. */
@media (max-width:540px) {
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) details.work-scene.wb-card:is(#home-high,#high,#home-mechabellum,#mechabellum,#home-payday3,#payday3,#home-phasmophobia,#phasmophobia) {
  align-self:start;
 }
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) details.work-scene.wb-card:is(#home-high,#high,#home-mechabellum,#mechabellum,#home-payday3,#payday3,#home-phasmophobia,#phasmophobia)>summary {
  --mobile-cover-height:clamp(132px,40vw,176px);
  min-height:0!important;height:auto!important;
  background:#070a0d!important;
 }
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) details.work-scene.wb-card:is(#home-high,#high)>summary {
  --mobile-cover-height:clamp(156px,47vw,210px);
 }
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) details.work-scene.wb-card:is(#home-high,#high,#home-mechabellum,#mechabellum,#home-payday3,#payday3,#home-phasmophobia,#phasmophobia)>summary>:not(.project-card-backdrop) {
  order:2;
 }
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) details.work-scene.wb-card:is(#home-high,#high,#home-mechabellum,#mechabellum,#home-payday3,#payday3,#home-phasmophobia,#phasmophobia)>summary>:is(.project-teaser-kicker,.portfolio-card-top) {
  order:0;margin:0!important;
 }
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) details.work-scene.wb-card:is(#home-high,#high,#home-mechabellum,#mechabellum,#home-payday3,#payday3,#home-phasmophobia,#phasmophobia)>summary :is(.card-description,.project-tags) {
  order:2;
 }
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) details.work-scene.wb-card:is(#home-high,#high,#home-mechabellum,#mechabellum,#home-payday3,#payday3,#home-phasmophobia,#phasmophobia)>summary .project-card-backdrop {
  position:relative!important;inset:auto!important;order:1;flex:0 0 auto;
  align-self:stretch;width:calc(100% + 32px);height:var(--mobile-cover-height);
  margin:7px -16px 12px;border-radius:0;overflow:hidden;z-index:0;
 }
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) details.work-scene.wb-card:is(#home-high,#high,#home-mechabellum,#mechabellum,#home-payday3,#payday3,#home-phasmophobia,#phasmophobia)>summary .project-card-backdrop img {
  top:0!important;bottom:0!important;left:0!important;right:auto!important;
  width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:50% 50%!important;
  transform:none!important;translate:none!important;scale:none!important;
  mask-image:none!important;-webkit-mask-image:none!important;
  filter:none!important;opacity:.98!important;will-change:auto;
 }
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) details.work-scene.wb-card:is(#home-high,#high)>summary .project-card-backdrop img {
  left:-16%!important;width:132%!important;object-position:50% 58%!important;
 }
 /* Russian High uses a direct app screenshot, without the promotional frame. */
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) details.work-scene.wb-card:is(#home-high,#high)>summary .project-card-backdrop img[src*="/media/high/ru/"] {
  left:0!important;width:100%!important;object-position:50% 50%!important;
 }
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) details.work-scene.wb-card:is(#home-mechabellum,#mechabellum)>summary .project-card-backdrop img {
  object-position:50% 28%!important;
 }
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) details.work-scene.wb-card:is(#home-high,#high,#home-mechabellum,#mechabellum,#home-payday3,#payday3,#home-phasmophobia,#phasmophobia)>summary .project-card-backdrop::after {
  background:linear-gradient(180deg,transparent 0%,transparent calc(100% - 14px),#070a0d 100%)!important;
 }
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) details.work-scene.wb-card:is(#home-high,#high,#home-mechabellum,#mechabellum,#home-payday3,#payday3,#home-phasmophobia,#phasmophobia)>summary .project-tags {
  margin-top:13px!important;padding-top:0!important;
 }
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) details.work-scene.wb-card:is(#home-high,#high,#home-mechabellum,#mechabellum,#home-payday3,#payday3,#home-phasmophobia,#phasmophobia)>summary :is(.card-description,.wb-card-description,.work-card-description,.portfolio-tagline) {
  min-height:0!important;height:auto!important;
 }
}

/* Phone footer proportions: smaller paint, unchanged 44px native tap regions. */
@media (max-width:760px) {
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) .personal-footer .domain-switcher:not(.night-escape-active) {
  column-gap:8px;row-gap:2px;
 }
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) .personal-footer .domain-switcher:not(.night-escape-active) .domain-link {
  position:relative;isolation:isolate;box-sizing:border-box;
  min-height:44px;padding:0 8px;gap:6px;
  border:0;background:transparent;box-shadow:none;
  font:11px/1.5 var(--phone-mono,Consolas,monospace);
  white-space:nowrap;touch-action:manipulation;
 }
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) .personal-footer .domain-switcher:not(.night-escape-active) .domain-link::before {
  content:"";position:absolute;inset:7px 0;z-index:-1;box-sizing:border-box;
  border:1px solid var(--line);border-radius:999px;
  background:transparent;pointer-events:none;transition:inherit;
 }
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) .personal-footer .domain-switcher:not(.night-escape-active) .domain-link.is-current::before {
  border-color:color-mix(in srgb,var(--accent) 58%,var(--line));
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  box-shadow:0 0 16px color-mix(in srgb,var(--accent) 12%,transparent);
 }
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) .personal-footer .domain-switcher:not(.night-escape-active) .domain-link:is(:hover,:focus-visible)::before {
  border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);
 }
 html:not([data-night-mode="on"]) body:is(.home-page,.portfolio-page) .personal-footer .domain-switcher:not(.night-escape-active) .domain-link-role {
  padding-left:6px;font-size:10px;
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-page-form {
  gap:6px;
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-page-total {
  white-space:nowrap;
 }
 html:not([data-night-mode="on"]) body.home-page #wall .wall-page-form button {
  min-width:44px;margin-inline-start:2px;padding-inline:2px;
 }
}

/* End mobile proportions v2. */