/* Designs by Discoe: component styles. Every value comes from tokens.css.
   Load the fonts with <link> tags (Fraunces, Figtree), see README. */

*, *::before, *::after { box-sizing: border-box; }

/* ---------- Page ground ---------- */
.dd-sky {
  margin: 0;
  color: var(--orange-300);
  font: 400 17px/28px var(--font-body);
  -webkit-font-smoothing: antialiased;
  background: linear-gradient(180deg,
    var(--lilac-100) 0%, var(--lilac-300) 28%, var(--lilac-500) 58%,
    var(--lilac-700) 82%, var(--lilac-900) 100%);
}
.dd-sky--deep {            /* previews of components that live low on the page */
  background: linear-gradient(180deg, var(--lilac-500) 0%, var(--lilac-700) 45%, var(--lilac-900) 100%);
}
.dd-sky--end {             /* the dark end of the page: contact and footer */
  background: linear-gradient(180deg, var(--lilac-700) 0%, var(--lilac-900) 45%, var(--lilac-900) 100%);
}
.dd-wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--space-3); }
.dd-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.dd-hidden-room { padding-block: var(--space-7); }

/* ---------- Type ---------- */
.dd-display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  letter-spacing: -0.01em;
  line-height: 1.08;
  text-wrap: balance;
}
.dd-h1 { font-size: clamp(40px, 7vw, 64px); }
.dd-h2 { font-size: clamp(32px, 5vw, 44px); line-height: 1.14; }
.dd-h3 { font-size: clamp(24px, 3.4vw, 30px); line-height: 1.2; font-weight: 600; }
.dd-orange { color: var(--orange-500); }
.dd-heading { color: var(--orange-400); }
.dd-label {
  font: 700 13px/18px var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dd-small { font: 500 14px/22px var(--font-body); }
.dd-text { max-width: var(--measure); margin: 0; }
.dd-text--lg { font-size: 20px; line-height: 32px; }

/* Display type that sits on the lilac gradient rests on a dusk plate. Type is never outlined, stroked or shadow-edged. */
.dd-plate {
  display: inline-block; max-width: 100%;
  padding: var(--space-3) var(--space-5) var(--space-4);
  background: var(--dusk-800);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
}
.dd-plate > * { margin: 0; }
.dd-plate--organic { padding: var(--space-4) var(--space-6) var(--space-5); border-radius: 56px 112px 64px 128px / 72px 64px 104px 56px; }

/* ---------- Welcome ---------- */
.dd-welcome {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: clamp(64px, 15vw, 144px);
  line-height: 1;
  letter-spacing: -0.01em;
  padding: 0.04em 0.06em 0.1em;
  color: var(--dusk-800);
}

/* ---------- Shapes that hide ---------- */
/* Decoration is swirls, never plain circles. Set size, position and color (lilac-300, lilac-500) inline. */
.dd-swirl {
  position: absolute;
  pointer-events: none;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Panels ---------- */
.dd-panel {
  position: relative;
  padding: var(--space-5);
  color: var(--orange-300);
  background: var(--dusk-800);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
}
.dd-panel--deep {          /* panels on the lower half of the gradient */
  background: var(--dusk-900);
  box-shadow: 0 0 0 2px var(--orange-400), var(--shadow-float);
}
.dd-panel--organic { border-radius: 56px 112px 64px 128px / 72px 64px 104px 56px; }
.dd-panel > :first-child { margin-top: 0; }
.dd-panel > :last-child { margin-bottom: 0; }

/* ---------- Buttons and links ---------- */
.dd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 12px 28px;
  border: 0; border-radius: var(--radius-pill);
  font: 700 16px/1 var(--font-body);
  text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow-lift);
  transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1), background-color 0.2s;
}
.dd-btn--primary { background: var(--orange-500); color: var(--on-orange); }
.dd-btn--primary:hover { background: var(--sun-300); transform: translateY(-3px) rotate(-1deg); }
.dd-btn--primary:active { background: var(--orange-600); transform: none; }
.dd-btn--quiet { background: var(--dusk-800); color: var(--orange-400); }
.dd-btn--quiet:hover { background: var(--dusk-900); transform: translateY(-3px) rotate(1deg); }
.dd-link { color: var(--orange-400); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.dd-link:hover { color: var(--sun-300); text-decoration-style: wavy; }

.dd-sky :focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-outer), 0 0 0 6px var(--focus-inner), 0 0 0 8px var(--focus-outer);
}

/* ---------- Tabs ---------- */
.dd-tabs { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: 0 0 var(--space-3); list-style: none; }
.dd-tab {
  appearance: none; border: 0; cursor: pointer;
  min-height: 48px; padding: 14px 26px;
  border-radius: var(--radius-pill);
  background: var(--dusk-800); color: var(--orange-400);
  font: 600 17px/1 var(--font-body);
  box-shadow: var(--shadow-lift);
  transition: transform 0.4s cubic-bezier(0.3, 1.4, 0.5, 1), background-color 0.2s;
}
.dd-tabs > :nth-child(even) .dd-tab { transform: translateY(10px); }
.dd-tab:hover { background: var(--dusk-900); transform: translateY(-4px) rotate(-1.5deg) !important; }
.dd-tab[aria-selected="true"] { background: var(--orange-500); color: var(--on-orange); }

/* ---------- Folder (tier 1) ---------- */
.dd-shelf {
  display: grid; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: var(--space-5) var(--space-5);
  align-items: start;
}
.dd-shelf > :nth-child(even) { margin-top: var(--space-5); }
.dd-shelf > :nth-child(3n) { margin-top: var(--space-3); }
.dd-folder {
  --tab: var(--confetti-pink);
  position: relative; display: block; padding-top: 34px;
  color: inherit; text-decoration: none;
  transition: transform 0.45s cubic-bezier(0.3, 1.3, 0.5, 1);
}
.dd-folder__sheet {
  position: absolute; top: 8px; right: var(--space-4); width: 46%; height: 70px;
  background: var(--paper); border-radius: var(--radius-md) var(--radius-md) 0 0;
  transform: rotate(-1.8deg);
  transition: transform 0.45s cubic-bezier(0.3, 1.3, 0.5, 1);
}
.dd-folder__tab {
  position: absolute; top: 0; left: var(--space-4); z-index: 2;
  padding: 8px 22px 14px;
  background: var(--tab); color: var(--on-orange);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font: 700 13px/18px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase;
}
.dd-folder__body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-2);
  min-height: 184px; padding: var(--space-5) var(--space-4) var(--space-4);
  background: var(--dusk-800);
  border-radius: var(--radius-sm) var(--radius-lg) var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-float);
}
.dd-folder__name { font: 700 28px/32px var(--font-body); letter-spacing: -0.01em; color: var(--orange-400); }
.dd-folder__meta { font: 500 14px/22px var(--font-body); color: var(--orange-300); }
.dd-folder:hover { transform: translateY(-5px); }
.dd-folder:hover .dd-folder__sheet { transform: translateY(-18px) rotate(-3.5deg); }

/* ---------- Breadcrumbs ---------- */
.dd-crumbs { display: inline-block; align-self: flex-start; max-width: 100%; }
.dd-crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3);
  margin: 0; padding: 12px 24px; list-style: none;
  background: var(--dusk-800); border-radius: var(--radius-pill);
  font: 600 17px/24px var(--font-body); color: var(--orange-300);
}
.dd-crumbs li + li::before { content: "\203A"; margin-right: var(--space-3); color: var(--orange-500); }
.dd-crumbs a { color: var(--orange-400); text-decoration: none; }
.dd-crumbs a:hover { color: var(--sun-300); text-decoration: underline wavy; text-underline-offset: 4px; }

/* ---------- Piece names (tier 2) ---------- */
.dd-pieces__list { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.dd-piece-row {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4);
  color: inherit; text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.dd-piece-row__name {
  font: 600 clamp(26px, 4vw, 36px)/1.15 var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--orange-400);
  text-underline-offset: 8px; text-decoration-thickness: 2px;
}
.dd-piece-row__meta { font: 500 15px/22px var(--font-body); color: var(--orange-300); }
.dd-piece-row:hover { transform: translateX(14px); }
.dd-piece-row:hover .dd-piece-row__name { color: var(--sun-300); text-decoration: underline wavy var(--sun-300); }

/* ---------- Image mat and piece page (tier 3) ---------- */
.dd-mat {
  margin: 0; padding: var(--space-3);
  background: var(--paper); border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  transform: rotate(-1deg);
}
.dd-mat img { display: block; width: 100%; height: auto; max-height: 640px; object-fit: contain; border-radius: var(--radius-sm); margin-inline: auto; }
.dd-pieceview { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-6); align-items: center; }
@media (max-width: 760px) { .dd-pieceview { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } }
.dd-facts { display: grid; gap: var(--space-3); margin: var(--space-4) 0; }
.dd-facts div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--space-3); }
.dd-facts dt { font: 700 13px/22px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-400); }
.dd-facts dd { margin: 0; }
.dd-thumbs { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.dd-thumbs button { padding: 6px; border: 0; background: var(--paper); border-radius: var(--radius-sm); cursor: pointer; }
.dd-thumbs img { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }

/* ---------- Journals ---------- */
.dd-journals {
  display: grid; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--space-6) var(--space-5);
  align-items: start;
}
.dd-journals > :nth-child(even) { margin-top: var(--space-5); }
.dd-journal {
  --cover: var(--confetti-pink);
  appearance: none; display: block; width: 100%; max-width: 300px; padding: 0; border: 0; background: none;
  color: inherit; text-align: left; cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.3, 1.3, 0.5, 1);
}
.dd-journal__cover {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 4; padding: var(--space-4);
  background: var(--cover);
  border-radius: var(--radius-sm) var(--radius-lg) var(--radius-lg) var(--radius-sm);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
.dd-journal__cover::before {       /* the spine */
  content: ""; position: absolute; inset: 0 auto 0 0; width: 22px;
  background: rgba(42, 19, 70, 0.22);
}
.dd-journal__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dd-journal__tag {
  position: relative; padding: 6px 18px 8px;
  background: var(--paper); color: var(--dusk-800);
  border-radius: var(--radius-pill);
  font: 600 15px/20px var(--font-body);
}
.dd-journal__label {
  display: flex; flex-direction: column; gap: var(--space-1);
  margin: calc(var(--space-4) * -1) var(--space-3) 0; z-index: 1; padding: var(--space-3) var(--space-4);
  position: relative;
  background: var(--dusk-800); border-radius: var(--radius-md);
}
.dd-journal__title { font: 600 24px/1.15 var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--orange-400); }
.dd-journal__meta { font: 500 14px/22px var(--font-body); color: var(--orange-300); }
.dd-journal:hover { transform: translateY(-8px) rotate(-1.5deg); }

/* ---------- Slideshow ---------- */
.dd-slideshow {
  display: grid; gap: var(--space-4); justify-items: center;
  padding: var(--space-5); background: var(--dusk-900); color: var(--orange-300);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 2px var(--orange-400), var(--shadow-float);
}
.dd-slideshow__head { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-3); }
.dd-slideshow__stage { width: 100%; max-width: 560px; }
.dd-slideshow__ph {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; background: var(--cover, var(--confetti-mint)); color: var(--on-orange);
  border-radius: var(--radius-sm); font: 700 22px/1 var(--font-body);
}
.dd-slideshow__bar { display: flex; align-items: center; justify-content: center; gap: var(--space-4); }
.dd-dots { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.dd-dots button { width: 14px; height: 14px; padding: 0; border: 0; border-radius: 50%; background: var(--lilac-500); cursor: pointer; }
.dd-dots button[aria-current="true"] { background: var(--sun-300); transform: scale(1.35); }
.dd-round {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%;
  background: var(--orange-500); color: var(--on-orange); cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1), background-color 0.2s;
}
.dd-round:hover { background: var(--sun-300); transform: scale(1.08); }
.dd-round svg { width: 24px; height: 24px; }

/* ---------- Resume ---------- */
.dd-resume { display: grid; gap: var(--space-5); }
.dd-resume__label { margin: 0 0 var(--space-3); font: 700 13px/18px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-400); }
.dd-resume__rows { display: grid; gap: var(--space-3); margin: 0; }
.dd-resume__rows div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--space-3); }
.dd-resume__rows dt { font: 600 17px/28px var(--font-display); color: var(--orange-400); }
.dd-resume__rows dd { margin: 0; }

/* ---------- Capstone ---------- */
.dd-capstone { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-6) var(--space-6); }
.dd-loading { display: inline-flex; gap: var(--space-2); margin-top: var(--space-3); }
.dd-loading i { width: 14px; height: 14px; border-radius: 50%; background: var(--orange-500); animation: dd-bob 1.6s ease-in-out infinite; }
.dd-loading i:nth-child(2) { background: var(--sun-300); animation-delay: 0.2s; }
.dd-loading i:nth-child(3) { background: var(--confetti-pink); animation-delay: 0.4s; }
@keyframes dd-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) {
  .dd-loading i { animation: none; }
  .dd-folder, .dd-folder__sheet, .dd-tab, .dd-btn, .dd-journal, .dd-piece-row, .dd-round { transition: none; }
}

/* ---------- Contact (sits directly on the dark end of the gradient) ---------- */
.dd-contact { display: grid; gap: var(--space-4); justify-items: start; }
.dd-email {
  font: 700 clamp(26px, 5vw, 44px)/1.15 var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--sun-300); overflow-wrap: anywhere;
  text-decoration: underline wavy var(--orange-500); text-underline-offset: 10px; text-decoration-thickness: 2px;
}
.dd-email:hover { color: var(--orange-400); }