/* =============================================================================
   Vastocielo LLC — v0.1 identity site
   Concept: Architectural — numbered sections, full-bleed hairlines.
   Static HTML/CSS, mobile-first, deployable to any static host.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* Color */
  --bg:         #F5F1EA;             /* warm bone off-white */
  --ink:        #1A1714;             /* warm near-black */
  --ink-muted:  #5C544A;             /* warm gray, for tertiary text */
  --accent:     #5B5A8A;             /* muted dusk violet-blue */
  --rule-soft:  rgba(26, 23, 20, 0.14);

  /* Typography */
  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout — horizontal padding scales with viewport */
  --pad-x:        24px;
  --rule-weight:  1px;

  /* Vertical rhythm (mobile defaults) */
  --space-header-gap: 48px;
  --space-section:    96px;
  --space-mission:    56px;
  --space-identity-after: 40px;
}

@media (min-width: 768px) {
  :root {
    --pad-x:                88px;
    --space-header-gap:     80px;
    --space-section:        160px;
    --space-mission:        96px;
    --space-identity-after: 80px;
  }
}


/* -----------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  padding: 56px 0 32px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 768px) {
  body {
    padding: 56px 0 56px;
  }
}

h1, h2, p, ol {
  margin: 0;
  padding: 0;
}

ol {
  list-style: none;
}

em {
  /* Italic emphasis uses Fraunces in body copy for a typographic kiss */
  font-style: italic;
}


/* -----------------------------------------------------------------------------
   3. Page header & footer — bookends in tracked-out uppercase Inter
   -------------------------------------------------------------------------- */

.page-header,
.page-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.page-header {
  padding-bottom: 20px;
  border-bottom: var(--rule-weight) solid var(--ink);
}

@media (min-width: 768px) {
  .page-header {
    padding-bottom: 28px;
  }
}

.page-footer {
  margin-top: 96px;
  padding-top: 18px;
  border-top: var(--rule-weight) solid var(--ink);
  letter-spacing: 0.18em;
}

@media (min-width: 768px) {
  .page-footer {
    margin-top: 144px;
  }
}


/* -----------------------------------------------------------------------------
   4. Section labels — `01 / Identity` style, full-bleed hairline beneath
   -------------------------------------------------------------------------- */

.section {
  margin-top: var(--space-header-gap);
}

.section-label {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 14px;
  align-items: baseline;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  padding-bottom: 18px;
  border-bottom: var(--rule-weight) solid var(--ink);
}

@media (min-width: 768px) {
  .section-label {
    grid-template-columns: 72px 1fr;
    column-gap: 24px;
  }
}

.section-label__number {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  font-variation-settings: 'opsz' 14;
}

@media (min-width: 768px) {
  .section-label__number {
    font-size: 14px;
  }
}

.section-label__name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}

.section--catalog,
.section--contact {
  margin-top: var(--space-section);
}


/* -----------------------------------------------------------------------------
   5. Section body shared container
   -------------------------------------------------------------------------- */

.section-body {
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}


/* -----------------------------------------------------------------------------
   6. Identity — wordmark, gloss, mission
   -------------------------------------------------------------------------- */

.section-body--identity {
  margin-top: var(--space-identity-after);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--accent);
  font-size: clamp(64px, 20vw, 92px);
  line-height: 0.88;
  letter-spacing: -0.035em;
  font-variation-settings: 'opsz' 96;
}

@media (min-width: 768px) {
  .wordmark {
    font-size: 152px;
    font-variation-settings: 'opsz' 144;
  }
}

.gloss {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-muted);
  font-size: 20px;
  margin-top: 16px;
}

@media (min-width: 768px) {
  .gloss {
    font-size: 30px;
    margin-top: 20px;
  }
}

.mission {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  max-width: 34rem;
  margin-top: var(--space-mission);
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .mission {
    font-size: 19px;
    /* Slight right-offset for architectural rhythm without abandoning
       the wordmark — tighter than a strict 3/9 grid would suggest. */
    margin-left: 14%;
  }
}


/* -----------------------------------------------------------------------------
   7. Catalog — numbered, hairline-ruled rows
   -------------------------------------------------------------------------- */

.catalog {
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.catalog-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 14px;
  row-gap: 8px;
  align-items: baseline;
  padding: 32px 0;
  border-bottom: var(--rule-weight) solid var(--rule-soft);
}

.catalog-item:last-child {
  border-bottom: none;
}

@media (min-width: 768px) {
  .catalog-item {
    grid-template-columns: 72px minmax(0, 4fr) minmax(0, 7fr);
    column-gap: 24px;
    padding: 44px 0;
  }
}

.catalog-item__number {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-muted);
  font-size: 13px;
  letter-spacing: 0.02em;
  padding-top: 6px;
}

@media (min-width: 768px) {
  .catalog-item__number {
    font-size: 14px;
    padding-top: 12px;
  }
}

.catalog-item__name {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--accent);
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variation-settings: 'opsz' 48;
  /* On mobile, push to column 2 so it stacks under the number */
  grid-column: 2 / 3;
}

@media (min-width: 768px) {
  .catalog-item__name {
    font-size: 44px;
    grid-column: auto;
  }
}

.catalog-item__desc {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  max-width: 44ch;
  grid-column: 2 / 3;
}

@media (min-width: 768px) {
  .catalog-item__desc {
    font-size: 17px;
    grid-column: auto;
  }
}


/* -----------------------------------------------------------------------------
   8. Contact — prompt + understated mailto in Fraunces
   -------------------------------------------------------------------------- */

.section-body--contact {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 14px;
}

@media (min-width: 768px) {
  .section-body--contact {
    margin-top: 64px;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    column-gap: 32px;
    row-gap: 0;
  }
}

.contact-prompt {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-muted);
  font-size: 18px;
}

@media (min-width: 768px) {
  .contact-prompt {
    font-size: 22px;
  }
}

.contact-email {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  font-size: 22px;
  letter-spacing: -0.005em;
  text-decoration: none;
  font-variation-settings: 'opsz' 36;
  /* Justify-self start so the link is exactly its own width — keeps the
     hover/focus target tight rather than the full grid column. */
  justify-self: start;
  transition: color 180ms ease;
}

@media (min-width: 768px) {
  .contact-email {
    font-size: 32px;
  }
}

.contact-email:hover,
.contact-email:focus-visible {
  color: var(--accent);
}

.contact-email:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: 2px;
}


/* -----------------------------------------------------------------------------
   9. Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}