/* =========================================================
   HUNTRESS OF ART — réplica estática de la web Squarespace
   (plantilla Avenue 7.0) para Netlify.
   Tipografías originales: proxima-nova + futura-pt (Adobe Fonts).
   Si se añade un kit de Adobe Fonts en <head>, se usan solas;
   si no, caen a Montserrat + Jost (Google Fonts).
   ========================================================= */

:root {
  --bg: #fcfcfc;
  --text: #777;
  --heading: #222;
  --link: #111;
  --nav-muted: #999;
  --rule: #ddd;
  --hr: #bbb;
  --thumb-title: #707070;
  --thumb-bg: #eee;
  --btn-bg: #272727;
  --btn-text: #fff;
  --font-body: "proxima-nova", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "futura-pt", "Jost", "Futura", "Century Gothic", sans-serif;
  --content: 900px;
  --gutter: 17px;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { opacity: .75; }
strong { font-weight: 700; }

/* ---------- Canvas ---------- */
#canvas {
  max-width: calc(var(--content) + 150px);
  margin: 35px auto;
  padding: 75px;
}

/* ---------- Header ---------- */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 69px;
}
.logo { margin: 0; line-height: 0; }
.logo img { width: 368px; height: auto; }
.logo-subtitle {
  margin-top: 8.4px;
  color: var(--rule);
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 1px;
}
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 23px; }
.main-nav a {
  display: inline-block;
  padding: 26px 0;
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 26px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--nav-muted);
}
.main-nav a.active { color: var(--link); }

.mobile-menu-toggle { display: none; }

.page-divider { border-bottom: 1px solid var(--rule); }

#page { padding: 11px 0; }

/* ---------- Thumbnails grid (home) ---------- */
.thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 27px;
  row-gap: 28px;
  margin-top: 11px;
}
.thumb { display: block; color: var(--link); }
.thumb:hover { opacity: 1; }
.thumb-image {
  aspect-ratio: 437 / 371;
  background: var(--thumb-bg);
  overflow: hidden;
  margin-bottom: 13px;
}
.thumb-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .3s ease;
}
.thumb:hover .thumb-image img { opacity: .85; }
.thumb-title {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 19.2px;
  color: var(--thumb-title);
}

/* ---------- Project (opened) ---------- */
.project {
  display: grid;
  grid-template-columns: 335px 1fr;
  column-gap: 11px;
  align-items: start;
  margin-bottom: 34px;
}
.project-media img { width: 100%; height: auto; margin-bottom: 7px; }
.project-title,
.sqs-html h2 {
  margin: 0 0 9px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--heading);
}
.sqs-html h2 + h2 { margin-top: 18px; }
.project-description p,
.sqs-html p { margin: 0 0 14px; }
.project-description ul { margin: 14px 0; padding: 0 0 0 40px; }
.project-description li p { margin: 0; }
.project-description strong,
.sqs-html strong { color: var(--text); }
.project-description a strong,
.sqs-html a strong { color: var(--link); }
.sqs-html h2 strong { color: inherit; }

.project-controls {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
}
.project-controls .pager,
.project-controls .pager a { color: rgba(119,119,119,.5); }
.project-controls .pager a:hover { color: var(--link); opacity: 1; }

/* ---------- Block layout (page projects / contact) ---------- */
.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  margin: 0 calc(var(--gutter) * -1);
}
.col { padding: 0 var(--gutter) var(--gutter); }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

.block { margin-bottom: var(--gutter); }
.block-image img { width: 100%; height: auto; }
.block-spacer { height: 34px; }
hr {
  border: 0;
  height: 1px;
  background: var(--hr);
  margin: 14px 0;
}

.btn-wrap { margin: 0 0 var(--gutter); }
.btn-wrap.center { text-align: center; }
.btn {
  display: inline-block;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 13px 26px;
  line-height: normal;
}
.btn:hover { opacity: .8; color: var(--btn-text); }

.shop-row { margin-bottom: 0; }

/* ---------- Footer / newsletter ---------- */
.site-footer { margin-top: 50px; }
.newsletter {
  width: calc(50% + 17px);
  margin: 0 0 17px -17px;
  padding: 0 17px 17px;
}
.newsletter-inner {
  background: rgba(0,0,0,.05);
  padding: 34px 17px;
  color: #272727;
  font-size: 15px;
  text-align: center;
}
.newsletter h2 {
  margin: 0 0 17px;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
  color: #272727;
}
.newsletter p { margin: 0; }
.newsletter form {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 34px 0;
}
.newsletter input[type=email] {
  width: 244px;
  max-width: 100%;
  padding: 15px;
  font: 15px var(--font-body);
  color: #222;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 0;
}
.newsletter button {
  padding: 15px 33.75px;
  font: 15px var(--font-body);
  text-transform: uppercase;
  color: #fff;
  background: var(--btn-bg);
  border: 1px solid var(--btn-bg);
  border-radius: 0;
  cursor: pointer;
}
.newsletter button:hover { opacity: .85; }
.newsletter .footnote { font-size: 15px; }
.newsletter .thanks { display: none; margin: 34px 0; }
.newsletter.sent form { display: none; }
.newsletter.sent .thanks { display: block; }
.hidden-field { position: absolute; left: -9999px; }
.site-info pre { margin: 0; white-space: pre-wrap; }
.site-info code { font-family: monospace, monospace; font-size: 14px; color: var(--text); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  #canvas { padding: 40px 25px; margin: 0 auto; }
}

@media (max-width: 760px) {
  #canvas { padding: 0 25px 40px; }
  .mobile-menu-toggle {
    display: block;
    width: 100%;
    padding: 18px 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text);
    cursor: pointer;
  }
  .site-header { flex-direction: column; align-items: center; text-align: center; margin: 40px 0 40px; }
  .logo img { width: 260px; margin: 0 auto; }
  .logo-subtitle { margin-top: 32px; }
  .site-header .main-nav { display: none; }
  .mobile-nav { display: none; border-bottom: 1px solid var(--rule); }
  .mobile-nav.open { display: block; }
  .mobile-nav ul { list-style: none; margin: 0; padding: 10px 0; text-align: center; }
  .mobile-nav a {
    display: block;
    padding: 10px 0;
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--nav-muted);
  }
  .mobile-nav a.active { color: var(--link); }

  .project { grid-template-columns: 1fr; row-gap: 20px; }
  .project-media:empty { display: none; }
  .row { grid-template-columns: 1fr; }
  .span-4, .span-5, .span-7, .span-8, .span-12 { grid-column: 1 / -1; }
  .newsletter { width: auto; margin-left: 0; padding: 0 0 17px; }
}
@media (min-width: 761px) { .mobile-nav, .mobile-menu-toggle { display: none !important; } }

@media (max-width: 480px) {
  .thumbs { grid-template-columns: 1fr; }
  .newsletter form { flex-direction: column; align-items: stretch; }
  .newsletter input[type=email] { width: 100%; }
}