/* v1.1.19 — phone/tablet layout contract.
   This file is intentionally loaded last on Home and Policy so compact devices
   keep the desktop design language without clipped dialogs or awkward navigation. */

@media (max-width: 760px){
  /* HOME */
  body.homePage{
    min-width:0;
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
  body.homePage .stage{
    width:calc(100vw - 16px);
    max-width:100%;
  }
  body.homePage .semantic,
  body.homePage .searchShell,
  body.homePage .inputWrap{min-width:0}
  body.homePage .semanticGreeting{margin-bottom:9px}
  body.homePage .semanticGreetingLine{font-size:clamp(17px,5vw,20px)}

  /* Every content banner remains fully inside the visual viewport and scrolls
     internally. Safe-area padding prevents iOS browser chrome/notches from
     covering the card edges. */
  body.homePage .infoLayer{
    padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    overflow:hidden;
    align-items:center;
  }
  body.homePage .infoCard,
  body.homePage .infoCard.profileMode,
  body.homePage .infoCard.contactMode,
  body.homePage .infoCard.professionalMode,
  body.homePage .infoCard.visionMode{
    width:100%!important;
    max-width:none!important;
    max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)))!important;
    min-height:0;
    padding:18px 16px 20px!important;
    border-radius:22px;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  body.homePage .infoTitle,
  body.homePage .profileTitle,
  body.homePage .contactTitle,
  body.homePage .professionalTitle,
  body.homePage .visionTitle{
    font-size:clamp(34px,10.5vw,48px);
    line-height:.98;
    overflow-wrap:anywhere;
  }
  body.homePage .professionalHeader{gap:10px;margin-bottom:16px}
  body.homePage .professionalIntro{max-width:none;text-align:left}
  body.homePage .profileView{grid-template-columns:1fr;gap:18px}
  body.homePage .profilePhoto{
    min-height:0;
    height:auto;
    aspect-ratio:4/3;
    max-height:38dvh;
  }
  body.homePage .profileCopy{justify-content:flex-start}
  body.homePage .profileBody{font-size:14px;line-height:1.58}
  body.homePage .profileBody .profileLead{font-size:16px}
  body.homePage .skillsGrid{grid-template-columns:1fr;gap:9px}
  body.homePage .skillCard{min-height:96px;padding:14px;gap:13px}
  body.homePage .skillInsight{padding:15px 14px;border-radius:17px}
  body.homePage .skillInsightHead{gap:10px}
  body.homePage .skillInsightTitle{font-size:17px}
  body.homePage .skillSourceRow{align-items:stretch;gap:8px}
  body.homePage .skillSourceRow .semanticLinkButton,
  body.homePage .skillSourceRow .certificateEvidenceLink,
  body.homePage .insubriaSource{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    max-width:100%;
    white-space:normal;
    text-align:center;
  }
  body.homePage .experienceList{gap:9px}
  body.homePage .experienceCard{padding:15px 14px;border-radius:18px}
  body.homePage .experienceTop{grid-template-columns:1fr;gap:6px}
  body.homePage .experienceSkills{gap:7px}
  body.homePage .expSkillTag{min-height:36px;padding:7px 10px}
  body.homePage .visionView{gap:17px}
  body.homePage .visionStatement{font-size:clamp(23px,7.2vw,32px)}
  body.homePage .visionBody{font-size:12.5px}
  body.homePage textarea.contactField{min-height:132px;max-height:42dvh}
  body.homePage input.contactField{min-height:48px}
  body.homePage .privateNotice{padding:12px 13px;border-radius:16px}
  body.homePage .contactActions{gap:9px}
  body.homePage .contactSend{min-height:46px}

  /* Semantic interpretation should never push the main bar outside a phone
     viewport. It becomes full-width relative to the home stage. */
  body.homePage .semanticInterpretation{width:100%;padding:13px 14px}
  body.homePage .semanticInterpretationLine{min-height:42px}
  body.homePage .semantic.semantic-processing .semanticInterpretationSlot{max-height:300px}

  /* Narrative becomes a compact, scrollable mobile document. */
  body.homePage .synopticLayer{
    padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    align-items:center;
  }
  body.homePage .synopticCard{
    width:100%;
    max-width:none;
    max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)));
    border-radius:23px;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  body.homePage .synopticInner{padding:16px 14px 18px}
  body.homePage .synopticHeader{grid-template-columns:48px minmax(0,1fr) 36px;gap:11px}
  body.homePage .synopticInfinity{width:46px;height:46px}
  body.homePage .synopticHeader h2{font-size:20px;white-space:normal;overflow-wrap:anywhere}
  body.homePage .synopticHeader p{display:block;font-size:11px}
  body.homePage .synopticClose{width:34px;height:34px;align-self:start}
  body.homePage .synopticPassport{grid-template-columns:1fr;gap:14px;margin-top:15px}
  body.homePage .synopticRail{
    position:sticky;
    top:-1px;
    z-index:8;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.09);
    padding:8px 8px 9px;
    margin:0 -8px;
    flex-direction:row;
    gap:2px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    background:rgba(18,27,23,.88);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 8px 18px rgba(0,0,0,.05);
  }
  html.theme-light body.homePage .synopticRail{
    background:rgba(248,250,247,.90);
    border-bottom-color:rgba(29,50,40,.10);
    box-shadow:0 8px 18px rgba(38,60,49,.05);
  }
  body.homePage .synopticRail::-webkit-scrollbar{display:none}
  body.homePage .synopticRailItem{flex:0 0 auto;white-space:nowrap;padding:8px 9px;scroll-snap-align:start}
  body.homePage .synopticStory{min-width:0}
  body.homePage .synopticChapter{padding-bottom:13px;margin-bottom:13px}
  body.homePage .synopticChapter.synopticSectionActive{margin-left:0;margin-right:0;padding-left:0;padding-right:0}
  body.homePage .synopticPills{gap:6px}
  body.homePage .synopticPills button{min-height:38px;padding:7px 10px}
  body.homePage .synopticTimeline{grid-template-columns:auto minmax(14px,1fr) auto minmax(14px,1fr) auto minmax(14px,1fr) auto;gap:5px;font-size:8px}
  body.homePage .synopticContact{min-height:54px;padding:12px}

  /* Cookie becomes a full-height mobile sheet rather than a narrow desktop rail. */
  body.homePage .cookieDrawer{
    width:100vw;
    max-width:100vw;
    height:100dvh;
    border-left:0;
  }
  body.homePage .cookieDrawerInner{
    padding:max(20px,env(safe-area-inset-top)) max(17px,env(safe-area-inset-right)) 16px max(17px,env(safe-area-inset-left));
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  body.homePage .cookieFooter{padding-left:max(17px,env(safe-area-inset-left));padding-right:max(17px,env(safe-area-inset-right))}

  /* Compact utilities stay centred and clear of phone edges. */
  body.homePage .utilityStack:not(.compact){
    left:50%;right:auto;top:auto;
    bottom:max(12px,env(safe-area-inset-bottom));
    transform:translateX(-50%);
    justify-content:center;
    align-items:center;
    max-width:calc(100vw - 20px);
  }

  /* POLICY */
  body.legalPage .topbar{
    padding:max(12px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 12px max(14px,env(safe-area-inset-left));
  }
  body.legalPage .layout{
    width:calc(100vw - 24px);
    padding:20px 0 max(44px,env(safe-area-inset-bottom));
    gap:20px;
  }
  body.legalPage .side{min-width:0}
  body.legalPage .nav{
    display:flex;
    overflow-x:auto;
    overflow-y:hidden;
    gap:6px;
    padding:0 0 7px;
    margin-top:14px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  body.legalPage .nav::-webkit-scrollbar{display:none}
  body.legalPage .nav a{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;padding:10px 11px}
  body.legalPage .sideNote{margin-top:10px}
  body.legalPage .hero{margin-bottom:19px}
  body.legalPage .hero h1{font-size:clamp(44px,15vw,66px);overflow-wrap:anywhere}
  body.legalPage .hero p{font-size:14px}
  body.legalPage .doc{scroll-margin-top:76px;margin-top:13px;padding:20px 16px;border-radius:21px}
  body.legalPage .docHead{gap:10px;margin-bottom:18px;flex-wrap:wrap}
  body.legalPage .doc h2{font-size:clamp(30px,10vw,42px);overflow-wrap:anywhere}
  body.legalPage .doc p,
  body.legalPage .doc li{font-size:12.5px;overflow-wrap:anywhere}
  body.legalPage footer{width:calc(100vw - 24px)}
  body.legalPage .cookieDrawer{width:100vw;max-width:100vw;height:100dvh;border-left:0}
}

@media (max-width: 430px){
  body.homePage .stage{width:calc(100vw - 12px)}
  body.homePage .infoLayer,
  body.homePage .synopticLayer{padding:6px}
  body.homePage .infoCard,
  body.homePage .infoCard.profileMode,
  body.homePage .infoCard.contactMode,
  body.homePage .infoCard.professionalMode,
  body.homePage .infoCard.visionMode{max-height:calc(100dvh - 12px)!important;border-radius:19px;padding:16px 13px 18px!important}
  body.homePage .profilePhoto{max-height:34dvh}
  body.homePage .synopticCard{max-height:calc(100dvh - 12px);border-radius:20px}
  body.homePage .synopticInner{padding:14px 12px 16px}
  body.homePage .synopticHeader{grid-template-columns:44px minmax(0,1fr) 34px;gap:9px}
  body.homePage .synopticInfinity{width:42px;height:42px}
  body.homePage .synopticHeader h2{font-size:18px}
  body.homePage .synopticPersonalMeta{font-size:9.5px!important;white-space:normal}
  body.homePage .languageToast.semanticFeedback{max-width:calc(100vw - 20px)}
  body.legalPage .layout,body.legalPage footer{width:calc(100vw - 18px)}
  body.legalPage .doc{padding:18px 14px}
}

@media (max-width: 900px) and (max-height: 560px){
  body.homePage .infoLayer,body.homePage .synopticLayer{padding:6px}
  body.homePage .infoCard,body.homePage .synopticCard{max-height:calc(100dvh - 12px)!important}
  body.homePage .profileView{grid-template-columns:minmax(150px,32vw) minmax(0,1fr)}
  body.homePage .profilePhoto{aspect-ratio:auto;min-height:240px;max-height:none}
}


/* v1.1.23 — floating mobile banner refinement.
   On phones the informational dialogs deliberately stop short of the viewport
   edges so the backdrop remains an obvious, easy tap target for dismissal.
   Content stays fully readable through internal scrolling. */
@media (max-width: 760px){
  body.homePage .infoLayer{
    padding:max(42px,calc(env(safe-area-inset-top) + 22px)) max(14px,env(safe-area-inset-right)) max(42px,calc(env(safe-area-inset-bottom) + 22px)) max(14px,env(safe-area-inset-left));
    place-items:center;
    touch-action:manipulation;
  }

  body.homePage .infoCard,
  body.homePage .infoCard.profileMode,
  body.homePage .infoCard.contactMode,
  body.homePage .infoCard.professionalMode,
  body.homePage .infoCard.visionMode{
    width:min(92vw,620px)!important;
    max-width:620px!important;
    max-height:min(80dvh,720px)!important;
    margin:auto;
    border-radius:24px;
    box-shadow:0 24px 72px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.05);
  }

  /* Make the free backdrop visually intentional rather than accidental. */
  body.homePage .infoLayer.show{
    background:rgba(5,9,8,.56);
  }
  html.theme-light body.homePage .infoLayer.show{
    background:rgba(238,243,239,.58);
  }
}

@media (max-width: 430px){
  body.homePage .infoLayer{
    padding:max(46px,calc(env(safe-area-inset-top) + 24px)) max(15px,env(safe-area-inset-right)) max(46px,calc(env(safe-area-inset-bottom) + 24px)) max(15px,env(safe-area-inset-left));
  }
  body.homePage .infoCard,
  body.homePage .infoCard.profileMode,
  body.homePage .infoCard.contactMode,
  body.homePage .infoCard.professionalMode,
  body.homePage .infoCard.visionMode{
    width:calc(100vw - 30px)!important;
    max-width:calc(100vw - 30px)!important;
    max-height:78dvh!important;
    border-radius:21px;
  }
}

/* Very short landscape screens are the exception: recover vertical room while
   retaining a visible dismissal gutter. */
@media (max-width: 900px) and (max-height: 560px){
  body.homePage .infoLayer{
    padding:14px max(12px,env(safe-area-inset-right)) 14px max(12px,env(safe-area-inset-left));
  }
  body.homePage .infoCard,
  body.homePage .infoCard.profileMode,
  body.homePage .infoCard.contactMode,
  body.homePage .infoCard.professionalMode,
  body.homePage .infoCard.visionMode{
    width:min(92vw,760px)!important;
    max-width:760px!important;
    max-height:calc(100dvh - 28px)!important;
  }
}


/* v1.1.24 — mobile context refinements.
   Keep portrait media visible, leave a real dismissal gutter around Narrative,
   adapt the semantic bar to the iOS software keyboard, and keep Policy
   navigation reachable while the document scrolls. */
@media (max-width: 760px){
  /* Safari/iOS auto-zooms focused inputs smaller than 16px. */
  body.homePage #q{
    font-size:16px!important;
    line-height:1.2;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }

  /* Explicit media height prevents the absolutely-positioned portrait from
     collapsing in compact WebKit layouts. */
  body.homePage .profilePhoto{
    display:block!important;
    width:100%!important;
    height:clamp(190px,28dvh,255px)!important;
    min-height:190px!important;
    max-height:255px!important;
    aspect-ratio:auto!important;
    position:relative!important;
    flex:0 0 auto;
  }
  body.homePage .profilePhoto img{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:50% 20%!important;
  }

  /* Narrative is a floating document, not a full-screen sheet. */
  body.homePage .synopticLayer{
    padding:max(56px,calc(env(safe-area-inset-top) + 34px)) max(16px,env(safe-area-inset-right)) max(56px,calc(env(safe-area-inset-bottom) + 34px)) max(16px,env(safe-area-inset-left))!important;
    place-items:center;
    touch-action:manipulation;
  }
  body.homePage .synopticCard{
    width:min(calc(100vw - 32px),620px)!important;
    max-width:620px!important;
    max-height:min(72dvh,650px)!important;
    margin:auto;
    border-radius:22px;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  /* On mobile the Policy section chips remain sticky below the site header. */
  body.legalPage .side{display:contents!important}
  body.legalPage .side>.kicker{justify-self:start}
  body.legalPage .side>.nav{
    position:sticky;
    top:52px;
    z-index:19;
    width:100%;
    margin:0;
    padding:8px 6px 9px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:color-mix(in srgb,var(--bg) 91%,transparent);
    backdrop-filter:blur(18px) saturate(1.05);
    -webkit-backdrop-filter:blur(18px) saturate(1.05);
    box-shadow:0 8px 20px color-mix(in srgb,var(--bg) 72%,transparent);
  }
  body.legalPage .side>.sideNote{margin-top:0}
  body.legalPage .doc{scroll-margin-top:126px}
}

@media (max-width: 430px){
  body.homePage .profilePhoto{
    height:clamp(180px,26dvh,225px)!important;
    min-height:180px!important;
    max-height:225px!important;
  }
  body.homePage .synopticLayer{
    padding:max(62px,calc(env(safe-area-inset-top) + 38px)) max(17px,env(safe-area-inset-right)) max(62px,calc(env(safe-area-inset-bottom) + 38px)) max(17px,env(safe-area-inset-left))!important;
  }
  body.homePage .synopticCard{
    width:calc(100vw - 34px)!important;
    max-width:calc(100vw - 34px)!important;
    max-height:70dvh!important;
  }
}

/* visualViewport-driven keyboard state; variables are written by interaction.js */
@media (max-width: 760px){
  body.homePage.mobile-keyboard-open{
    --bar-h:50px;
    --circle:38px;
  }
  body.homePage.mobile-keyboard-open .stage{
    position:fixed;
    z-index:30;
    left:50%;
    top:calc(var(--mobile-vv-top,0px) + (var(--mobile-vv-height,100dvh) * .43));
    transform:translate(-50%,-50%);
    width:min(calc(var(--mobile-vv-width,100vw) - 24px),920px)!important;
    max-width:calc(var(--mobile-vv-width,100vw) - 24px)!important;
  }
  body.homePage.mobile-keyboard-open .semanticGreeting{min-height:24px;margin-bottom:7px}
  body.homePage.mobile-keyboard-open .semanticGreetingLine{font-size:16px}
  body.homePage.mobile-keyboard-open .search{
    grid-template-columns:46px minmax(0,1fr) 46px;
    padding-inline:5px;
  }
  body.homePage.mobile-keyboard-open .chipsViewport{margin-top:7px}
  body.homePage.mobile-keyboard-open .chip{min-height:34px;padding:7px 11px}
  body.homePage.mobile-keyboard-open .utilityStack{display:none!important}
}

@media (max-width: 900px) and (max-height: 560px){
  body.homePage .synopticLayer{
    padding:18px max(14px,env(safe-area-inset-right)) 18px max(14px,env(safe-area-inset-left))!important;
  }
  body.homePage .synopticCard{
    max-height:calc(100dvh - 36px)!important;
    width:min(calc(100vw - 28px),760px)!important;
  }
}

/* v1.1.24 — mobile usability refinement.
   Keep portraits visible, prevent iOS focus zoom, shrink Narrative into a true
   floating card, and keep Policy navigation available while reading. */
@media (max-width: 760px){
  /* iOS Safari zooms focused controls whose computed font size is below 16px. */
  body.homePage #q,
  body.homePage input.contactField,
  body.homePage textarea.contactField{
    font-size:16px!important;
  }

  /* The portrait must retain an explicit block height: the image itself is
     absolutely positioned and therefore cannot size its parent. */
  body.homePage .profilePhoto{
    display:block!important;
    width:100%!important;
    height:clamp(200px,28dvh,250px)!important;
    min-height:200px!important;
    max-height:250px!important;
    aspect-ratio:auto!important;
    flex:0 0 auto;
  }
  body.homePage .profilePhoto img{
    display:block!important;
    opacity:1!important;
    object-fit:cover;
    object-position:50% 18%;
  }

  /* Narrative is intentionally smaller than the other dialogs so the user
     always sees a generous dismissal gutter around it. */
  body.homePage .synopticLayer{
    padding:max(70px,calc(env(safe-area-inset-top) + 46px)) max(20px,env(safe-area-inset-right)) max(70px,calc(env(safe-area-inset-bottom) + 46px)) max(20px,env(safe-area-inset-left));
    place-items:center;
  }
  body.homePage .synopticCard{
    width:min(88vw,560px)!important;
    max-width:560px!important;
    max-height:72dvh!important;
    margin:auto;
    border-radius:22px;
  }

  /* Typing mode: prevent Safari's automatic zoom and remove non-essential
     controls while the software keyboard is open. */
  body.homePage:has(#q:focus) .stage{
    width:calc(100vw - 24px)!important;
  }
  body.homePage:has(#q:focus) .semanticGreeting{margin-bottom:7px}
  body.homePage:has(#q:focus) .semanticGreetingLine{font-size:18px!important}
  body.homePage:has(#q:focus) .chipsViewport,
  body.homePage:has(#q:focus) .utilityStack{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  /* Desktop legal navigation remains in the document, but the compact mobile
     dock stays sticky directly beneath the browser-facing top bar. */
  body.legalPage .side #legalNav{display:none!important}
  body.legalPage .mobileLegalNav{
    position:sticky;
    top:51px;
    z-index:19;
    display:flex;
    gap:6px;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    padding:8px 12px 9px;
    border-bottom:1px solid var(--line);
    background:color-mix(in srgb,var(--bg) 91%,transparent);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  body.legalPage .mobileLegalNav::-webkit-scrollbar{display:none}
  body.legalPage .mobileLegalNav a{
    flex:0 0 auto;
    white-space:nowrap;
    scroll-snap-align:center;
    text-decoration:none;
    padding:9px 11px;
    border:1px solid transparent;
    border-radius:13px;
    font-size:12px;
    color:var(--muted);
  }
  body.legalPage .mobileLegalNav a.active{
    color:var(--ink);
    border-color:var(--line);
    background:var(--soft);
  }
}

@media (max-width: 430px){
  body.homePage .synopticLayer{
    padding:max(78px,calc(env(safe-area-inset-top) + 52px)) 22px max(78px,calc(env(safe-area-inset-bottom) + 52px));
  }
  body.homePage .synopticCard{
    width:calc(100vw - 44px)!important;
    max-width:calc(100vw - 44px)!important;
    max-height:70dvh!important;
  }
  body.homePage .profilePhoto{
    height:210px!important;
    min-height:210px!important;
    max-height:210px!important;
  }
}

@media (min-width: 761px){
  body.legalPage .mobileLegalNav{display:none!important}
}


/* v1.1.25 — Policy mobile header is one continuous sticky surface.
   The Back control and section scroller travel together, so underlying
   document content can never show through between them. */
@media (max-width: 760px){
  body.legalPage .policyStickyHeader{
    position:sticky!important;
    top:0!important;
    z-index:24!important;
    width:100%;
    border-bottom:1px solid var(--line);
    background:color-mix(in srgb,var(--bg) 95%,transparent)!important;
    backdrop-filter:blur(18px) saturate(1.04);
    -webkit-backdrop-filter:blur(18px) saturate(1.04);
    box-shadow:0 8px 22px color-mix(in srgb,var(--bg) 68%,transparent);
  }
  body.legalPage .policyStickyHeader .topbar{
    position:relative!important;
    top:auto!important;
    z-index:auto!important;
    margin:0!important;
    border-bottom:0!important;
    background:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    box-shadow:none!important;
  }
  body.legalPage .policyStickyHeader .mobileLegalNav{
    position:relative!important;
    top:auto!important;
    z-index:auto!important;
    margin:0!important;
    border-top:1px solid var(--line)!important;
    border-bottom:0!important;
    background:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    box-shadow:none!important;
  }
  body.legalPage .doc{scroll-margin-top:132px!important}
}