.templates-page { background: #0a0d0c; color: #f2f0e9; }
.templates-page main { overflow: clip; }
.template-library { font-family: "Manrope", system-ui, sans-serif; }
.template-eyebrow { margin: 0; color: #d4bc86; font-size: .72rem; font-weight: 700; letter-spacing: .18em; }

.template-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(245px, .3fr);
  gap: clamp(2rem, 7vw, 8rem);
  align-items: end;
  min-height: min(780px, 92svh);
  padding: clamp(9rem, 17vw, 14rem) clamp(1.4rem, 6vw, 6rem) clamp(5rem, 8vw, 8rem);
  border-bottom: 1px solid #31382f;
  background: radial-gradient(ellipse at 75% 24%, #394537 0, #18231e 24%, transparent 56%), #0a0d0c;
}
.template-hero h1 {
  max-width: 11.5ch;
  margin: 1.6rem 0 2rem;
  font-size: clamp(3.8rem, 7.6vw, 9rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.075em;
}
.template-hero h1 em { color: #d3be90; font-family: "Instrument Serif", Georgia, serif; font-weight: 400; letter-spacing: -.035em; }
.template-hero__lede { max-width: 44rem; margin: 0; color: #bcc6ba; font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.75; }
.template-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 2.6rem; }
.template-hero__actions a,
.template-contact a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  min-height: 52px;
  padding: .9rem 1.25rem;
  color: #121713;
  background: #e8e4d7;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}
.template-hero__actions a:hover,
.template-contact a:hover { background: #d3be90; transform: translateY(-2px); }
.template-hero__actions > span { color: #9fac9e; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.template-hero__note { display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; padding: 1.4rem; border: 1px solid #687462; background: #202b23bb; }
.template-hero__note-index { color: #d5bf91; font-size: .75rem; letter-spacing: .15em; }
.template-hero__note p { margin: 2rem 0; font: italic clamp(1.5rem, 2.2vw, 2.4rem)/1.2 "Instrument Serif", Georgia, serif; }
.template-hero__note > span:last-child { color: #aab6a5; font-size: .62rem; font-weight: 700; letter-spacing: .16em; }

.template-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 clamp(1.4rem, 6vw, 6rem); background: #d3be90; color: #172019; }
.template-guide > div { display: flex; align-items: center; gap: 1.2rem; min-height: 92px; padding: 1.2rem 0; }
.template-guide > div + div { padding-left: 2rem; border-left: 1px solid #876e48; }
.template-guide span { font-size: .75rem; opacity: .7; }
.template-guide strong { font-size: clamp(.84rem, 1.15vw, 1rem); font-weight: 700; }

.template-collection { padding: clamp(5rem, 9vw, 9rem) clamp(1.4rem, 6vw, 6rem); }
.template-collection__head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 3rem; }
.template-collection h2 { max-width: 14ch; margin: 1rem 0 0; font-size: clamp(2.8rem, 5.2vw, 6rem); font-weight: 500; line-height: 1.02; letter-spacing: -.065em; }
.template-collection__head > p { max-width: 29rem; margin: 0; color: #aab6a9; font-size: .96rem; line-height: 1.75; }
.template-filters { display: flex; flex-wrap: wrap; gap: .65rem; margin: 0 0 1.8rem; }
.template-filters button { display: inline-flex; gap: .8rem; align-items: center; padding: .7rem 1rem; border: 1px solid #576256; border-radius: 999px; background: transparent; color: #d8dfd6; font: 700 .82rem "Manrope", system-ui, sans-serif; cursor: pointer; }
.template-filters button:hover, .template-filters button[aria-pressed="true"] { border-color: #d3be90; background: #d3be90; color: #172019; }
.template-filters button span { opacity: .7; font-size: .72rem; }
.template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.template-card { display: flex; flex-direction: column; min-width: 0; padding: .7rem; border: 1px solid #2f3930; background: #151b17; transition: border-color .2s ease, transform .2s ease; }
.template-card[hidden] { display: none; }
.template-card:hover { border-color: #a79770; transform: translateY(-3px); }
.template-card__image { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: radial-gradient(circle at 70% 25%, #435344, #222921 58%, #141a16); }
.template-card__image :is(img, video) { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.template-card__motion { opacity: 0; transition: opacity .25s ease; }
.template-card__motion.is-active { opacity: 1; }
.template-card__placeholder { display: grid; place-items: center; width: 100%; height: 100%; padding: 1.5rem; color: #d3be90; font: italic clamp(1.4rem, 2.2vw, 2.2rem)/1.1 "Instrument Serif", Georgia, serif; text-align: center; }
.template-card__meta { display: flex; justify-content: space-between; gap: 1rem; margin: 1.15rem .55rem .4rem; color: #c9b78d; font-size: .67rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.template-card h3 { margin: .45rem .55rem; font-size: clamp(1.35rem, 1.8vw, 1.8rem); font-weight: 600; line-height: 1.22; letter-spacing: -.04em; }
.template-card > p { min-height: 4.9em; margin: .25rem .55rem 1rem; color: #aeb9ab; font-size: .86rem; line-height: 1.65; }
.template-card__source { display: flex; justify-content: space-between; gap: .8rem; margin: auto .55rem 0; padding: .95rem 0; border-top: 1px solid #39443a; color: #aeb9ab; font-size: .72rem; }
.template-card__source strong { color: #e9e6db; }
.template-card__actions { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin: 0 .55rem .3rem; }
.template-card__download { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.2rem; min-height: 46px; padding: .7rem 1rem; color: #142018; background: #d3be90; border-radius: 999px; font-size: .8rem; font-weight: 700; text-decoration: none; }
.template-card__download:hover { background: #efe5ca; }
.template-card__download span { font-size: 1.05rem; }
.template-card__pending { display: inline-flex; min-height: 46px; align-items: center; color: #aeb9ab; font-size: .77rem; }

.template-contact { padding: clamp(5rem, 9vw, 9rem) clamp(1.4rem, 6vw, 6rem); border-top: 1px solid #6b735e; background: #273428; }
.template-contact h2 { max-width: 15ch; margin: 1.5rem 0; font-size: clamp(2.8rem, 5.5vw, 6.5rem); font-weight: 500; line-height: 1.02; letter-spacing: -.065em; }
.template-contact > p:not(.template-eyebrow) { max-width: 38rem; margin: 0 0 2rem; color: #c4d0bf; line-height: 1.75; }
.templates-page .page-footer { border-top: 1px solid #31382f; background: #0a0d0c; color: #d6dbd2; }
.templates-page .page-footer__links a { color: #a8b3a7; }
.templates-page .page-footer__links a:hover { color: #fff; }
.templates-page :is(.template-library a, .page-footer a):focus-visible { outline: 2px solid #d3be90; outline-offset: 4px; }

@media (max-width: 1050px) {
  .template-hero { grid-template-columns: minmax(0, 1fr) minmax(200px, .35fr); }
  .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .template-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 9rem; }
  .template-hero__note { min-height: 0; max-width: 100%; }
  .template-hero__note p { margin: 1.5rem 0; }
  .template-guide { grid-template-columns: 1fr; }
  .template-guide > div { min-height: 60px; }
  .template-guide > div + div { padding-left: 0; border-left: 0; border-top: 1px solid #876e48; }
  .template-collection__head { display: block; }
  .template-collection__head > p { margin-top: 1.25rem; }
  .template-grid { grid-template-columns: 1fr; }
  .template-card > p { min-height: 0; }
  .templates-page .page-footer { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .template-library a, .template-card, .template-card__motion { transition: none; }
  .template-hero__actions a:hover, .template-contact a:hover, .template-card:hover { transform: none; }
}