/* ============================================
   Mukund Kunapareddy — Personal Site
   Poplin stripe + postcard aesthetic
   ============================================ */

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

:root {
  --bg: #f4f1ec;
  --bg-panel: #f9f7f4;
  --card-bg: rgba(252, 250, 247, 0.94);
  --border: #ddd8d0;
  --border-light: #eae6e0;
  --text: #2c2825;
  --text-secondary: #6e6860;
  --text-muted: #a39e96;
  --stripe-color: rgba(170, 195, 220, 0.22);
  --stripe-width: 3px;
  --stripe-gap: 14px;
  --serif: 'Playfair Display', Georgia, serif;
  --body-serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --handwritten: 'Dancing Script', cursive;
}

html {
  font-size: 16px;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  height: 100vh;
}

a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

a:hover {
  text-decoration-color: var(--text);
}

::selection {
  background: rgba(170, 195, 220, 0.2);
  color: var(--text);
}

/* ============================================
   Poplin stripes background (shared)
   ============================================ */

.striped-bg {
  position: relative;
}

.striped-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='1200'%3E%3Cpath d='M20 0 C25 30, 14 80, 22 150 C28 230, 12 320, 18 420 C24 530, 13 640, 21 750 C27 860, 15 960, 20 1060 C24 1140, 17 1180, 20 1200' stroke='%23a3c0d8' stroke-width='2.4' fill='none' opacity='0.2' stroke-linecap='round'/%3E%3Cpath d='M55 0 C49 60, 61 130, 52 230 C46 340, 60 430, 54 540 C48 640, 59 730, 55 830 C50 920, 58 1020, 55 1100 C52 1160, 57 1190, 55 1200' stroke='%23a3c0d8' stroke-width='2.1' fill='none' opacity='0.17' stroke-linecap='round'/%3E%3Cpath d='M95 0 C100 50, 88 140, 97 260 C103 370, 89 470, 93 580 C98 690, 90 790, 95 890 C100 980, 91 1080, 95 1150 C98 1180, 93 1195, 95 1200' stroke='%23a3c0d8' stroke-width='2.6' fill='none' opacity='0.19' stroke-linecap='round'/%3E%3Cpath d='M135 0 C130 90, 141 170, 133 290 C127 400, 139 510, 136 620 C131 730, 138 830, 135 940 C132 1040, 137 1120, 135 1200' stroke='%23a3c0d8' stroke-width='1.9' fill='none' opacity='0.16' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 1200px;
  pointer-events: none;
  z-index: 0;
}

/* ============================================
   Postcard component
   ============================================ */

.postcard {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  box-shadow: 0 1px 8px rgba(44, 40, 37, 0.05), 0 4px 20px rgba(44, 40, 37, 0.03);
  padding: 40px 44px;
}

.postcard-tilted {
  transform: rotate(-0.6deg);
}

.postcard-tilt-right {
  transform: rotate(0.8deg);
}

.postcard-tilt-slight {
  transform: rotate(-0.3deg);
}

/* Stamp */
.postcard-stamp {
  width: 80px;
  height: 92px;
  padding: 8px;
  background: white;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.1));
  -webkit-mask-composite: destination-in;
  -webkit-mask-image:
    radial-gradient(circle 3px at 0 9px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 0 18px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 0 27px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 0 36px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 0 45px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 0 54px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 0 63px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 0 72px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 0 81px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 80px 9px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 80px 18px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 80px 27px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 80px 36px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 80px 45px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 80px 54px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 80px 63px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 80px 72px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 80px 81px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 9px 0, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 18px 0, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 27px 0, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 36px 0, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 45px 0, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 54px 0, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 63px 0, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 72px 0, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 9px 92px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 18px 92px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 27px 92px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 36px 92px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 45px 92px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 54px 92px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 63px 92px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 72px 92px, transparent 2.5px, black 3px);
  mask-composite: intersect;
  mask-image:
    radial-gradient(circle 3px at 0 9px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 0 18px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 0 27px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 0 36px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 0 45px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 0 54px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 0 63px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 0 72px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 0 81px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 80px 9px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 80px 18px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 80px 27px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 80px 36px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 80px 45px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 80px 54px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 80px 63px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 80px 72px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 80px 81px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 9px 0, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 18px 0, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 27px 0, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 36px 0, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 45px 0, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 54px 0, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 63px 0, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 72px 0, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 9px 92px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 18px 92px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 27px 92px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 36px 92px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 45px 92px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 54px 92px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 63px 92px, transparent 2.5px, black 3px),
    radial-gradient(circle 3px at 72px 92px, transparent 2.5px, black 3px);
}

.postcard-stamp img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.3);
  display: block;
}

/* ============================================
   Hub
   ============================================ */

.hub {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.35s ease, transform 0.35s ease;
  overflow: hidden;
  padding: 0 24px;
}

.hub.dimmed {
  pointer-events: none;
}

.hub.dimmed .hub-inner {
  animation: postcardOut 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes postcardOut-left {
  to { opacity: 0; transform: translateX(-200px) rotate(-12deg) scale(0.9); }
}
@keyframes postcardOut-right {
  to { opacity: 0; transform: translateX(200px) rotate(12deg) scale(0.9); }
}
@keyframes postcardOut-up {
  to { opacity: 0; transform: translateY(-200px) rotate(-6deg) scale(0.9); }
}
@keyframes postcardOut-down {
  to { opacity: 0; transform: translateY(200px) rotate(6deg) scale(0.9); }
}

.hub-inner {
  position: relative;
  z-index: 1;
  max-width: min(580px, calc(100vw - 48px));
  box-sizing: border-box;
}

/* Postcard layout — message left, address right */

.postcard-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.postcard-left {
  border-right: 1px solid var(--border-light);
  padding-right: 24px;
  display: flex;
  align-items: center;
}

.postcard-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
}

.hub-name-block {
  text-align: right;
  width: 100%;
}

.postcard-lines {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.postcard-line {
  height: 1px;
  background: var(--border);
  width: 100%;
}

.postcard-line:last-child {
  width: 60%;
  margin-left: auto;
}

.hub-name {
  font-family: var(--handwritten);
  font-size: clamp(1.5rem, 3.5vw, 1.75rem);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.hub-subtitle {
  font-family: var(--body-serif);
  font-size: 0.875rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  margin-bottom: 0;
}

.hub-about {
  font-family: var(--body-serif);
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.hub-nav {
  display: flex;
  justify-content: space-between;
}

.hub-link {
  font-family: var(--body-serif);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s ease;
  letter-spacing: 0.01em;
}

.hub-link:hover {
  color: var(--text);
}

/* ============================================
   Panels
   ============================================ */

.panel {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s 0.3s;
}

.panel.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s;
}

/* Panel content cards animate in */
.panel .postcard,
.panel .writing-cards,
.panel .connect-cards {
  opacity: 0;
  transform: translateX(100px) rotate(3deg);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.panel.active .postcard,
.panel.active .writing-cards,
.panel.active .connect-cards {
  opacity: 1;
  transform: translateX(0) rotate(0deg);
}

/* Stagger the cards */
.panel.active .postcard:nth-child(1),
.panel.active .writing-cards > :nth-child(1) { transition-delay: 0.05s; }
.panel.active .postcard:nth-child(2),
.panel.active .writing-cards > :nth-child(2) { transition-delay: 0.1s; }
.panel.active .postcard:nth-child(3),
.panel.active .writing-cards > :nth-child(3) { transition-delay: 0.15s; }
.panel.active .postcard:nth-child(4) { transition-delay: 0.2s; }

.panel-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px clamp(24px, 5vw, 80px);
  background: rgba(244, 241, 236, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light);
  position: relative;
}

.panel-back {
  position: absolute;
  left: clamp(24px, 5vw, 80px);
  font-family: var(--body-serif);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.2s ease;
}

.panel-back:hover {
  color: var(--text);
}

.panel-title {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.panel-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px clamp(24px, 5vw, 80px) 80px;
}

/* ============================================
   Writing panel — postcards for each section
   ============================================ */

.writing-cards {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.writing-card {
  padding: 32px 36px;
}

.writing-card h2 {
  font-family: var(--body-serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

/* Status tag */
.status-tag {
  font-family: var(--body-serif);
  font-size: 0.8125rem;
  font-weight: 400;
  font-style: italic;
  color: var(--text-muted);
}

/* ============================================
   Item list (used inside cards)
   ============================================ */

.item-list {
  display: flex;
  flex-direction: column;
}

.item-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--border-light);
  text-decoration: none;
  transition: background 0.15s ease;
}

.item-row:last-child {
  border-bottom: 1px solid var(--border-light);
}

a.item-row {
  cursor: pointer;
}

a.item-row:hover {
  background: rgba(44, 40, 37, 0.02);
  margin: 0 -12px;
  padding: 14px 12px;
  border-radius: 4px;
  border-color: transparent;
}

a.item-row:hover + .item-row,
a.item-row:hover + a.item-row {
  border-top-color: transparent;
}

.item-row h3 {
  font-family: var(--body-serif);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text);
}

.item-row p {
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.item-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.item-arrow {
  color: var(--text-muted);
  font-size: 0.875rem;
  flex-shrink: 0;
  margin-top: 4px;
  transition: transform 0.2s ease, color 0.2s ease;
}

a.item-row:hover .item-arrow {
  transform: translateX(3px);
  color: var(--text);
}

/* ============================================
   Expandable poster item
   ============================================ */

.item-row-expandable {
  flex-direction: column;
  gap: 0;
}

.item-row-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  cursor: pointer;
}

.item-row-top .accordion-icon {
  margin-top: 4px;
  transition: transform 0.2s ease;
}

.item-row-expandable.open .item-row-top .accordion-icon {
  transform: rotate(45deg);
}

.poster-dropdown {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.item-row-expandable.open .poster-dropdown {
  max-height: 500px;
  padding-top: 16px;
}

.poster-link {
  display: block;
  text-decoration: none;
  max-width: 240px;
  border-radius: 4px;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.poster-link:hover {
  opacity: 0.9;
}

.poster-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================
   Experience — four column postcards
   ============================================ */

.exp-wide {
  max-width: 1100px !important;
}

.experience-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  align-items: start;
  grid-auto-rows: min-content;
}

.experience-columns.four-col {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.exp-card {
  padding: 28px 24px;
}

.exp-card h2 {
  font-family: var(--body-serif);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

/* ============================================
   Accordion
   ============================================ */

.accordion-list {
  display: flex;
  flex-direction: column;
}

.accordion-item {
  border-top: 1px solid var(--border-light);
}

.accordion-item:last-child {
  border-bottom: 1px solid var(--border-light);
}

.accordion-toggle {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 12px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
}

.accordion-toggle:focus {
  outline: none;
}

.accordion-toggle:hover .accordion-name {
  color: var(--text);
}

.accordion-name {
  font-family: var(--body-serif);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
  flex: 1;
  transition: color 0.2s ease;
}

.accordion-date {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
  margin-left: 6px;
}

.accordion-icon {
  font-size: 0.875rem;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}

.accordion-item.open .accordion-icon {
  transform: rotate(45deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0;
}

.accordion-item.open .accordion-content {
  max-height: 500px;
  padding: 0 0 16px 0;
}

.accordion-role {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.accordion-content p {
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.inline-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--border);
}

.inline-link:hover {
  text-decoration-color: var(--text);
}

/* ============================================
   Connect — scattered postcards
   ============================================ */

.connect-cards {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.connect-postcard {
  width: 180px;
  padding: 28px 24px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.2s ease;
}

.connect-postcard:hover {
  box-shadow: 0 4px 24px rgba(44, 40, 37, 0.08);
}

.connect-postcard:nth-child(1) { transform: rotate(-1.5deg); }
.connect-postcard:nth-child(2) { transform: rotate(0.8deg); }
.connect-postcard:nth-child(3) { transform: rotate(-0.5deg); }

.connect-name {
  font-family: var(--body-serif);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--text);
}

.connect-handle {
  font-family: var(--body-serif);
  font-size: 0.875rem;
  color: var(--text-muted);
}

.connect-intro {
  font-family: var(--body-serif);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 36px;
  text-align: center;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 960px) {
  .experience-columns,
  .experience-columns.four-col {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .experience-columns > *,
  .experience-columns.four-col > * {
    flex: 1 1 calc(50% - 10px);
    min-width: calc(50% - 10px);
  }
}

@media (max-width: 600px) {
  .experience-columns,
  .experience-columns.four-col {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  .experience-columns > *,
  .experience-columns.four-col > * {
    flex: 1 1 100%;
  }

  .hub-inner {
    max-width: 85vw;
    margin: 0 auto;
  }

  .postcard {
    padding: 24px 20px;
  }

  .postcard-tilted {
    transform: rotate(-0.3deg);
  }

  .postcard-layout {
    gap: 12px;
  }

  .hub-name {
    font-size: 1.2rem;
  }

  .postcard-layout {
    gap: 12px;
  }

  .hub-name {
    font-size: 1.2rem;
  }

  .hub-nav {
    justify-content: center;
    gap: 20px;
  }

  .connect-cards {
    flex-direction: column;
    align-items: center;
  }
}