@charset "UTF-8";
/* Project boards retain their original proportions within the ruins interface. */
.works-category-nav { margin:28px 0 32px; padding:18px 20px; border:1px solid #7c8e607d; background:#0c261cdd; box-shadow:inset 0 1px #d7e0b316; }
.works-category-nav > span { display:block; margin-bottom:12px; font-size:11px; letter-spacing:.08em; color:#a6b98f; }
.works-category-nav > div { display:flex; flex-wrap:wrap; gap:9px; }
.works-category-nav button { display:flex; align-items:center; gap:12px; min-width:0; padding:11px 14px; background:#183425; border:1px solid #84956099; color:#d4dfb9; font-size:12px; line-height:1.5; }
.works-category-nav button > span { padding:1px 6px; font:11px/1.6 monospace; color:#deE6b0; background:#b8cc7120; }
.works-category-nav button > i { font-style:normal; font-size:13px; color:#acc28c; }
.works-category-nav button:hover { background:#294730; border-color:#c0cd8e; }
.works-category-nav button:focus-visible { outline:2px solid #c0d28e; outline-offset:3px; }
.works-page .design-collection { margin-top:60px; }
.works-page .design-work-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
.works-page .design-work-card { min-width:0; }
.works-page .design-work-card .design-cover { display:flex; flex-direction:column; align-items:stretch; justify-content:stretch; height:350px; aspect-ratio:auto; padding:15px 15px 0; gap:0; background:linear-gradient(140deg,#183528,#0b2119); border:1px solid #7c8e6099; }
.works-page .design-cover::before,.works-page .design-cover::after { display:none; }
.design-cover-mat { display:block; min-height:0; flex:1; width:100%; overflow:hidden; background:#061a13; border:1px solid #8a9a6a55; }
.works-page .design-cover .design-cover-mat img { display:block; height:100%; width:100%; max-width:100%; object-fit:contain; object-position:center; image-rendering:auto; }
.design-cover-label { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:42px; color:#b5c59c; font:10px/1.5 monospace; letter-spacing:.03em; }
.design-cover-label > span { flex-shrink:0; font-family:inherit; color:#a4b68d; }
.works-page .design-work-card .work-meta { margin-top:21px; }
.works-page .design-work-card .work-label { font-size:11px; }
.works-page .design-work-card .status { font-size:10px; }
.works-page .design-work-card h2 { font-size:25px; line-height:1.65; overflow-wrap:anywhere; }
.works-page .design-work-card .work-summary { font-size:13px; line-height:1.9; }
.page .design-project-heading { align-items:center; gap:32px; padding-bottom:30px; }
.page .design-project-heading > div:first-child { min-width:0; }
.page .design-project-heading h1 { margin:16px 0; font-size:clamp(29px,4.5vw,58px); line-height:1.45; letter-spacing:-.02em; overflow-wrap:anywhere; }
.page .design-project-heading p { max-width:800px; font-size:14px; line-height:1.95; }
.design-project-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:23px; }
.design-project-tags > span { padding:5px 9px; border:1px solid #8d9f6970; background:#142e23b8; color:#c2cfad; font-size:11px; line-height:1.7; }
.design-page-count { flex-shrink:0; min-width:125px; padding:15px 19px; display:flex; flex-direction:column; align-items:center; gap:5px; border:1px solid #83966b88; background:#0d261dbe; color:#bfcd9f; box-shadow:3px 3px 0 #04160e; }
.design-page-count > strong { font:400 42px/1.2 var(--px-display,monospace); color:#e1e8be; }
.design-page-count > span { font-size:12px; }
.design-page-count > small { font-size:10px; color:#96ac87; margin-top:5px; }
.design-project-meta { display:flex; flex-wrap:wrap; gap:30px; padding:20px 0; margin:0; border-bottom:1px solid #7a8a5c70; }
.design-project-meta > div { display:flex; gap:15px; align-items:baseline; }
.design-project-meta dt { font-size:11px; color:#9bad8d; }
.design-project-meta dd { margin:0; font-size:13px; color:#d2ddbd; }
.page .design-project-tabs { gap:10px; margin:27px 0; }
.page .design-project-tabs button { width:auto; padding:9px 14px; font-size:12px; }
.page .design-project-tabs button > span { margin-left:12px; color:#a7bd8c; font:11px/1.5 monospace; }
.design-overview { padding:24px 28px; background:#102a20d9; border:1px solid #77895e88; border-left:3px solid #bdca86; margin-bottom:30px; scroll-margin-top:150px; }
.design-overview > p:last-child { max-width:960px; margin:13px 0 0; font-size:14px; line-height:2; color:#bdcdb1; }
.design-chapters { padding:20px; margin-bottom:32px; border:1px solid #667d5277; background:#0c241bcb; }
.design-chapters > p { margin:0 0 14px; font-size:11px; letter-spacing:.08em; color:#9caf87; }
.design-chapters > div { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px; }
.design-chapters button { display:flex; align-items:baseline; gap:10px; padding:10px 12px; border:1px solid #6f835655; background:#122c20; color:#c4d2af; font-size:12px; line-height:1.65; text-align:left; }
.design-chapters button > span { flex-shrink:0; color:#d0d89e; font:11px/1.5 monospace; }
.design-chapters button:hover { background:#1d3a2a; border-color:#b1c085; }
.design-project-page .design-gallery { margin-top:35px; scroll-margin-top:150px; }
.design-project-page .design-gallery > .section-heading { align-items:flex-end; flex-wrap:wrap; gap:16px; margin-bottom:24px; }
.design-gallery > .section-heading h2 { margin:9px 0 0; font-size:26px; }
.design-gallery > .section-heading > span { font-size:11px; line-height:1.8; color:#a8bc93; }
.design-sheet-list { display:flex; flex-direction:column; gap:34px; }
.design-sheet { margin:0; padding:12px; background:#0d251de8; border:1px solid #84946688; box-shadow:4px 4px 0 #03180e; scroll-margin-top:150px; min-width:0; }
.design-sheet > figcaption { display:flex; align-items:baseline; gap:16px; padding:5px 4px 15px; color:#cad7b8; font-size:13px; line-height:1.8; }
.design-sheet-number { flex-shrink:0; color:#a8ba86; font:11px/1.7 monospace; }
.design-sheet > figcaption > strong { font-weight:400; overflow-wrap:anywhere; }
.design-sheet-mark { margin-left:auto; color:#c6d19d; flex-shrink:0; }
.design-sheet-image { position:relative; display:block; width:100%; padding:0; border:0; background:#081a13; color:#e2e8c6; cursor:zoom-in; text-align:left; overflow:hidden; }
.page .design-sheet-image > img { display:block; width:100%; height:auto; max-width:100%; max-height:none; aspect-ratio:auto; object-fit:contain; border-radius:0; background:transparent; image-rendering:auto; filter:none; }
.design-sheet-open { position:absolute; bottom:12px; right:12px; display:flex; align-items:center; gap:14px; padding:8px 11px; border:1px solid #bcc9979c; background:#0a211ce8; font-size:11px; line-height:1.5; opacity:0; transition:opacity .2s; }
.design-sheet-image:hover .design-sheet-open,.design-sheet-image:focus-visible .design-sheet-open { opacity:1; }
.design-sheet-note { margin:12px 4px 3px; color:#a7bc96; font-size:12px; line-height:1.9; }
.design-project-page .project-pagination { margin-top:48px; gap:22px; }
.design-project-page .project-pagination > a { overflow-wrap:anywhere; }
.page .related-projects { margin-top:42px; padding:26px; border:1px solid #77895d88; background:#0f291fe8; }
.page .related-projects > .section-heading { margin-bottom:20px; }
.page .related-projects h2 { margin:10px 0 0; font-size:24px; font-weight:400; line-height:1.6; }
.related-project-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.related-project-list > a { display:block; padding:18px; border:1px solid #82956477; background:#142f22; min-width:0; }
.related-project-category { display:block; margin-bottom:11px; font-size:10px; line-height:1.6; color:#a6ba8c; }
.related-project-list strong { display:flex; justify-content:space-between; align-items:baseline; gap:20px; font-weight:400; font-size:20px; line-height:1.65; color:#dbe5c0; overflow-wrap:anywhere; }
.related-project-list strong > span { flex-shrink:0; color:#c8d69a; }
.related-project-list p { max-width:none; margin:10px 0 0; font-size:12px; line-height:1.9; color:#b0c1a0; }
.related-project-list > a:hover { background:#1d3a28; border-color:#bdca8b; }
.lab-page .design-lab-card { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.lab-page .design-lab-cover { display:flex; align-items:center; justify-content:center; min-height:320px; max-height:none; aspect-ratio:auto; padding:20px 20px 52px; background:linear-gradient(135deg,#19382a,#092118); }
.lab-page .design-lab-cover img { display:block; width:100%; height:auto; max-height:400px; aspect-ratio:auto; object-fit:contain; object-position:center; filter:none; image-rendering:auto; }
.lab-page .design-lab-card:hover .design-lab-cover img { transform:none; filter:none; }
.design-lab-cover-note { position:absolute; bottom:14px; left:20px; right:20px; display:flex; align-items:center; justify-content:space-between; gap:15px; color:#bdcba1; font:10px/1.7 monospace; letter-spacing:.04em; }
.lab-page .design-lab-card .design-project-tags { margin:0 0 24px; }
.design-lab-note { display:block; color:#a5b991; font-size:10px; line-height:1.8; margin-top:18px; }
@media (max-width:800px) {
  .works-page .design-work-grid { gap:24px; }
  .works-page .design-work-card .design-cover { height:290px; padding:11px 11px 0; }
  .works-page .design-work-card h2 { font-size:23px; }
  .design-cover-label { font-size:9px; min-height:38px; }
  .design-page-count { min-width:105px; padding:13px; }
  .design-chapters > div { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
  .works-category-nav { padding:15px; margin:23px 0 27px; }
  .works-category-nav > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .works-category-nav button { gap:9px; padding:10px; font-size:11px; }
  .works-category-nav button > span { padding:1px 5px; font-size:10px; margin-left:auto; }
  .works-category-nav button > i { display:none; }
  .works-page .design-collection { margin-top:42px; }
  .works-page .design-work-grid { grid-template-columns:1fr; gap:30px; }
  .works-page .design-work-card .design-cover { height:300px; padding:12px 12px 0; }
  .works-page .design-work-card .work-summary { font-size:12px; }
  .works-page .design-work-card .work-meta { gap:8px; flex-wrap:wrap; }
  .page .design-project-heading { gap:16px; align-items:flex-start; }
  .page .design-project-heading h1 { font-size:28px; letter-spacing:-.03em; margin-top:12px; }
  .page .design-project-heading p { font-size:12px; }
  .design-page-count { min-width:69px; padding:10px 9px; margin-top:7px; }
  .design-page-count > strong { font-size:30px; }
  .design-page-count > span { font-size:10px; }
  .design-page-count > small { display:none; }
  .design-project-tags { gap:6px; margin-top:17px; }
  .design-project-tags > span { font-size:10px; padding:4px 7px; }
  .page .design-project-tabs { margin:23px 0; }
  .page .design-project-tabs button { padding:8px 11px; font-size:11px; }
  .design-overview { padding:19px; }
  .design-overview > p:last-child { font-size:12px; }
  .design-chapters { padding:15px; margin-bottom:25px; }
  .design-chapters > div { gap:7px; }
  .design-chapters button { gap:7px; padding:9px; font-size:10px; }
  .design-chapters button > span { font-size:10px; }
  .design-gallery > .section-heading h2 { font-size:23px; }
  .design-gallery > .section-heading > span { font-size:10px; }
  .design-sheet-list { gap:23px; }
  .design-sheet { padding:7px; }
  .design-sheet > figcaption { padding:4px 3px 11px; gap:11px; font-size:11px; }
  .design-sheet-number { font-size:9px; }
  .design-sheet-open { display:none; }
  .design-sheet-note { font-size:11px; margin:10px 3px 3px; }
  .design-project-page .project-pagination { font-size:11px; margin-top:35px; }
  .page .related-projects { margin-top:30px; padding:18px; }
  .page .related-projects h2 { font-size:21px; }
  .related-project-list { grid-template-columns:1fr; }
  .related-project-list > a { padding:15px; }
  .related-project-list strong { font-size:18px; }
  .related-project-list p { font-size:11px; }
  .lab-page .design-lab-card { grid-template-columns:1fr; }
  .lab-page .design-lab-cover { min-height:0; padding:16px 16px 46px; border-right:0; }
  .lab-page .design-lab-cover img { max-height:360px; }
  .design-lab-cover-note { left:16px; right:16px; bottom:12px; font-size:9px; }
}
@media (prefers-reduced-motion:reduce) {
  .design-sheet-open { transition:none; }
}