:root { --ink:#171719; --paper:#f4f4f1; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; font-family:Arial,"Microsoft YaHei",sans-serif; color:var(--ink); background:var(--paper); } a { color:inherit; text-decoration:none; }
.project-header { height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 4vw; position:sticky; top:0; z-index:10; border-bottom:1px solid currentColor; background:inherit; font-size:10px; font-weight:900; letter-spacing:.11em; }.project-header a:hover,.project-header button:hover { opacity:.55; }.project-header button { padding:0; color:inherit; border:0; background:transparent; font:inherit; letter-spacing:inherit; cursor:pointer; }.projects-hero { min-height:48vh; display:flex; flex-direction:column; justify-content:center; padding:6vw 6vw 6.5vw; border-bottom:1px solid var(--ink); background-image:radial-gradient(circle,rgba(23,23,25,.18) 0 1px,transparent 1.15px); background-size:31px 31px; }.projects-hero p,.projects-hero span { margin:0; font-size:10px; font-weight:900; letter-spacing:.13em; }.projects-hero h1 { margin:28px 0 22px; font-size:clamp(58px,7.6vw,112px); line-height:.9; letter-spacing:-.075em; }.project-entrances { display:grid; grid-template-columns:repeat(3,1fr); }.entrance { min-height:600px; display:flex; flex-direction:column; border-right:1px solid var(--ink); position:relative; overflow:hidden; transition:transform .25s; }.entrance:last-child { border-right:0; }.entrance:hover { z-index:1; transform:translateY(-10px); box-shadow:0 10px 0 rgba(0,0,0,.15); }.entrance > img,.cover-art { width:100%; height:auto; aspect-ratio:16/9; border-bottom:1px solid currentColor; }.entrance > img { display:block; object-fit:contain; object-position:center; }.entrance-copy { padding:28px 2.8vw; display:flex; flex:1; flex-direction:column; }.entrance-copy p,.entrance-copy span,.entrance-copy b { font-size:10px; font-weight:900; letter-spacing:.1em; line-height:1.5; }.entrance-copy h2 { margin:35px 0 17px; font-size:clamp(39px,4.3vw,64px); line-height:.86; letter-spacing:-.09em; }.entrance-copy span { font-size:12px; letter-spacing:0; line-height:1.65; }.entrance-copy b { margin-top:auto; padding-top:32px; }.silver-entrance { color:#5e3300; background:#fff1d0; }.silver-entrance .entrance-copy b { color:#d97700; }.ocean-entrance { color:#e5faff; background:#071b50; }.ocean-entrance .entrance-copy b { color:#21e0fa; }.tea-entrance { color:#17371c; background:#e8f2d8; }.tea-entrance .entrance-copy b { color:#22751d; }.cover-art { display:flex; flex-direction:column; justify-content:center; padding:26px 2.8vw; position:relative; overflow:hidden; background:linear-gradient(135deg,#ffad0f,#f47c19); }.cover-art::after { content:""; position:absolute; width:240px; height:240px; right:-65px; bottom:-150px; border:28px solid #fff1d0; border-radius:50%; }.cover-art span,.cover-art b { position:relative; z-index:1; font-size:9px; font-weight:900; letter-spacing:.12em; }.cover-art strong { position:relative; z-index:1; margin:14px 0; color:#171719; font-size:38px; line-height:.79; letter-spacing:-.08em; }.cover-art strong i { color:#fff4ce; font-style:normal; }.cover-art b { color:#fff4ce; }
.contact-button { appearance:none; }.contact-dialog { width:min(410px,calc(100vw - 36px)); margin:auto; padding:26px 28px 24px; color:var(--ink); border:1px solid var(--ink); border-radius:18px; background:var(--paper); box-shadow:8px 8px 0 var(--ink); }.contact-dialog::backdrop { background:rgba(23,23,25,.16); backdrop-filter:blur(2px); }.contact-eyebrow { margin:0 0 26px; color:#d71921; font-size:10px; font-weight:900; letter-spacing:.13em; }.contact-close { position:absolute; top:9px; right:12px; width:28px; height:28px; padding:0; color:var(--ink); border:0; background:transparent; font:400 27px/1 Arial,sans-serif; cursor:pointer; }.contact-row { display:grid; grid-template-columns:78px minmax(0,1fr); gap:13px; align-items:baseline; margin:13px 0; }.contact-row span { color:#747474; font-size:9px; font-weight:900; letter-spacing:.1em; }.contact-row a { min-width:0; font-size:15px; font-weight:800; line-height:1.4; overflow-wrap:anywhere; }.contact-row a:hover { color:#d71921; }.contact-note { margin:20px 0 0; padding-top:15px; color:#747474; border-top:1px solid rgba(23,23,25,.18); font-size:10px; font-weight:700; line-height:1.65; }
.deck-page { --page-bg:#f5dfb6; --dark:#633800; --slide-shadow:rgba(105,60,0,.18); color:var(--dark); background:var(--page-bg); }.deck-wrap { min-height:100vh; margin:0; padding:58px 5vw 78px calc(5vw + 46px); background:var(--page-bg); }.deck-stream { width:min(100%,1180px); margin:0 auto; display:block; }.slide-frame { margin:0 0 52px; padding:0; line-height:0; scroll-margin-top:92px; }.slide-frame:last-child { margin-bottom:0; }.slide-frame > a { display:block; width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--page-bg); border:0; box-shadow:0 16px 36px var(--slide-shadow); }.slide-frame img { display:block; width:calc(100% + 12px); height:calc(100% + 12px); margin:-6px; object-fit:cover; background:var(--page-bg); }.ocean-theme { --page-bg:#071a4e; --dark:#e4faff; --slide-shadow:rgba(0,0,0,.42); }.tea-theme { --page-bg:#dce8cf; --dark:#174922; --slide-shadow:rgba(20,73,34,.2); }
.deck-navigator { position:fixed; z-index:9; left:0; top:72px; bottom:0; width:46px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--dark); background:var(--page-bg); border-right:1px solid color-mix(in srgb,var(--dark) 18%,transparent); }.deck-nav-list { display:flex; flex-direction:column; align-items:center; gap:5px; }.deck-nav-item { position:relative; width:9px; height:3px; padding:0; border:0; border-radius:2px; background:color-mix(in srgb,var(--dark) 32%,transparent); cursor:pointer; transition:width .18s ease,background-color .18s ease,transform .18s ease; }.deck-nav-item:hover { width:14px; background:color-mix(in srgb,var(--dark) 68%,transparent); transform:scaleY(1.35); }.deck-nav-item.is-active { width:15px; background:var(--dark); }.deck-nav-item::after { content:attr(data-label); position:absolute; left:24px; top:50%; transform:translateY(-50%); padding:5px 7px; border-radius:5px; color:var(--page-bg); background:var(--dark); font:700 10px/1 Arial,sans-serif; letter-spacing:.06em; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s ease; }.deck-nav-item:hover::after,.deck-nav-item:focus-visible::after { opacity:1; }.deck-nav-item:focus-visible { outline:2px solid var(--dark); outline-offset:3px; }.deck-counter { position:absolute; bottom:15px; font:700 8px/1 Arial,sans-serif; letter-spacing:.05em; color:color-mix(in srgb,var(--dark) 55%,transparent); writing-mode:vertical-rl; }
@media (max-width:780px) { .project-header { height:62px; padding:0 18px; }.project-header span { display:none; }.projects-hero { min-height:360px; padding:56px 18px; }.projects-hero h1 { margin:24px 0 18px; font-size:17vw; line-height:.9; }.project-entrances { grid-template-columns:1fr; }.entrance { min-height:465px; border-right:0; border-bottom:1px solid var(--ink); }.entrance > img,.cover-art { height:auto; }.entrance-copy { padding:24px 18px; }.entrance-copy h2 { margin:26px 0 13px; font-size:53px; }.deck-wrap { padding:30px 12px 48px 48px; }.slide-frame { margin-bottom:24px; scroll-margin-top:74px; }.slide-frame > a { box-shadow:0 8px 20px var(--slide-shadow); }.deck-navigator { top:62px; width:36px; }.deck-nav-list { gap:4px; }.deck-nav-item { width:7px; height:2px; }.deck-nav-item:hover,.deck-nav-item.is-active { width:12px; }.deck-nav-item::after { display:none; }.deck-counter { bottom:10px; font-size:7px; }.contact-dialog { padding:24px 20px 21px; }.contact-row { grid-template-columns:68px minmax(0,1fr); gap:10px; }.contact-row a { font-size:13px; } }