/* Relative, never root-absolute: only on oneteam.love is "/buddy_arrival_02/…" this site. Under
   http://heaven/one_team/… a leading slash points at heaven's root, which answers empty. */
@font-face{font-family:DM;src:url('../buddy_arrival_02/assets/fonts/dm-sans-latin.woff2') format('woff2');font-display:swap}
@font-face{font-family:Instrument;src:url('../buddy_arrival_02/assets/fonts/instrument-serif-italic-latin.woff2') format('woff2');font-style:italic;font-display:swap}
:root{color-scheme:dark;font-family:DM,sans-serif;color:#ecf4f0;background:#090d12}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 10% 0%,#132125 0%,transparent 58%)}
main{max-width:1120px;margin:auto;padding:58px 40px 90px}
header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:36px}
.brand{font-size:10px;letter-spacing:.23em;color:#9aafa9;text-decoration:none}
h1{font-size:55px;letter-spacing:-.05em;font-weight:400;line-height:1;margin:0}
h1 em{font-family:Instrument,serif;font-weight:400;color:#a9e6cf}
a{color:inherit}
/* .back — the obvious way out of any lab page (relative href, one step up) */
.back{display:inline-flex;align-items:center;gap:2px;margin-bottom:22px;padding:9px 16px 9px 13px;border:1px solid #ffffff1f;border-radius:999px;background:#10151b;font-size:13px;color:#b8cec7;text-decoration:none;transition:border-color .2s,color .2s}
.back:hover{border-color:#a7dac568;color:#ecf4f0}
.back:focus-visible{outline:2px solid #abefd8;outline-offset:4px}

/* hub */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.door{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:40px 30px;border:1px solid #ffffff12;border-radius:20px;background:#10151b;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
.door:hover{border-color:#a7dac568;transform:translateY(-3px)}
.door:focus-visible{outline:2px solid #abefd8;outline-offset:5px}
.door h2{font-size:26px;font-weight:400;letter-spacing:-.02em;margin:0}
.door p{margin:6px 0 0;font-size:12px;color:#8ca39d}
.door span{font-size:22px;color:#8ca39d}
/* the main thing: one full-width primary door above the rest */
.door.primary{grid-column:1/-1;padding:56px 40px;border-color:#a7dac53d;background:linear-gradient(120deg,#13202099 0%,#10151b 60%)}
.door.primary h2{font-size:42px;letter-spacing:-.04em}
.door.primary p{margin-top:10px;font-size:14px;color:#a9c4bc}
.door.primary span{font-size:32px;color:#a9e6cf}

.sections{margin:64px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.sections li{display:flex;align-items:center;gap:16px;padding:18px 22px;border:1px dashed #ffffff10;border-radius:14px;color:#7d918c;font-size:14px}
.sections li b{font-variant-numeric:tabular-nums;font-weight:400;font-size:11px;color:#55655f;letter-spacing:.1em}

/* collection */
.items{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:0;padding:0;list-style:none}
.item{border:1px solid #ffffff12;border-radius:20px;background:#10151b;overflow:hidden}
.item-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:20px 22px 14px}
.item-head h2{font-size:18px;font-weight:400;letter-spacing:-.02em;margin:0}
.item-head a{font-size:11px;color:#8ca39d;text-decoration:none;white-space:nowrap}
.item-head a:hover{color:#a9e6cf}
.frame{position:relative;aspect-ratio:16/10;background:#0b1017;border-top:1px solid #ffffff0d;border-bottom:1px solid #ffffff0d}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.hint{margin:0;padding:12px 22px 0;font-size:11px;line-height:1.5;color:#7d918c}
.hint.empty-embed{color:#e8a99c;word-break:break-all}
.note{margin:6px 0 0;padding:0 22px;font-size:11px;line-height:1.5;color:#9fb8a9}
.comment{padding:14px 22px 20px}
.comment textarea{width:100%;min-height:74px;resize:vertical;border:1px solid #ffffff14;border-radius:12px;background:#0c1116;color:#ecf4f0;font:inherit;font-size:13px;padding:11px 13px}
.comment textarea:focus{outline:none;border-color:#a7dac568}
.saved{display:block;height:14px;margin-top:6px;font-size:10px;letter-spacing:.1em;color:#7fd3b0;opacity:0;transition:opacity .25s}
.saved.on{opacity:1}
.saved.err{color:#e8a99c}
details.source{padding:0 22px 18px;font-size:10px;color:#55655f}
details.source summary{cursor:pointer;letter-spacing:.12em}
details.source pre{white-space:pre-wrap;word-break:break-word;margin:8px 0 0;color:#6d7f7a;font-size:10px;line-height:1.6}

@media(max-width:820px){
  main{padding:32px 18px 60px}
  h1{font-size:40px}
  .doors,.items{grid-template-columns:1fr;gap:18px}
  .door{padding:28px 22px}
  .door.primary{padding:34px 24px}
  .door.primary h2{font-size:30px}
  .door.primary span{font-size:26px}
  .frame{aspect-ratio:3/4}
  header{margin-bottom:26px;flex-direction:column;align-items:flex-start;gap:12px}
}
@media(prefers-reduced-motion:reduce){.door{transition:none}.door:hover{transform:none}}