/* ========================================
   KODIAK BONES
   ABOUT
   ======================================== */

.about-page {
  min-width: 0;

  --about-paper: rgba(255, 253, 247, 0.94);
  --about-paper-strong: rgba(255, 255, 255, 0.92);
  --about-paper-soft: rgba(246, 242, 231, 0.86);
  --about-ink: #403a36;
  --about-muted: #706862;
  --about-line: rgba(87, 112, 119, 0.30);
  --about-blue: #65b8d2;
  --about-blue-dark: #397d94;
  --about-pink: #e87d9e;
  --about-green: #83b88a;
  --about-yellow: #efc65f;
  --about-shadow: 0 12px 28px rgba(39, 55, 61, 0.13);
}

html[data-window-theme="dark"] .about-page {
  --about-paper: rgba(30, 42, 47, 0.93);
  --about-paper-strong: rgba(39, 52, 57, 0.95);
  --about-paper-soft: rgba(46, 57, 59, 0.88);
  --about-ink: #f2e7d4;
  --about-muted: #cbbfae;
  --about-line: rgba(160, 202, 211, 0.28);
  --about-blue: #6da9bc;
  --about-blue-dark: #9ccddd;
  --about-pink: #c97b93;
  --about-green: #8fae8a;
  --about-yellow: #c7a95f;
  --about-shadow: 0 14px 30px rgba(0, 0, 0, 0.26);
}

.about-window {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  padding: 28px;

  color: var(--about-ink);
  background: var(--window-background);

  border: 1px solid var(--window-border);
  border-radius: 18px;
  box-shadow: var(--window-shadow);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.about-window::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .45;
  background:
    radial-gradient(circle at 14px 14px, rgba(101,184,210,.12) 0 2px, transparent 2.5px) 0 0 / 38px 38px;
}

.about-window > * {
  position: relative;
  z-index: 1;
}

/* HERO */

.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(220px, .72fr);
  gap: 26px;
  align-items: center;
  padding-bottom: 30px;
  border-bottom: 2px dashed var(--about-line);
}

.about-kicker {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--about-blue-dark);
  font: 900 .58rem/1.2 Verdana, Arial, sans-serif;
  letter-spacing: .14em;
}

.about-hero h1 {
  margin: 0;
  color: var(--about-ink);
  font-family: "Gochi Hand", cursive;
  font-size: clamp(3rem, 7vw, 5.2rem);
  line-height: .88;
  transform: rotate(-1deg);
}

.about-lede {
  max-width: 650px;
  margin: 17px 0 0;
  color: var(--about-muted);
  font: .78rem/1.72 Verdana, Arial, sans-serif;
}

.about-lede strong {
  color: var(--about-pink);
}

.about-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}

.about-status-row span {
  padding: 6px 9px;
  color: var(--about-ink);
  background: var(--about-paper-strong);
  border: 1px solid var(--about-line);
  border-radius: 999px;
  box-shadow: 0 2px 5px rgba(43, 58, 63, .08);
  font: 700 .55rem/1.2 Verdana, Arial, sans-serif;
}

/* ID CARD */

.about-id-card {
  position: relative;
  width: 100%;
  max-width: 270px;
  justify-self: end;
  box-sizing: border-box;
  padding: 23px 18px 18px;
  overflow: hidden;

  background:
    linear-gradient(120deg, rgba(255,255,255,.48), transparent 32%),
    linear-gradient(180deg, rgba(145,216,230,.72), rgba(207,236,225,.72));
  border: 2px solid rgba(66, 126, 143, .48);
  border-radius: 18px;
  box-shadow: 0 8px 0 rgba(63, 113, 125, .18), var(--about-shadow);
  transform: rotate(1.4deg);
}

html[data-window-theme="dark"] .about-id-card {
  background:
    linear-gradient(120deg, rgba(255,255,255,.08), transparent 32%),
    linear-gradient(180deg, rgba(69,111,122,.82), rgba(66,91,83,.82));
}

.id-card-clip {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 60px;
  height: 19px;
  border: 3px solid rgba(67, 86, 91, .48);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  transform: translateX(-50%);
}

.id-card-label {
  margin: 0 0 10px;
  text-align: center;
  font: 900 .49rem/1.2 Verdana, Arial, sans-serif;
  letter-spacing: .11em;
}

.id-card-photo {
  display: grid;
  place-items: center;
  height: 112px;
  margin-bottom: 11px;
  overflow: hidden;
  background: rgba(255,255,255,.52);
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 12px;
}

.id-card-photo img {
  display: block;
  max-width: 94%;
  max-height: 104px;
  object-fit: contain;
  filter: drop-shadow(0 5px 3px rgba(30,50,50,.16));
}

.id-card-facts {
  margin: 0;
  font-family: Verdana, Arial, sans-serif;
}

.id-card-facts div {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px dotted rgba(61, 92, 98, .32);
}

.id-card-facts dt,
.id-card-facts dd { margin: 0; }
.id-card-facts dt { font-size: .45rem; font-weight: 900; text-transform: uppercase; opacity: .66; }
.id-card-facts dd { font-size: .54rem; font-weight: 700; }

.id-card-stamp {
  position: absolute;
  right: 7px;
  bottom: 5px;
  padding: 4px 6px;
  color: rgba(183, 64, 84, .72);
  border: 2px solid rgba(183, 64, 84, .55);
  border-radius: 4px;
  font: 900 .43rem/1 Verdana, Arial, sans-serif;
  text-align: center;
  transform: rotate(-9deg);
}

/* CONTENT PANELS */

.about-dashboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.about-panel {
  position: relative;
  min-width: 0;
  padding: 24px 18px 18px;
  background: var(--about-paper-strong);
  border: 1px solid var(--about-line);
  border-radius: 16px;
  box-shadow: 0 5px 14px rgba(45, 58, 61, .08);
  font-family: Verdana, Arial, sans-serif;
}

.about-panel-wide { grid-column: 1 / -1; }

.panel-tab {
  position: absolute;
  top: -9px;
  left: 15px;
  padding: 5px 8px;
  color: #fff;
  background: var(--about-yellow);
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 7px;
  box-shadow: 0 2px 0 rgba(73,62,45,.18);
  font: 900 .48rem/1 Verdana, Arial, sans-serif;
  letter-spacing: .08em;
  transform: rotate(-1deg);
}

.panel-tab-blue { background: var(--about-blue); }
.panel-tab-green { background: var(--about-green); }
.panel-tab-pink { background: var(--about-pink); }

.about-panel h2 {
  margin: 0 0 10px;
  color: var(--about-ink);
  font-family: "Gochi Hand", cursive;
  font-size: 1.65rem;
  line-height: 1;
}

.about-panel p,
.about-love-list {
  color: var(--about-muted);
  font-size: .67rem;
  line-height: 1.62;
}

.about-panel p { margin: 0 0 10px; }
.about-panel p:last-child { margin-bottom: 0; }

.about-chip-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.about-chip-cloud span {
  padding: 6px 8px;
  color: var(--about-ink);
  background: var(--about-paper-soft);
  border: 1px solid var(--about-line);
  border-radius: 8px;
  font-size: .55rem;
  font-weight: 700;
}

.about-love-list {
  margin: 0;
  padding-left: 1.2rem;
}

.about-love-list li + li { margin-top: 5px; }

.about-panel-note {
  background:
    linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.08)),
    var(--about-paper-soft);
}

.scribble-note {
  color: var(--about-pink) !important;
  font-family: "Gochi Hand", cursive !important;
  font-size: 1rem !important;
  transform: rotate(-1deg);
}

/* FILE DRAWER */

.about-drawer {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 2px dashed var(--about-line);
}

.drawer-heading {
  margin-bottom: 17px;
  text-align: center;
}

.drawer-heading > span {
  color: var(--about-blue-dark);
  font: 900 .5rem/1 Verdana, Arial, sans-serif;
  letter-spacing: .13em;
}

.drawer-heading h2 {
  margin: 7px 0 0;
  font-family: "Gochi Hand", cursive;
  font-size: 2rem;
  line-height: 1;
}

.drawer-heading p {
  margin: 7px 0 0;
  color: var(--about-muted);
  font: .61rem/1.5 Verdana, Arial, sans-serif;
}

.about-folder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

.about-folder {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 15px 13px;

  color: var(--about-ink);
  background: var(--about-paper-strong);
  border: 1px solid var(--about-line);
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(41, 56, 60, .08);

  font-family: Verdana, Arial, sans-serif;
  text-decoration: none;

  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

a.about-folder:hover,
a.about-folder:focus-visible {
  transform: translateY(-3px) rotate(-.3deg);
  border-color: var(--about-blue);
  box-shadow: 0 8px 16px rgba(41, 56, 60, .13);
}

a.about-folder:focus-visible {
  outline: 3px solid var(--about-pink);
  outline-offset: 3px;
}

.folder-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 39px;
  color: #fff;
  background: var(--about-blue);
  border-radius: 5px 5px 8px 8px;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.26), 0 3px 0 rgba(52,89,98,.18);
  font-size: 1.2rem;
}

.folder-personal .folder-icon { background: var(--about-pink); }
.folder-resume .folder-icon { background: var(--about-blue); }
.folder-commissions .folder-icon { background: var(--about-green); }

.folder-copy { min-width: 0; }
.folder-copy strong { display: block; margin-bottom: 4px; font-size: .66rem; }
.folder-copy small { display: block; color: var(--about-muted); font-size: .5rem; line-height: 1.4; }
.folder-arrow { color: var(--about-blue-dark); font-size: 1.1rem; font-weight: 900; }

.folder-coming {
  opacity: .72;
  cursor: default;
}

.folder-badge {
  padding: 4px 6px;
  color: #fff;
  background: var(--about-green);
  border-radius: 999px;
  font-size: .43rem;
  font-weight: 900;
}

/* FOOTER */

.about-footer-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
  color: var(--about-muted);
  text-align: center;
  font: .55rem/1.45 Verdana, Arial, sans-serif;
}

.about-footer-note img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.about-footer-note p { max-width: 390px; margin: 0; }

/* RESPONSIVE */

@media (max-width: 1050px) {
  .about-folder-grid { grid-template-columns: 1fr; }
}

@media (max-width: 850px) {
  .about-window { padding: 22px 16px; }
  .about-hero { grid-template-columns: 1fr; }
  .about-id-card { justify-self: center; max-width: 300px; transform: rotate(.7deg); }
}

@media (max-width: 600px) {
  .about-window { padding: 18px 10px; border-radius: 16px; }
  .about-dashboard { grid-template-columns: 1fr; }
  .about-panel-wide { grid-column: auto; }
  .about-hero h1 { font-size: 3.2rem; }
  .about-status-row { gap: 5px; }
  .about-status-row span { font-size: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .about-folder { transition: none; }
}

/* No more mystery wire sticking out of the creature ID badge. */
.about-id-card .id-card-clip { display: none; }