#orin-study{--paper:#fcfbf8;--ink:#282925;--muted:#76776e;--line:#e6e5de;--tile:#f0efe9;color:var(--ink);background:var(--paper);font-family:Arial,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;color-scheme:light} #orin-study *{box-sizing:border-box}#orin-study button,#site-head button,#nav-panel button,#info-panel button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}#orin-study a,#site-head a,#nav-panel a,#info-panel a{color:inherit;text-decoration:none}#orin-study button:focus-visible,#orin-study a:focus-visible,#site-head button:focus-visible,#site-head a:focus-visible,#nav-panel button:focus-visible,#nav-panel a:focus-visible,#info-panel button:focus-visible,#journal .skip:focus-visible{outline:2px solid #ff7900;outline-offset:6px} #orin-study .hero{height:650px;position:relative;display:flex;flex-direction:column}#site-head{padding:34px 46px;display:flex;align-items:center;justify-content:space-between;gap:24px;font-family:Arial,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif}#site-head .brand{display:flex;gap:12px;align-items:center;flex-shrink:0}#site-head .mark{width:45px;height:45px}#site-head .brand-name{display:flex;flex-direction:column;gap:5px;font-size:16px;line-height:1.15;font-weight:400}#site-head .brand-name span:last-child{font-size:16px;letter-spacing:.02em}#site-head nav{display:flex;gap:25px;align-items:center;font-size:12px}#site-head .active{position:relative}#site-head .active:after{content:"";position:absolute;bottom:-10px;left:50%;width:3px;height:3px;border-radius:50%;background:#ff7900} /* 下内距 4svh 让居中内容整体上移 2svh，即视觉居中略高于几何中心。 padding 的百分比按宽度解析，所以这里必须用 svh 才能随视口高度等比。 */ #orin-study .motto-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 22px 4svh}#orin-study h1{font-family:"EB Garamond",Georgia,"Times New Roman",serif;font-weight:400;font-size:42px;line-height:1.15;letter-spacing:-.015em;font-kerning:normal;text-align:center;margin:0}#orin-study .down{position:absolute;bottom:36px;left:calc(50% - 22px);width:44px;display:flex;flex-direction:column;align-items:center;min-height:44px;justify-content:center;padding:5px}#orin-study .down .arrow{font-size:20px;line-height:1;color:var(--muted)} #orin-study .projects{padding:72px 70px 82px;border-top:1px solid var(--line)}#orin-study .section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:38px}#orin-study h2{font-size:22px;font-weight:400;margin:0}#orin-study .eyebrow{font-size:10px;letter-spacing:.16em;color:var(--muted);display:block;margin-bottom:12px}#orin-study .sample-note{font-size:11px;color:var(--muted)}#orin-study .project-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}#orin-study .preview{height:230px;background:var(--tile);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}#orin-study .caption{display:flex;align-items:center;justify-content:space-between;margin-top:23px;gap:10px}#orin-study h3{font-size:17px;font-weight:400;margin:0}#orin-study .status{font-size:10px;color:var(--muted)}#orin-study .desc{font-size:12px;line-height:1.9;color:var(--muted);margin:10px 0 0}#orin-study .timeline{width:78%;height:126px;position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}#orin-study .track{position:absolute;left:0;right:0;height:1px;background:var(--line)}#orin-study .track:nth-child(1){top:36px}#orin-study .track:nth-child(2){top:82px}#orin-study .event{position:absolute;height:7px;background:var(--muted);opacity:.45;border-radius:1px}#orin-study .event:nth-child(3){top:33px;left:14%;width:31%}#orin-study .event:nth-child(4){top:79px;left:39%;width:42%}#orin-study .cursor{position:absolute;left:58%;top:0;bottom:0;border-left:1px solid #ff7900}#orin-study .cursor:before{content:"";display:block;width:5px;height:5px;background:#ff7900;border-radius:50%;margin-left:-3px;margin-top:-3px}#orin-study .preview-label{position:absolute;bottom:15px;left:18px;font-size:9px;letter-spacing:.12em;color:var(--muted)}#orin-study .sculpture{width:100px;height:100px;border:1px solid var(--muted);border-radius:50%;position:relative;opacity:.7;margin-top:-36px}#orin-study .sculpture:before{content:"";position:absolute;width:60px;height:60px;border:1px solid #ff7900;border-radius:50%;left:19px;top:19px}#orin-study .sculpture:after{content:"";position:absolute;top:99px;height:48px;left:49px;border-left:1px solid var(--muted)}#orin-study .base{position:absolute;width:55px;height:16px;border:1px solid var(--muted);border-radius:50%;top:calc(50% + 72px);opacity:.7}#orin-study footer{margin:0 46px;padding:27px 0 30px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:10px;letter-spacing:.02em;color:var(--muted)} @media(max-width:650px){#site-head{padding:25px 23px;flex-wrap:wrap;gap:25px}#site-head nav{width:100%;gap:0;justify-content:flex-end;font-size:11px}#orin-study .hero{height:600px}#orin-study h1{font-size:32px}#orin-study .projects{padding:48px 24px}#orin-study .project-grid{grid-template-columns:1fr;gap:35px}#orin-study .section-head{align-items:flex-start;gap:12px}#orin-study .sample-note{max-width:100px;line-height:1.6;text-align:right}#orin-study footer{margin:0 24px;gap:18px;flex-wrap:wrap}} html{scroll-behavior:smooth}body{margin:0}body:has(dialog[open]){overflow:hidden}#orin-study{min-height:100svh}#orin-study .hero{height:100svh;min-height:360px}#site-head{padding:28px clamp(24px,4.5vw,80px);position:relative;z-index:1}#site-head .brand-name{font-size:18px;gap:6px}#site-head .brand-name span:last-child{font-size:18px}#site-head .mark{width:50px;height:50px}#site-head nav{font-size:14px;gap:30px}#site-head nav>button{padding:8px 0}#site-head nav a{padding:8px 0}#site-head nav a.active:after{bottom:-3px}#orin-study h1{font-size:clamp(42px,3.8966667vw,58.333333px)}#orin-study .projects{padding:90px max(6vw,24px) 110px}#orin-study .project-grid,#orin-study .section-head{max-width:1200px;margin-left:auto;margin-right:auto}#orin-study .preview{height:clamp(230px,25vw,350px)}#orin-study .desc{font-size:16px}#orin-study h3{font-size:21px}#orin-study h2{font-size:27px}#orin-study .status,#orin-study .sample-note,#orin-study .eyebrow,#orin-study .preview-label{font-size:12px}#orin-study footer{font-size:12px;width:min(1200px,calc(100% - 2 * max(6vw,24px)));margin:0 auto}dialog#info-panel,dialog#nav-panel{color:var(--ink);background:var(--paper);border:1px solid var(--line);width:min(520px,calc(100% - 40px));padding:44px;box-sizing:border-box;font-family:Arial,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif}dialog#info-panel::backdrop,dialog#nav-panel::backdrop{background:rgb(0 0 0 / .25)}dialog#info-panel h2{margin:0 0 25px}dialog#info-panel p{font-size:16px;line-height:1.9;color:var(--muted)}dialog#info-panel .close,dialog#nav-panel .close{float:right;margin:-20px -20px 0 0;min-width:44px;min-height:44px;font-size:24px}#orin-study .skip,#journal .skip{position:absolute;top:-100px;left:20px;z-index:3;background:var(--paper);padding:12px;color:inherit;text-decoration:none}#orin-study .skip:focus,#journal .skip:focus{top:10px}#orin-study a:hover,#orin-study nav button:hover,#site-head a:hover,#site-head nav button:hover,#nav-panel a:hover,#nav-panel nav button:hover{color:#b65300} @media(min-width:1600px){#site-head{padding-top:34px}#orin-study .project-grid{gap:50px}} @media(max-width:700px){#site-head{padding:24px;gap:25px}#site-head nav{width:100%;justify-content:flex-end;gap:12px;font-size:14px;flex-wrap:wrap}#orin-study .hero{min-height:560px}#site-head .brand-name,#site-head .brand-name span:last-child{font-size:16px}#site-head .mark{width:44px;height:44px}#orin-study h1{font-size:clamp(29px,7vw,42px)}#orin-study .project-grid{grid-template-columns:1fr;gap:42px}#orin-study .projects{padding:58px 24px 64px}#orin-study .section-head{gap:20px}#orin-study .sample-note{line-height:1.6;text-align:right;max-width:120px}#orin-study .preview{height:260px}#site-head nav button,#site-head nav a{min-height:44px;display:flex;align-items:center}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* 关于卡片：静态保持纯色，裂解画布留在 dialog 顶层并覆盖整个视口。 */ dialog#info-panel[data-kind="about"]{ isolation:isolate;max-height:calc(100svh - 40px); padding:calc(58 * var(--unit, 1px)) calc(44 * var(--unit, 1px)) calc(44 * var(--unit, 1px)); background:#fcfbf8;color:#282925; } dialog#info-panel[data-kind="about"] #panel-title{display:none} dialog#info-panel[data-kind="about"] #panel-copy{position:relative;text-align:center;font-size:calc(16 * var(--unit, 1px));cursor:pointer} dialog#info-panel[data-kind="about"] p{color:#282925;margin:0 0 1em} dialog#info-panel[data-kind="about"] p:last-child{margin-bottom:0} dialog#info-panel[data-kind="about"] .close{position:absolute;z-index:2;top:10px;right:10px;float:none;margin:0} dialog#info-panel[data-kind="about"] #panel-copy:focus-visible{outline:1px solid #76776e;outline-offset:8px} dialog#info-panel[data-kind="about"][data-fracture="running"]{background:transparent;border-color:transparent;overflow:visible} dialog#info-panel[data-fracture="running"] #panel-copy, dialog#info-panel[data-fracture="running"] .close{opacity:0} dialog#info-panel[data-fracture="running"] .close:focus-visible{opacity:1;background:#fcfbf8} dialog#info-panel[data-fracture="running"]::backdrop{background:rgb(0 0 0 / var(--fracture-backdrop,.25))} dialog#info-panel .about-fracture{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:1} @media(max-width:700px){dialog#info-panel[data-kind="about"]{padding:58px 28px 36px}} /* Header proportions: keep the brand prominent while making navigation easier to scan. */ #site-head .brand{gap:13px} #site-head .mark{width:52px;height:52px} #site-head .brand-name,#site-head .brand-name span:last-child{font-size:19px} /* 中英文两行贴成一个字标：间距全部交给行高，gap 归零，行高即间距旋钮。 行高 1.15 时两行墨迹间距约 6.5px（1 时是 3.5px，每加 0.05 约加 1px）。 英文行没有降部，行盒内墨迹偏低，居中后整体偏上 2px，下移补回光学居中。 */ #site-head .brand-name{gap:0;line-height:1.15;position:relative;top:2px} #site-head nav{font-size:16px;gap:24px;align-self:flex-start;margin-top:-4px} #site-head nav>a,#site-head nav>button{padding:8px 0 13px;line-height:1.35} #site-head nav a.active::after{width:4px;height:4px;bottom:9px} @media(max-width:700px){ /* 品牌在窄屏收一号：44px 的 logo 在 390px 屏上占到屏宽 11%，是桌面的 3.2 倍， 比站点自己的标题（29px）还大，层级倒挂。缩到 32px / 15px 后标题重新是最大的一号。 .brand 补 5px 纵向内边距，把品牌链接的可点高度补回 44px。 */ #site-head .brand{gap:11px;padding:5px 0} #site-head .mark{width:32px;height:32px} #site-head .brand-name,#site-head .brand-name span:last-child{font-size:15px} #site-head .brand-name{gap:0;line-height:1.15;position:relative;top:2px} /* 窄屏导航的间距与对齐。跑得动 JS 时这一层用不上——导航会被搬进右上角的抽屉 （见下方「窄屏导航」那段），下面是没跑 JS 时的退路：651-700px 时导航与品牌同行， 被 width:100% 压到剩余宽度；≤650px 时 header 换行（上面那处 flex-wrap:wrap）， 导航整行走第二行。两种情形原先都用 space-between 把五个按钮摊满整行，15px 的字 之间会空出七十多甚至一百多 px，很散；改成靠右收拢，间距取 1.5em——桌面是 24px 间距配 16px 字号，同一个比例，700 与 701 两侧的间隙因此接得上。 */ #site-head nav{font-size:15px;gap:1.5em;align-self:auto;margin-top:0} #site-head nav>a,#site-head nav>button{min-height:44px;padding:8px 0 13px} } /* 窄屏把导航收进右上角的菜单抽屉：搬的是同一个