/* Titus 50: Maritime meets Amalfi. Phone first. Ivory ground, navy text, gold and lemon only as accents.
   Colours live in the tokens below; nothing else in this file sets a colour literal except the error red. */
/* Fonts are self-hosted in /fonts. Type roles follow the artwork: brush script for "Titus", spaced capitals for "Happy Birthday", gold display serif for "50". */
@font-face {
  font-family: "Cinzel";
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/cinzel-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cinzel";
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/cinzel-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/playfair-display-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Kaushan Script";
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/kaushan-script-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/dm-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/dm-sans-latin-700-normal.woff2") format("woff2");
}
:root {
  --titus-navy: #063b73;
  --mediterranean-blue: #0878b9;
  --sea-blue: #13a0d1;
  --amalfi-lemon: #f5c62b;
  --titus-gold: #c89122;
  --amalfi-cream: #fff4cf;
  --warm-ivory: #fffbf1;
  --citrus-leaf: #315c35;
  --soft-sand: #e9d6a7;
  --white: #ffffff;
  --error: #a3261b;
  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --caps: Cinzel, "Trajan Pro", Georgia, serif;
  --display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --script: "Kaushan Script", "Segoe Script", "Brush Script MT", cursive;
  --radius: 22px;
}
* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--warm-ivory) radial-gradient(ellipse at 50% -10%, var(--amalfi-cream), var(--warm-ivory) 55%) no-repeat;
  color: var(--titus-navy);
  font: 17px/1.55 var(--sans);
}
.wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 28px 18px calc(36px + env(safe-area-inset-bottom));
}
h1,
h2 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--titus-navy);
  line-height: 1.12;
  font-variant-numeric: lining-nums; /* Cormorant and Playfair default to old-style figures */
}
h1 {
  margin: 0 0 14px;
  font-size: 2rem;
  font-style: italic;
  font-weight: 600;
}
h2 {
  margin: 0 0 10px;
  font-size: 1.7rem;
}
.script {
  font-family: var(--script);
  font-weight: 400;
}

/* Hero: emblem above on phones, beside the message on wide screens */
.hero {
  display: grid;
  gap: 20px;
  justify-items: center;
  text-align: center;
  padding: 4px 0 8px;
}
.emblem {
  width: min(78vw, 300px);
  height: auto;
  border-radius: 50%; /* the artwork is a circle on a white square */
  box-shadow: 0 10px 34px rgba(6, 59, 115, 0.18);
  animation: reveal 0.9s ease both;
}
.emblem-small {
  width: 88px;
  margin: 0 auto 8px;
  display: block;
  animation: none;
}
.eyebrow {
  margin: 0 0 14px;
  line-height: 1;
}
.eyebrow .hb {
  display: block;
  margin-bottom: 4px;
  font-family: var(--caps);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.eyebrow .script {
  font-size: 3.4rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.fifty {
  margin-left: 0.12em; /* keeps the script "s" from running into the 5 */
  font-family: var(--display);
  font-weight: 700;
  font-variant-numeric: lining-nums;
  font-size: 3.2rem;
  color: var(--titus-gold); /* large display type only */
}
.lead {
  margin: 0 0 20px;
  font-size: 1.1rem;
}
.deadline {
  margin: 16px 0 0;
  font-family: var(--caps);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.rule {
  height: 6px;
  margin: 26px auto;
  max-width: 220px;
  border-top: 1px solid var(--titus-gold);
  border-bottom: 1px solid var(--titus-gold);
}
@media (min-width: 820px) {
  .wrap {
    max-width: 960px;
  }
  .hero {
    grid-template-columns: 1.15fr 1fr;
    text-align: left;
    gap: 48px;
    padding-top: 28px;
  }
  .hero .emblem {
    grid-column: 2;
    grid-row: 1;
    width: min(100%, 440px);
  }
  .hero-text {
    grid-column: 1;
    grid-row: 1;
  }
  h1 {
    font-size: 2.7rem;
  }
  .eyebrow .script {
    font-size: 4.6rem;
  }
  .fifty {
    font-size: 4.4rem;
  }
  #form-view,
  #progress-view,
  #done-view,
  #error-view {
    max-width: 620px;
    margin-inline: auto;
  }
}

/* Surprise callout: playful, not a warning */
.secret {
  display: inline-block;
  margin: 18px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--soft-sand);
  border-left: 4px solid var(--titus-gold);
  border-radius: 14px;
  background: var(--amalfi-cream);
  color: var(--titus-navy);
  font-size: 15px;
  text-align: left;
}
.secret-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--titus-navy);
  color: var(--amalfi-lemon);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Cards */
.card {
  background: var(--white);
  border: 1px solid var(--soft-sand);
  border-radius: var(--radius);
  padding: 26px 22px;
  box-shadow: 0 6px 24px rgba(6, 59, 115, 0.06);
  animation: reveal 0.5s ease both;
}
label {
  display: block;
  margin: 22px 0 6px;
  font-weight: 700;
  color: var(--titus-navy);
}
.optional {
  font-weight: 400;
}
input[type="text"],
textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--soft-sand);
  border-radius: 14px;
  background: var(--warm-ivory);
  color: var(--titus-navy);
  font: inherit;
  font-size: 17px; /* 16px or more: iPhones do not zoom in */
}
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--mediterranean-blue);
  outline-offset: 1px;
  border-color: var(--mediterranean-blue);
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--mediterranean-blue);
  outline-offset: 3px;
}
::placeholder {
  color: var(--titus-navy);
  opacity: 0.55;
}
[aria-invalid="true"] {
  border-color: var(--error) !important;
}
.hint {
  margin: 0 0 10px;
  font-size: 15.5px;
}
.tip {
  margin-top: 10px;
  font-size: 14.5px;
}
.small {
  margin: 14px 0 0;
  font-size: 14px;
  text-align: center;
}
.field-error {
  margin: 6px 0 0;
  color: var(--error);
  font-size: 15px;
  font-weight: 700;
}
.field-error:empty {
  display: none;
}
.notice {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-left: 4px solid var(--error);
  border-radius: 10px;
  background: var(--amalfi-cream);
  color: var(--titus-navy);
}

/* Upload area: the whole tile is the tap target for the hidden file input */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
.upload-area {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: 18px 0 0;
  padding: 28px 16px;
  min-height: 150px;
  border: 2px dashed var(--titus-gold);
  border-radius: var(--radius);
  background: var(--amalfi-cream);
  text-align: center;
  cursor: pointer;
  transition: background 0.2s;
}
.upload-area:hover,
.upload-area:active {
  background: var(--soft-sand);
}
.upload-area:has(+ .visually-hidden:focus-visible) {
  outline: 3px solid var(--mediterranean-blue);
  outline-offset: 3px;
}
.icon {
  color: var(--titus-navy);
}
.upload-title {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 700;
}
.upload-sub {
  font-size: 15px;
}
.upload-file {
  margin-top: 6px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--soft-sand);
  font-size: 14px;
  font-weight: 700;
  word-break: break-all;
}
.preview {
  margin-top: 12px;
}
.preview video {
  display: block;
  width: 100%;
  max-height: 50vh;
  border: 3px solid var(--titus-navy);
  border-radius: 16px;
  background: var(--titus-navy);
}

/* Buttons */
.btn {
  display: block;
  width: 100%;
  min-height: 56px;
  margin-top: 24px;
  padding: 14px 20px;
  border: 1.5px solid var(--titus-navy);
  border-radius: 16px;
  font: inherit;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  line-height: 26px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.btn:active {
  transform: translateY(1px);
}
.btn-primary {
  background: var(--titus-navy);
  color: var(--warm-ivory);
  box-shadow: inset 0 -3px 0 var(--titus-gold);
}
.btn-primary:hover {
  background: var(--mediterranean-blue);
  border-color: var(--mediterranean-blue);
}
.btn-secondary {
  background: var(--warm-ivory);
  color: var(--titus-navy);
  border-color: var(--soft-sand);
}
.btn-secondary:hover {
  background: var(--amalfi-cream);
  border-color: var(--titus-navy);
}
.hero .btn {
  margin-top: 4px;
}
@media (min-width: 820px) {
  .hero .btn {
    display: inline-block;
    width: auto;
    padding-inline: 32px;
  }
}

/* Progress */
.bar {
  height: 14px;
  border-radius: 999px;
  background: var(--amalfi-cream);
  border: 1px solid var(--soft-sand);
  overflow: hidden;
}
.bar span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--sea-blue), var(--mediterranean-blue));
  transition: width 0.3s ease;
}

.done {
  text-align: center;
}
.lead-dark {
  font-size: 1.15rem;
  font-weight: 700;
}
.foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
  color: var(--titus-gold);
  font-size: 20px;
}
.rope {
  width: 70px;
  height: 0;
  border-top: 3px dotted var(--soft-sand);
}
[hidden] {
  display: none !important;
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}