/* style.css */

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

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "EB Garamond", serif;
  background: #F4F2EC; /* warm cream */
  color: #1A1A1A;      /* ink */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------------
   LAYOUT
------------------------------ */
.wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 42px 22px 54px;
  text-align: center;
}

/* ------------------------------
   LOGO
------------------------------ */
.header {
  margin-bottom: 18px;
}

.logo img {
  width: 76px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ------------------------------
   TYPOGRAPHY
------------------------------ */
.intro p {
  margin: 14px auto 18px;
  font-size: 1.15rem;
}

.muted {
  color: #7a8270;
}

a {
  color: inherit;
  text-decoration: none;
}

/* consistent hover language */
a:hover {
  color: #8B775A;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------
   EMAIL (tap to copy)
------------------------------ */
.contact {
  margin: 14px 0 12px;
}

.email {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 10px 0 6px;
  cursor: pointer;

  font: inherit;
  color: inherit;

  border-bottom: 1px solid rgba(26,26,26,0.35);
}

.email:focus {
  outline: none;
  border-bottom-color: #8B775A;
}

.emailHint {
  display: block;
  margin-top: 6px;
  font-size: 0.95rem;
  color: #7a8270;
}

/* copied state */
.email.copied {
  border-bottom-color: #5E6B54;
}

/* ------------------------------
   SOCIAL LINKS
------------------------------ */
.socials {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 12px 0 26px;
}

.socials a {
  font-size: 1.02rem;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.socials a:hover {
  border-bottom-color: #8B775A;
  text-decoration: none;
}

/* ------------------------------
   MAIN LINKS (list style)
------------------------------ */
.links {
  margin-top: 4px;
  border-top: 1px solid rgba(26,26,26,0.18);
}

.links a {
  display: block;
  padding: 16px 8px;
  font-size: 1.12rem;
  letter-spacing: 0.01em;

  border-bottom: 1px solid rgba(26,26,26,0.18);

  /* subtle tap highlight feel */
  transition: background-color 160ms ease, color 160ms ease;
}

.links a:hover {
  background: rgba(94, 107, 84, 0.06); /* moss wash */
  text-decoration: none;
}

.links a:active {
  background: rgba(139, 119, 90, 0.10);
}

/* optional: small note under links */
.note {
  margin-top: 14px;
  font-size: 0.98rem;
  color: #7a8270;
}

/* ------------------------------
   FOOTER
------------------------------ */
.footer {
  margin-top: 26px;
  color: #9ea88f;
  font-size: 0.85rem;
}

/* ------------------------------
   SMALL SCREENS
------------------------------ */
@media (max-width: 380px) {
  .wrap {
    padding-top: 34px;
  }
  .intro p {
    font-size: 1.08rem;
  }
  .links a {
    padding: 15px 8px;
    font-size: 1.08rem;
  }
}

/* --- Tuning / polish --- */

/* slightly smaller canvas so it feels less empty */
.wrap{
  max-width: 520px;
  padding: 36px 22px 48px;
}

/* logo looks less “floating” */
.logo img{
  width: 68px;
  opacity: 0.95;
}

/* intro tighter */
.intro p{
  margin: 10px auto 14px;
}

/* make the divider list feel like a designed menu */
.links{
  max-width: 420px;      /* shorten the rules */
  margin: 6px auto 0;    /* center within the page */
}

/* make items feel more clickable while staying minimal */
.links a{
  font-size: 1.08rem;
  letter-spacing: 0.005em;
}

/* lighter dividers */
.links,
.links a{
  border-color: rgba(26,26,26,0.14);
}

/* better hover without looking like a “button” */
.links a:hover{
  background: rgba(94, 107, 84, 0.045);
}

/* Email line layout */
.email{
  display: inline-flex;
  align-items: center;
  gap: 10px;              /* space between email + hint */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Keep email visually dominant */
.emailText{
  font-size: 1rem;
}

/* Make hint clearly secondary */
.emailHint{
  font-size: 0.78rem;
  color: #8a8a8a;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

/* Copied state */
.email.copied .emailHint{
  color: #5E6B54; /* your moss tone */
}