/* Shared chrome for destination pages (about/education/projects/accomplishments/gallery/contact).
   Approximates growon.kr's "blurred, still-visible desk behind a sliding panel" without
   re-rendering the full Three.js scene on every page (kept lightweight via a CSS gradient). */

.panel-page{ min-height:100vh; position:relative; overflow-x:hidden; }

/* A flat gradient approximation of the desk behind it, not a literal blurred photo. */
.panel-backdrop{
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 900px 600px at 75% 10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    var(--bg);
}

.panel-close{
  position:fixed; top:20px; left:20px; z-index:210;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--rail); background:var(--bg-raised); color:var(--ink);
  font-size:18px; line-height:1;
}
.panel-close:hover{ color:var(--accent); border-color:var(--accent); }

.panel{
  position:relative; z-index:5; max-width:860px; margin:0 auto;
  padding:96px 28px 80px;
  animation: panel-in .5s ease both;
}
@keyframes panel-in{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

.panel-eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-dim); display:block; margin-bottom:10px;
}
.panel h1{
  font-family:var(--font-display); font-weight:700; font-size:clamp(30px,5vw,52px); color:var(--ink);
  margin-bottom:28px;
}
.panel h2{
  font-family:var(--font-display); font-weight:600; font-size:22px; color:var(--ink);
  margin:36px 0 12px;
}
.panel p{ color:var(--ink); font-size:16px; line-height:1.7; max-width:70ch; }
.panel a.inline-link{ color:var(--accent-2); font-weight:500; }
.panel a.inline-link:hover{ text-decoration:underline; }

.card-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px; }
.card-grid--three{ grid-template-columns:1fr 1fr 1fr; }
.card-grid--single{ grid-template-columns:1fr; }
.card{
  border:1px solid var(--rail); background:var(--bg-raised); padding:20px;
  border-radius:4px;
}
.card h3{ font-family:var(--font-display); font-size:18px; margin-bottom:8px; color:var(--ink); }
.card .tags{ font-family:var(--font-mono); font-size:12px; color:var(--ink-dim); margin-top:10px; display:block; }

/* The four skill-tag colors (see DESIGN.md), applied as classes rather than inline
   styles so a Cyberpunk switch only ever has to touch the token, not per-page markup. */
.card h3.tag-amber{ color:var(--thread-amber); }
.card h3.tag-blue{ color:var(--thread-blue); }
.card h3.tag-violet{ color:var(--thread-violet); }
.card h3.tag-teal{ color:var(--thread-teal); }

.fact-row{ display:flex; flex-direction:column; gap:6px; padding:16px 0; border-bottom:1px solid var(--rail); }
/* Direct-child selector: a fact-row's value (the second column) may itself contain a
   <strong> for emphasis (see about.html's role title) and must not inherit the label's
   mono/uppercase/accent treatment meant only for the row's leading date/label. */
.fact-row > strong{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }
.fact-row .role{ font-family:var(--font-display); font-weight:600; color:var(--ink); }

@media (max-width:720px){
  .card-grid{ grid-template-columns:1fr; }
  .panel{ padding-top:84px; }
}