/* Room Terra: one MCU owns the shared simulation and the website. */
.project-feature { grid-column:1/-1; padding:28px 0 8px; }
.feature-header { display:flex; justify-content:space-between; align-items:flex-start; gap:28px; }
.project-feature .feature-kicker { margin:0 0 12px; color:var(--amber); font:400 11px/1.4 var(--mono); letter-spacing:.04em; }
.project-feature h3 { font-size:38px; line-height:1.2; }
.feature-platform { font-weight:400; color:var(--muted); }
.project-feature .feature-summary { max-width:85ch; margin-top:16px; font-size:16px; line-height:1.65; }
.feature-header .project-arrow { width:24px; height:24px; flex:none; margin-top:34px; }
.feature-body { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:start; gap:48px; margin-top:32px; }
.feature-screen { margin:0; min-width:0; }
.project-feature .project-preview { max-width:none; aspect-ratio:1100/1167; border-radius:3px; }
.project-feature .project-preview img { width:100%; height:100%; object-fit:contain; }
.feature-screen figcaption { display:flex; justify-content:space-between; gap:16px; margin-top:12px; color:var(--muted); font:400 11px/1.5 var(--mono); }
.terra-board { display:flex; align-items:center; gap:18px; min-width:0; padding-bottom:22px; border-bottom:1px solid var(--keyline-soft); }
.project-feature .board-specimen { width:190px; height:160px; flex:none; }
.project-feature h4 { margin:0; font:600 21px/1.3 var(--display); letter-spacing:-.015em; }
.project-feature .terra-board p { margin:9px 0 0; font:400 12px/1.8 var(--mono); }
.terra-path { list-style:none; margin:26px 0 0; padding:0; }
.terra-path li { display:grid; grid-template-columns:30px minmax(0,1fr); gap:14px; position:relative; padding:0 0 26px; }
.terra-path li:last-child { padding-bottom:0; }
.terra-step { color:var(--amber); font:400 11px/1.8 var(--mono); padding-top:3px; }
.terra-path li:not(:last-child)::after { content:""; position:absolute; left:8px; top:29px; bottom:8px; border-left:1px solid var(--keyline-soft); }
.project-feature .terra-path p,.project-feature .terra-food p,.project-feature .terra-detail-grid p { margin:8px 0 0; font-size:14px; line-height:1.65; }
.terra-food { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:32px; padding-block:26px; border-block:1px solid var(--keyline-soft); }
.terra-food>div { padding:0 26px; position:relative; }
.terra-food>div:first-child { padding-left:0; }
.terra-food>div:last-child { padding-right:0; }
.terra-food>div+div { border-left:1px solid var(--keyline-soft); }
.terra-food>div+div::before { content:"\2192"; position:absolute; left:-7px; top:3px; color:var(--muted); background:var(--canvas); font-size:13px; }
.terra-species { display:inline-block; width:10px; height:10px; margin-right:9px; border:1px solid currentColor; }
.terra-species.plant { color:#648952; background:#648952; }
.terra-species.herbivore { color:var(--paper); border-radius:50%; }
.terra-species.predator { color:var(--amber); background:var(--amber); transform:rotate(45deg); width:8px; height:8px; }
.terra-details { position:relative; z-index:2; border-bottom:1px solid var(--keyline-soft); }
.terra-details summary { cursor:pointer; padding:20px 0; font:500 14px/1.5 var(--sans); min-height:48px; }
.terra-details summary:focus-visible,.terra-links a:focus-visible { outline:2px solid var(--amber); outline-offset:4px; }
.terra-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; padding:2px 0 28px; }
.terra-detail-grid h4 { font-size:19px; }
.terra-links { display:flex; flex-wrap:wrap; gap:8px 30px; margin-top:12px; }
.terra-links a { position:relative; z-index:2; display:inline-flex; align-items:center; gap:14px; min-height:44px; color:var(--paper); font:500 13px/1.5 var(--sans); text-decoration:none; }
.terra-links a:first-child { color:var(--amber); }
.terra-links a:hover { text-decoration:underline; text-underline-offset:5px; }
.terra-links a span { color:var(--amber); }
@media(max-width:1100px) {
 .feature-body { gap:28px; }
 .project-feature h3 { font-size:34px; }
 .project-feature .board-specimen { width:150px; height:140px; }
 .terra-board { gap:10px; }
 .terra-board h4 { font-size:19px; }
 .terra-food>div { padding-inline:20px; }
}
@media(max-width:800px) {
 .feature-body { grid-template-columns:1fr; gap:28px; }
 .feature-screen { max-width:580px; width:100%; margin-inline:auto; }
 .feature-platform { display:block; margin-top:5px; font-size:24px; }
 .terra-board { justify-content:center; }
 .terra-path { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
 .terra-path li { display:block; padding:0; }
 .terra-path li::after { display:none; }
 .terra-step { display:block; padding:0 0 10px; }
 .terra-detail-grid { grid-template-columns:1fr; gap:24px; }
}
@media(max-width:540px) {
 .project-feature h3 { font-size:31px; }
 .feature-header { gap:12px; }
 .feature-platform { font-size:22px; }
 .project-feature .feature-summary { font-size:15px; }
 .terra-path { display:block; }
 .terra-path li { display:grid; padding-bottom:24px; }
 .terra-step { padding-top:3px; }
 .terra-path li:not(:last-child)::after { display:block; }
 .terra-food { grid-template-columns:1fr; gap:24px; }
 .terra-food>div,.terra-food>div:first-child,.terra-food>div:last-child { padding:0; border:0; }
 .terra-food>div+div::before { display:none; }
 .terra-links { gap:4px 24px; }
 .project-feature .board-specimen { width:132px; height:132px; }
 .terra-board h4 { font-size:19px; }
 .project-feature .terra-board p { font-size:10px; }
 .feature-screen figcaption { font-size:10px; }
}