/* Phase 99: bounded editorial, utility and experimental readers. */
.fj.phase99 #main{max-width:1100px;margin-inline:auto;padding-block:2rem 4rem;overflow-wrap:anywhere}
.fj.phase99 h1{font-size:clamp(2rem,4.8vw,3.5rem);line-height:1.12;margin:.4em 0 .65em;max-width:24ch}
.fj.phase99 h2{font-size:clamp(1.4rem,3vw,2rem);line-height:1.2;margin-top:1.8em}
.fj.phase99 h3{font-size:1.25rem;line-height:1.35}
.fj.phase99 p,.fj.phase99 li{line-height:1.75}
.fj.phase99 img{display:block;width:auto;max-width:100%;height:auto;object-fit:contain}
.fj.phase99 figure{margin:1.8rem 0;max-width:100%}
.fj.phase99 figcaption{font-size:.94rem;line-height:1.6;color:#52625e;margin-top:.65rem;max-width:72ch}
.fj.phase99 .fj99-path{display:flex;gap:1.5rem;flex-wrap:wrap;margin-bottom:2rem;font-size:.95rem}
.fj.phase99 .fj99-editorial{max-width:76ch;margin-inline:auto}
.fj.phase99 .fj99-editorial>article>p,.fj.phase99 .fj99-editorial>p{max-width:70ch}
.fj.phase99 .pair{display:flex;align-items:start;gap:1.2rem;flex-wrap:wrap;margin-block:1.6rem}
.fj.phase99 .pair>div{flex:1 1 230px;min-width:0;max-width:100%}
.fj.phase99 .fj99-editorial aside,.fj.phase99 .fj99-social,.fj.phase99 .fj99-record,.fj.phase99 .fj99-learning{border-top:1px solid #ccd2c9;margin-top:2rem;padding-top:1.2rem}
.fj.phase99 .fj99-social{padding:1rem;border:1px solid #ccd2c9;border-radius:.5rem;background:#eeebe3}
.fj.phase99 summary{font-weight:700;cursor:pointer;color:#345e58;padding:.4rem;min-height:44px}
.fj.phase99 .fj99-social[open] summary{margin-bottom:.8rem}
.fj.phase99 .fj99-sharing{border-top:1px solid #ccd2c9;margin-top:2rem;padding-top:1rem;font-size:.9rem;overflow-wrap:anywhere}
.fj.phase99 .fj99-original-nav{margin-top:1.8rem}
.fj.phase99 .fj99-directory{columns:2 260px;column-gap:2rem}
.fj.phase99 .fj99-original-mark{max-width:220px;margin-block:1rem}
.fj.phase99 .fj99-directory p{break-inside:avoid;border-bottom:1px solid #d7dbd3;padding-block:.5rem;margin:0}
.fj.phase99 .fj99-experimental-layout{max-width:900px;margin-inline:auto}
.fj.phase99 .fj99-experimental .thumb{display:inline-block;max-width:min(29%,150px);height:auto;margin:.25rem}
.fj.phase99 .fj99-experimental figure img{max-height:1100px}
.fj.phase99 table{width:100%;max-width:100%;border-collapse:collapse;table-layout:fixed;margin-block:1.2rem}
.fj.phase99 td,.fj.phase99 th{padding:.65rem;border:1px solid #ccd2c9;text-align:left;vertical-align:top;overflow-wrap:anywhere}
.fj.phase99 th{font-weight:700;background:#e9e8df}
.fj.phase99 .fj99-record table td:first-child{width:20%;min-width:2rem}
.fj.phase99 .fj99-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1.5rem;list-style:none;padding:0;margin:2rem 0}
.fj.phase99 .fj99-grid li{min-width:0;border-bottom:1px solid #ccd2c9;padding-bottom:.8rem}
.fj.phase99 .fj99-grid a{display:block;text-decoration:none}
.fj.phase99 .fj99-grid img{margin-inline:auto;max-height:240px}
.fj.phase99 .fj99-grid span{display:block;font-size:.85rem;line-height:1.5;padding-top:.65rem}
.fj.phase99 .fj99-grid a:hover span{text-decoration:underline}
.fj.phase99 .fj99-grid a{min-height:44px}
.fj.phase99 .embed-container{position:relative;aspect-ratio:16/9;width:100%;margin-block:1rem}
.fj.phase99 iframe{max-width:100%;border:0}
.fj.phase99 .embed-container iframe{position:absolute;inset:0;width:100%;height:100%}
.fj.phase99 form{max-width:650px}
.fj.phase99 form td{border:0;padding:.6rem .3rem}
.fj.phase99 label{font-weight:700}
.fj.phase99 input,.fj.phase99 textarea{font:inherit;max-width:100%;box-sizing:border-box;padding:.65rem;border:1px solid #71857c;background:#fffdf9;color:#202d30;border-radius:.25rem}
.fj.phase99 textarea{width:100%;min-height:8rem}
.fj.phase99 input[type=text]{width:100%}
.fj.phase99 button,.fj.phase99 input[type=submit],.fj.phase99 input[type=reset]{font:inherit;min-height:44px;padding:.6rem 1rem;border:1px solid #345e58;border-radius:.3rem;background:#345e58;color:#fff;cursor:pointer}
.fj.phase99 a:focus-visible,.fj.phase99 button:focus-visible,.fj.phase99 summary:focus-visible,.fj.phase99 input:focus-visible,.fj.phase99 textarea:focus-visible{outline:3px solid #b26632;outline-offset:4px}
.fj.phase99 .fj99-lesson{max-width:76ch;margin:auto}
.fj.phase99 .fj99-lesson .fj99-photo-pair{display:flex;gap:1.5rem;align-items:start;flex-wrap:wrap}
.fj.phase99 .fj99-photo-pair figure{flex:1 1 230px;min-width:0}
.fj.phase99 .fj99-source{font-size:.9rem;color:#52625e}
.fj.phase99 dialog{border:1px solid #71857c;border-radius:.5rem;background:#f5f2ec;color:#202d30;max-width:95vw;width:1000px;max-height:94vh;padding:1rem;overflow:auto}
.fj.phase99 dialog::backdrop{background:rgb(15 25 25 / .88)}
.fj.phase99 .fj99-viewer-controls{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.fj.phase99 dialog [data-viewer-image]{margin:auto;max-height:calc(82vh - 110px);max-width:100%;width:auto;height:auto}
.fj.phase99 dialog [data-viewer-position]{margin:.7rem 0}
@media(max-width:480px){.fj.phase99 #main{padding-top:1.4rem}.fj.phase99 .fj99-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.fj.phase99 td,.fj.phase99 th{padding:.4rem}.fj.phase99 .fj99-photo-pair{gap:.3rem}.fj.phase99 .fj99-editorial .pair{gap:.5rem}}
@media print{.fj.phase99 .fj99-path,.fj.phase99 .fj99-social,.fj.phase99 dialog,.fj.phase99 button{display:none!important}.fj.phase99 #main{max-width:none;padding:0}.fj.phase99 figure{break-inside:avoid}.fj.phase99 img{max-height:18cm}.fj.phase99 .fj99-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.fj.phase99 a{color:inherit}}
