/* V169 — mobile-only interaction layer. Desktop (>800px) is intentionally untouched. */
.mobile-radial-nav{display:none}

@media(max-width:800px){
  :root{--mobile-safe-top:env(safe-area-inset-top,0px);--mobile-safe-bottom:env(safe-area-inset-bottom,0px)}

  /* Keep the existing desktop header, but make its two utility controls compact enough
     to leave the exact top-centre position clear for the radial navigation handle. */
  .header{z-index:5600!important}
  .header-grid{grid-template-columns:minmax(0,1fr) auto!important;column-gap:8px!important}
  .header .nav{display:none!important}
  .brand,.brand-window{width:102px!important;min-width:102px!important;height:40px!important}
  .brand>img,.brand-window>img,.brand img{width:102px!important;max-width:102px!important;height:40px!important}
  .header-actions{gap:5px!important}
  .header-actions .language-button{width:58px!important;min-width:58px!important;height:36px!important;min-height:36px!important;padding:0 8px!important;border-radius:12px!important;font-size:11px!important}
  .header-actions .language-dot{display:none!important}
  .header-actions .nav-download-button{position:relative;width:48px!important;min-width:48px!important;height:36px!important;min-height:36px!important;padding:0 6px!important;gap:3px!important;border-radius:12px!important;font-size:10px!important}
  .header-actions .nav-download-button>span{display:none!important}
  .header-actions .nav-download-button::before{content:"CV";font-size:10px;font-weight:750;letter-spacing:.06em}
  .header-actions .nav-download-button>b{font-size:12px!important}

  /* Top-centre semicircular radial carousel navigation. */
  .mobile-radial-nav{display:block;position:fixed;inset:0;z-index:12000;pointer-events:none;font-family:Inter,Arial,Helvetica,sans-serif}
  .mobile-radial-scrim{position:absolute;inset:0;background:rgba(1,8,13,.12);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .32s ease,visibility 0s linear .34s}
  .mobile-radial-nav.is-open .mobile-radial-scrim{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
  .mobile-radial-panel{
    position:absolute;top:0;left:50%;width:min(96vw,500px);height:clamp(198px,53vw,245px);
    overflow:hidden;pointer-events:none;isolation:isolate;
    border:1px solid rgba(255,255,255,.14);border-top:0;
    border-radius:0 0 50% 50% / 0 0 100% 100%;
    background:
      radial-gradient(ellipse at 50% -5%,rgba(255,255,255,.11),transparent 43%),
      linear-gradient(180deg,rgba(5,18,27,.94),rgba(5,18,27,.80) 56%,rgba(4,14,22,.72));
    box-shadow:0 24px 55px rgba(0,0,0,.30),inset 0 -1px 0 rgba(255,255,255,.05);
    backdrop-filter:blur(24px) saturate(1.08);-webkit-backdrop-filter:blur(24px) saturate(1.08);
    transform:translate3d(-50%,-104%,0) scaleY(.58);transform-origin:50% 0;
    opacity:.15;visibility:hidden;
    transition:transform .50s cubic-bezier(.16,1,.3,1),opacity .30s ease,visibility 0s linear .52s;
  }
  .mobile-radial-nav.is-open .mobile-radial-panel{transform:translate3d(-50%,0,0) scaleY(1);opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
  .mobile-radial-nav.is-closing .mobile-radial-panel{transform:translate3d(-50%,-104%,0) scaleY(.56);opacity:.12}
  .mobile-radial-panel::before{content:"";position:absolute;left:7%;right:7%;bottom:7%;height:70%;border-bottom:1px solid rgba(255,255,255,.13);border-radius:0 0 50% 50% / 0 0 100% 100%;pointer-events:none}
  .mobile-radial-panel::after{content:"";position:absolute;left:50%;bottom:10%;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.72);box-shadow:0 0 18px rgba(255,255,255,.32);transform:translateX(-50%);pointer-events:none}
  .mobile-radial-track{position:absolute;inset:0;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
  .mobile-radial-track.is-dragging{cursor:grabbing}
  .mobile-radial-item{
    position:absolute;left:var(--x,50%);top:var(--y,50%);z-index:3;
    width:max-content;max-width:38vw;min-height:38px;margin:0;padding:7px 10px;
    border:0;background:transparent;color:rgba(255,255,255,var(--alpha,.55));
    font:600 clamp(10px,2.9vw,13px)/1.12 Inter,Arial,Helvetica,sans-serif;
    letter-spacing:.04em;text-align:center;white-space:normal;cursor:pointer;
    transform:translate(-50%,-50%) scale(var(--scale,.78));transform-origin:center;
    opacity:var(--opacity,.65);filter:blur(var(--blur,0px));
    transition:color .18s ease,text-shadow .18s ease,opacity .18s ease,filter .18s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-radial-nav.is-snapping .mobile-radial-item{transition:left .29s cubic-bezier(.16,1,.3,1),top .29s cubic-bezier(.16,1,.3,1),transform .29s cubic-bezier(.16,1,.3,1),color .18s ease,text-shadow .18s ease,opacity .18s ease,filter .18s ease}
  .mobile-radial-item.is-active{color:#fff;text-shadow:0 0 22px rgba(255,255,255,.27);font-size:clamp(13px,3.6vw,17px);font-weight:720;letter-spacing:.055em}
  .mobile-radial-item.is-active::after{content:"";position:absolute;left:22%;right:22%;bottom:1px;height:1px;background:rgba(255,255,255,.60);box-shadow:0 0 10px rgba(255,255,255,.18)}
  .mobile-radial-instruction{position:absolute;left:50%;top:26%;z-index:2;transform:translateX(-50%);color:rgba(255,255,255,.42);font-size:8.5px;letter-spacing:.18em;white-space:nowrap;text-transform:uppercase;pointer-events:none}
  .mobile-radial-trigger{
    position:absolute;top:0;left:50%;z-index:7;width:76px;height:37px;padding:3px 8px 5px;
    display:flex;align-items:center;justify-content:center;gap:6px;pointer-events:auto;
    border:1px solid rgba(255,255,255,.17);border-top:0;border-radius:0 0 18px 18px;
    background:rgba(5,18,27,.80);color:rgba(255,255,255,.90);
    box-shadow:0 7px 24px rgba(0,0,0,.20),inset 0 -1px 0 rgba(255,255,255,.04);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    transform:translateX(-50%);cursor:pointer;-webkit-tap-highlight-color:transparent;
    animation:mobileMenuBreathe 4.6s ease-in-out infinite;
  }
  .mobile-radial-trigger-label{font-size:8px;font-weight:730;letter-spacing:.15em;line-height:1}
  .mobile-radial-trigger-arrow{width:7px;height:7px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .34s cubic-bezier(.16,1,.3,1)}
  .mobile-radial-nav.is-open .mobile-radial-trigger{animation:none;background:rgba(5,18,27,.44)}
  .mobile-radial-nav.is-open .mobile-radial-trigger-arrow{transform:translateY(2px) rotate(225deg)}
  @keyframes mobileMenuBreathe{0%,72%,100%{transform:translateX(-50%) translateY(0);box-shadow:0 7px 24px rgba(0,0,0,.20)}82%{transform:translateX(-50%) translateY(2px);box-shadow:0 9px 28px rgba(0,0,0,.24),0 0 18px rgba(255,255,255,.035)}90%{transform:translateX(-50%) translateY(0)}}
  body.mobile-nav-open{overflow:hidden!important}

  /* WhatsApp stays reachable without covering long-form mobile content. */
  .whatsapp-float{width:50px!important;height:50px!important;min-width:50px!important;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center!important;right:14px!important;bottom:calc(14px + var(--mobile-safe-bottom))!important}
  .whatsapp-float>span:last-child{display:none!important}
  .whatsapp-float-icon{margin:0!important}

  /* Mobile reader: the viewport itself becomes the reader. No outer card/frame. */
  .html-reader-overlay{padding:0!important;background:#0f1720!important}
  .html-reader-shell{width:100vw!important;height:100svh!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#0f1720!important;grid-template-rows:1fr!important;overflow:hidden!important}
  .html-reader-toolbar{position:absolute!important;z-index:10!important;top:calc(10px + var(--mobile-safe-top));right:10px!important;left:auto!important;width:auto!important;min-height:0!important;padding:0!important;border:0!important;background:transparent!important;pointer-events:none!important}
  .html-reader-toolbar h1{display:none!important}
  .html-reader-close{width:40px!important;height:40px!important;pointer-events:auto!important;border:1px solid rgba(255,255,255,.18)!important;background:rgba(7,17,24,.34)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:25px!important;opacity:.62;transition:opacity .18s ease,background .18s ease!important}
  .html-reader-close:active{opacity:1;background:rgba(7,17,24,.68)!important}
  .html-reader-frame{position:absolute!important;inset:0!important;width:100vw!important;height:100svh!important;border:0!important;background:#0f1720!important}
  .html-reader-loading{inset:0!important;background:#0f1720!important;color:rgba(255,255,255,.72)!important}

  /* Work / Management: default mobile state keeps the sphere as the main visual.
     Selecting a word extracts its content into a full-screen layer while the sphere
     recedes behind it. */
  .management-field-grid{display:block!important;min-height:0!important}
  .management-sphere-panel{height:min(78svh,680px)!important;min-height:540px!important;border-right:0!important;border-bottom:0!important;transition:filter .48s ease,opacity .48s ease,transform .52s cubic-bezier(.16,1,.3,1)!important}
  .management-sphere-wrap{inset:112px 0 0!important}
  .management-sphere{width:min(88vw,430px)!important;height:min(88vw,430px)!important;max-width:none!important;max-height:none!important;transition:transform .56s cubic-bezier(.16,1,.3,1),opacity .48s ease,filter .48s ease!important}
  .management-sphere-word{font-size:clamp(10px,2.75vw,12px)!important;padding:5px 4px!important}
  .management-insight-panel{display:none!important}
  .management-field-stage.is-mobile-concept-open .management-sphere{transform:scale(.82)!important;opacity:.20!important;filter:blur(1.7px) saturate(.72)!important}
  .management-field-stage.is-mobile-concept-open .management-sphere-heading,.management-field-stage.is-mobile-concept-open .management-sphere-hint{opacity:.08!important;transition:opacity .28s ease!important}
  .management-field-stage.is-mobile-concept-open .management-sphere-wrap{pointer-events:none!important}
  body.management-mobile-focus{overflow:hidden!important}
  body.management-mobile-focus .mobile-radial-nav{opacity:0!important;pointer-events:none!important}
  body>.management-insight-panel.is-mobile-focus-layer{
    display:flex!important;position:fixed!important;inset:0!important;z-index:11500!important;
    width:100vw!important;height:100svh!important;min-height:0!important;padding:calc(66px + var(--mobile-safe-top)) 22px calc(28px + var(--mobile-safe-bottom))!important;
    overflow-y:auto!important;overscroll-behavior:contain!important;
    background:linear-gradient(180deg,rgba(4,14,22,.58),rgba(4,14,22,.77) 42%,rgba(4,14,22,.91) 100%)!important;
    backdrop-filter:blur(.7px);-webkit-backdrop-filter:blur(.7px);
    opacity:0;transform:translateY(18px);pointer-events:none;
    transition:opacity .36s ease,transform .48s cubic-bezier(.16,1,.3,1)!important;
  }
  body>.management-insight-panel.is-mobile-focus-layer.is-mobile-focus-visible{opacity:1;transform:translateY(0);pointer-events:auto}
  body>.management-insight-panel.is-mobile-focus-layer.is-mobile-focus-closing{opacity:0;transform:translateY(14px);pointer-events:none}
  .management-mobile-close{
    position:fixed;top:calc(12px + var(--mobile-safe-top));right:14px;z-index:2;width:42px;height:42px;
    display:grid;place-items:center;margin:0;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:50%;
    background:rgba(7,17,24,.30);color:#fff;font:300 28px/1 Arial,sans-serif;cursor:pointer;
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);-webkit-tap-highlight-color:transparent;
  }
  body>.management-insight-panel.is-mobile-focus-layer .management-insight-kicker{padding-right:52px}
  body>.management-insight-panel.is-mobile-focus-layer .management-concept-name{margin-top:18px;font-size:clamp(18px,5vw,24px);animation:mobileConceptExtract .52s cubic-bezier(.16,1,.3,1) both}
  body>.management-insight-panel.is-mobile-focus-layer .management-concept-title{min-height:0!important;font-size:clamp(30px,8vw,42px)!important;line-height:1.02!important}
  body>.management-insight-panel.is-mobile-focus-layer .management-position{font-size:clamp(16px,4.2vw,18px)!important;line-height:1.72!important}
  body>.management-insight-panel.is-mobile-focus-layer .management-signals{margin-top:28px!important;padding-top:18px!important}
  body>.management-insight-panel.is-mobile-focus-layer .management-signal-item{font-size:14px!important;line-height:1.58!important;padding:12px 0!important}
  body>.management-insight-panel.is-mobile-focus-layer .management-audio{margin-top:22px}
  @keyframes mobileConceptExtract{0%{opacity:0;transform:translateY(18vh) scale(1.08);letter-spacing:.16em}100%{opacity:1;transform:translateY(0) scale(1);letter-spacing:.08em}}
}

@media(max-width:420px){
  .brand,.brand-window{width:94px!important;min-width:94px!important}
  .brand>img,.brand-window>img,.brand img{width:94px!important;max-width:94px!important}
  .header-actions .language-button{width:52px!important;min-width:52px!important;padding:0 6px!important}
  .header-actions .nav-download-button{width:44px!important;min-width:44px!important}
  .mobile-radial-trigger{width:68px}
  .mobile-radial-panel{width:98vw}
  .management-field-hero{padding-left:20px!important;padding-right:20px!important}
  .management-field-hero h2{font-size:clamp(38px,11vw,46px)!important}
  .management-sphere-panel{min-height:520px!important}
  body>.management-insight-panel.is-mobile-focus-layer{padding-left:19px!important;padding-right:19px!important}
}

/* All Reading: mobile is intentionally a landscape experience. */
.library-orientation-guard{display:none}
body.html-reader-open .library-orientation-guard{display:none!important}
@media(max-width:900px) and (orientation:portrait){
  body:has(.library-orientation-guard){overflow:hidden!important}
  .reading-room{min-width:0!important;min-height:100svh!important;width:100vw!important;height:100svh!important;overflow:hidden!important;place-items:center!important}
  .reading-room .library-stage{width:94vw!important;min-width:0!important;max-width:94vw!important;opacity:.20!important;filter:blur(8px) brightness(.62)!important;transform:scale(.90)!important;pointer-events:none!important}
  .library-orientation-guard{
    position:fixed;inset:0;z-index:13000;display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:32px;text-align:center;color:#f3e8d6;background:radial-gradient(circle at 50% 45%,rgba(18,42,55,.54),rgba(3,9,14,.86) 66%);
    backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)
  }
  .library-orientation-phone{position:relative;width:42px;height:70px;margin-bottom:25px;border:1.5px solid rgba(243,232,214,.76);border-radius:9px;animation:libraryRotatePhone 2.5s cubic-bezier(.16,1,.3,1) infinite}
  .library-orientation-phone::after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;border-radius:50%;background:rgba(243,232,214,.68);transform:translateX(-50%)}
  .library-orientation-guard strong{font:400 clamp(28px,8vw,38px)/1.02 Georgia,"Times New Roman",serif;letter-spacing:-.02em}
  .library-orientation-guard span{max-width:290px;margin-top:12px;color:rgba(243,232,214,.62);font-size:11px;line-height:1.6;letter-spacing:.09em;text-transform:uppercase}
  @keyframes libraryRotatePhone{0%,22%{transform:rotate(0deg)}60%,86%{transform:rotate(90deg)}100%{transform:rotate(90deg)}}
}
@media(max-width:950px) and (orientation:landscape){
  body:has(.reading-room){overflow:hidden!important}
  .reading-room{width:100vw!important;height:100svh!important;min-width:0!important;min-height:0!important;overflow:hidden!important;place-items:center!important}
  .reading-room .library-stage{width:min(100vw,calc(100svh * 7088 / 3987))!important;min-width:0!important;max-width:none!important;height:auto!important}
  .book-detail-panel{display:none!important}
  .shelf-book{touch-action:manipulation}
  .library-back-hotspot{font-size:clamp(11px,2vw,16px)!important}
}

@media(prefers-reduced-motion:reduce){
  .mobile-radial-trigger{animation:none!important}
  .mobile-radial-panel,.mobile-radial-item,.management-sphere,.management-insight-panel{transition-duration:.01ms!important}
  .library-orientation-phone{animation:none!important;transform:rotate(90deg)!important}
}