:root {
  --ink: #441306;
  --paper: #fff8ef;
  --coral: #c53c00;
  --yellow: #ff9000;
  --blue: #ffb96d;
  --green: #783200;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Sans", sans-serif;
  overflow-x: hidden;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  z-index: 10;
}

.page-shell { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 28px 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand { color: inherit; text-decoration: none; transform: rotate(-2deg); }
.brand-mark { font: 700 27px/1 "Fredoka", sans-serif; letter-spacing: -1.5px; }
.brand-mark span { color: var(--coral); }

button { font: inherit; }
.top-note { color: #783200; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }

.hero {
  width: min(1180px, calc(100% - 48px));
  margin: auto;
  padding: 48px 0 70px;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 80px;
  align-items: center;
}

.eyebrow {
  display: flex;
  gap: 10px;
  align-items: center;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #783200;
}
.eyebrow span { width: 28px; height: 3px; background: var(--coral); border-radius: 3px; }

h1 {
  margin: 20px 0 18px;
  font: 700 clamp(44px, 5.7vw, 78px)/.98 "Fredoka", sans-serif;
  letter-spacing: -3.5px;
}
h1 em { color: var(--coral); font-style: normal; position: relative; white-space: nowrap; }
h1 em::after {
  content: "";
  position: absolute;
  left: 2%; right: -2%; bottom: -7px;
  height: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'%3E%3Cpath d='M2 8 C45 1 91 12 198 4' fill='none' stroke='%23c53c00' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}

.intro { max-width: 610px; color: #783200; font-size: 17px; line-height: 1.65; }

.countdown { display: flex; align-items: center; gap: 10px; margin: 36px 0 28px; }
.time-card {
  width: 112px;
  aspect-ratio: 1 / .92;
  border: 2px solid var(--ink);
  border-radius: 14px 17px 13px 16px;
  box-shadow: 5px 6px 0 var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: rotate(-1deg);
}
.time-card:nth-of-type(even) { transform: rotate(1.2deg); }
.time-card strong { font: 700 clamp(34px, 4vw, 52px)/.9 "Fredoka", sans-serif; letter-spacing: -2px; }
.time-card span { margin-top: 9px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; }
.time-card.coral { background: var(--coral); color: white; }
.time-card.yellow { background: var(--yellow); }
.time-card.blue { background: var(--blue); }
.time-card.cream { background: #ffd7a8; }
.colon { font: 700 28px "Fredoka"; }

.status-line { display: flex; align-items: center; gap: 13px; color: #783200; font-weight: 600; font-style: italic; }
.status-line p { margin: 0; }
.status-icon { width: 38px; height: 38px; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--ink); border-radius: 50%; font-style: normal; }

.portrait-column { position: relative; display: flex; flex-direction: column; align-items: center; }
.photo-frame {
  width: min(330px, 80vw);
  padding: 17px 17px 112px;
  background: #fffdf8;
  border: 2px solid var(--ink);
  box-shadow: 13px 15px 0 #ffb96d;
  transform: rotate(3deg);
  position: relative;
}
.photo-placeholder {
  aspect-ratio: 1;
  background: #ffd7a8;
  border: 1.5px solid var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #9f2d00;
  overflow: hidden;
}
.photo-placeholder img { width: 100%; height: 100%; object-fit: cover; }
.placeholder-icon { font: 700 86px/1 "Fredoka"; transform: rotate(-5deg); }
.placeholder-text { margin-top: 10px; text-align: center; font: 700 16px/1.2 "Fredoka"; text-transform: uppercase; letter-spacing: 1px; }
.tape { position: absolute; width: 100px; height: 28px; background: rgba(247,191,61,.72); top: -16px; left: 50%; transform: translateX(-50%) rotate(-3deg); z-index: 2; }
.name-tag { position: absolute; left: 25px; right: 20px; bottom: 17px; display: flex; flex-direction: column; transform: rotate(-2deg); }
.name-tag strong { font: 700 28px "Fredoka"; }
.role-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.role-badge {
  display: inline-flex;
  width: fit-content;
  padding: 3px 7px;
  color: #783200;
  background: #ffd7a8;
  border: 1px solid #783200;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}
.photo-hint { margin-top: 32px; color: #9f2d00; font-size: 12px; }
.scribble { position: absolute; font: 700 58px "Fredoka"; color: var(--yellow); z-index: 2; }
.scribble-one { right: -8px; top: -58px; transform: rotate(15deg); }
.scribble-two { left: -28px; bottom: 65px; color: var(--coral); transform: rotate(-25deg); }

.farewell-strip {
  min-height: 58px;
  padding: 13px 24px;
  background: var(--ink);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  font-size: 13px;
}
.farewell-strip p { margin: 0; }
.farewell-strip strong { color: var(--yellow); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 70px; padding-top: 30px; }
  .copy-column { text-align: center; }
  .eyebrow, .countdown, .status-line { justify-content: center; }
  .intro { margin-left: auto; margin-right: auto; }
}

@media (max-width: 600px) {
  .topbar, .hero { width: min(100% - 28px, 1180px); }
  .topbar { padding-top: 20px; }
  .top-note { font-size: 9px; letter-spacing: 1px; }
  .hero { padding: 30px 0 55px; }
  h1 { font-size: 43px; letter-spacing: -2px; }
  .intro { font-size: 15px; }
  .countdown { gap: 5px; margin-left: -4px; margin-right: -4px; }
  .time-card { width: calc((100vw - 72px) / 4); max-width: 90px; box-shadow: 3px 4px 0 var(--ink); border-radius: 10px; }
  .time-card strong { font-size: clamp(26px, 8vw, 38px); }
  .time-card span { font-size: 8px; letter-spacing: .7px; }
  .colon { font-size: 19px; }
  .farewell-strip { flex-wrap: wrap; gap: 5px 12px; text-align: center; }
  .farewell-strip > span { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .photo-frame { animation: float 4s ease-in-out infinite; }
  @keyframes float { 0%, 100% { transform: rotate(3deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-9px); } }
}