:root{
  --cream: #faf4e6;
  --card-bg: #f3ecd6;
  --tape: #f2e6c3;
  --tape-shadow: rgba(91, 71, 26, 0.18);
  --pink: #f0aec2;
  --pink-deep: #dd8aa5;
  --lavender: #aca6d8;
  --sage: #a6d69d;
  --sage-deep: #6f9e63;
  --olive: #5e5f36;
  --olive-soft: #5e5f36;
  --ink: #3a3226;
  --focus: #6f9e63;
  --tape-ink: #5e5f36;
  --tape-ink-hover: #90c785;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --cream: #201b13;
    --card-bg: #2b2517;
    --tape: #3c3420;
    --tape-shadow: rgba(0, 0, 0, 0.45);
    --pink: #e6a3b9;
    --pink-deep: #c47f97;
    --lavender: #b6b0e0;
    --sage: #a9d69f;
    --sage-deep: #86c07a;
    --olive: #d9cf9d;
    --olive-soft: #c3b98d;
    --ink: #f2ecd9;
    --focus: #a9d69f;
  }
}

:root[data-theme="dark"]{
  --cream: #201b13;
  --card-bg: #2b2517;
  --tape: #3c3420;
  --tape-shadow: rgba(0, 0, 0, 0.45);
  --pink: #e6a3b9;
  --pink-deep: #c47f97;
  --lavender: #b6b0e0;
  --sage: #a9d69f;
  --sage-deep: #86c07a;
  --olive: #d9cf9d;
  --olive-soft: #c3b98d;
  --ink: #f2ecd9;
  --focus: #a9d69f;
}

*{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body{
  margin: 0;
  min-height: 100vh;
  background-color: var(--cream);
  color: var(--ink);
  font-family: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  padding: clamp(1.1rem, 1.5vw + 0.6rem, 2.2rem) clamp(1.1rem, 3vw, 3rem);
}

.page{
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}

a{ color: inherit; }
a:focus-visible, button:focus-visible{
  outline: 2.5px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.top-row{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.brand{
  display: inline-flex;
  text-decoration: none;
  transform: rotate(-1.4deg);
  transition: transform 0.2s ease;
}
.brand:hover, .brand:focus-visible{ transform: rotate(0deg); }

.brand-logo{
  display: block;
  height: clamp(30px, 2.6vw + 20px, 46px);
  width: auto;
  max-width: 60vw;
}

.tape-nav{
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-left: auto;
  background-image: url(tape.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 0.8rem 1.6rem;
  margin-top: 2px;
  transform: rotate(1.1deg);
  filter: drop-shadow(0 3px 4px var(--tape-shadow));
  font-family: "Work Sans", sans-serif;
}

.tape-nav a{
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(0.82rem, 0.4vw + 0.75rem, 0.92rem);
  letter-spacing: 0.02em;
  color: var(--tape-ink);
  white-space: nowrap;
  padding: 0.3rem 0.15rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.tape-nav a:hover, .tape-nav a[aria-current="page"]{ border-color: var(--tape-ink-hover); color: var(--tape-ink-hover); }

.nav-sep{
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tape-ink);
  opacity: 0.5;
  flex-shrink: 0;
}

main.hero, main.contact-main, main.about-main{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(1.5rem, 4vw, 3rem) 1rem;
  gap: clamp(0.6rem, 1.2vw, 1.1rem);
}

.character-wrap{
  display: inline-flex;
  margin-bottom: clamp(0.4rem, 1vw, 0.8rem);
}
.character{
  width: clamp(200px, 30vw, 340px);
  height: auto;
  display: block;
  animation: float 5s ease-in-out infinite;
}

@keyframes float{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

.headline{
  font-family: "Chelsea Market", ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 1.05rem + 2.6vw, 2.9rem);
  color: var(--olive);
  margin: 0;
  text-wrap: balance;
}

.squiggle{
  display: block;
  width: clamp(140px, 16vw, 210px);
  height: 24px;
  color: var(--sage-deep);
  margin: -0.3rem 0 0.05rem;
  overflow: visible;
}

.tagline{
  font-size: clamp(0.92rem, 0.4vw + 0.85rem, 1.05rem);
  font-style: italic;
  color: var(--olive-soft);
  max-width: 34ch;
  margin: 0;
  line-height: 1.5;
}

.foot{
  text-align: center;
  font-size: 0.78rem;
  color: var(--olive-soft);
  opacity: 0.75;
  padding-top: 1rem;
}
.foot p{ margin: 0; }

/* Contact page */
.contact-card{
  position: relative;
  background: var(--card-bg);
  border: 1.5px solid var(--lavender);
  border-radius: 14px;
  padding: 2.3rem 2rem 1.9rem;
  max-width: 380px;
  width: 100%;
  margin-top: 0.6rem;
  transform: rotate(-0.6deg);
  box-shadow: 0 8px 20px var(--tape-shadow);
  text-align: left;
}
.contact-card::before{
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--cream);
  border: 1.5px solid var(--lavender);
}

.org-name{
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--tape-ink);
  margin: 0 0 0.7rem;
}

.contact-address{
  font-style: normal;
  color: var(--olive-soft);
  line-height: 1.6;
  margin: 0 0 1.3rem;
}

.contact-note{
  font-size: 0.95rem;
  color: var(--olive-soft);
  line-height: 1.6;
  margin: 0;
}

.mail-link{
  color: var(--sage-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
.mail-link:hover, .mail-link:focus-visible{ color: var(--tape-ink-hover); }

.mail-row{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.copy-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--sage-deep);
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.copy-btn:hover{ color: var(--tape-ink-hover); background-color: rgba(144, 199, 133, 0.16); }

.copy-feedback{
  min-height: 1.2em;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sage-deep);
  margin: 0.4rem 0 0;
}

.mail-hint{
  font-size: 0.78rem;
  color: var(--olive-soft);
  opacity: 0.75;
  margin: 0.5rem 0 0;
  line-height: 1.5;
}

/* About page */
.about-copy{
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 58ch;
  width: 100%;
  margin-top: 0.4rem;
  text-align: left;
}

.about-copy p{
  margin: 0;
  color: var(--ink);
  font-size: clamp(0.95rem, 0.3vw + 0.88rem, 1.05rem);
  line-height: 1.7;
}

@media (prefers-reduced-motion: reduce){
  .character{ animation: none; }
  .brand, .tape-nav a{ transition: none; }
}

@media (max-width: 460px){
  .top-row{ gap: 0.7rem; }
  .tape-nav{ padding: 0.55rem 1rem; gap: 0.65rem; }
}