/* PLIEGO — the app's own look, as a website (recuerd0 memory 1510). One face
   at one weight; emphasis by size and case; hairline rules; photographs edge
   to edge with hairline gutters; nothing decorative. */
/* Unlayered CSS, so it beats every Tailwind utility: every selector is scoped
   under [data-site-theme="pliego"], and nothing here may reach an element any
   other way (see _site.css for why). What a theme changes is a token or a
   part's own rule; a photographer's colours and type arrive in <head> after
   this file and win over anything declared here.

   url() syntax, not a bare string: Propshaft digests only what sits inside
   url(), so a plain @import would point at a file production never serves. */
@import url("/assets/themes/_site-5f265bdd.css");

[data-site-theme="pliego"] {
  /* Where the About page's two columns start (_site.css): this theme's
     intro top. */
  --site-about-top: 2.5rem;
  --site-logo-height: 1.75rem;
  --site-inset: clamp(1rem, 4vw, 3rem);
  --site-max-width: none;
  --site-cover-ratio: 1;
  --site-brand-size: 0.9375rem;
  /* One ladder: nav 12 → title 28 → tagline 28; a heading under the title
     (Contact, a caption) sits under it at 18, never over it — the shared
     subtitle clamp put "Contacto" at 28px over a 24px "Acerca de". */
  --site-title-size: clamp(1.5rem, 2.5vw, 1.75rem);
  --site-subtitle-size: 1.125rem;
  --site-label-size: 0.75rem;
  --site-label-tracking: 0.1em;
}

[data-site-theme="pliego"] [data-site-part="brand"],
[data-site-theme="pliego"] [data-site-part="footer-name"] {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

[data-site-theme="pliego"] [data-site-part="header"] {
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--site-hairline);
}

[data-site-theme="pliego"] [data-site-part="hero"] {
  max-height: 70svh;
}

[data-site-theme="pliego"] [data-site-part="hero"] img {
  max-height: 70svh;
}

[data-site-theme="pliego"] [data-site-part="intro"] {
  padding-block: 2.5rem 1.5rem;
  gap: 1.25rem;
}

[data-site-theme="pliego"] [data-site-part="tagline"] {
  font-size: var(--site-title-size);
  max-width: 36rem;
}

[data-site-theme="pliego"] [data-site-part="bio"] {
  font-size: 0.9375rem;
  max-width: 36rem;
}

/* ---- The home: the photograph, the doors, then one line ------------------- */
/* A sheet of prints opens on the prints. The shared order puts the words
   between the hero and the grid, which left the first door at y=921 on a
   900px display and 1,426px down a phone; here the grid follows the hero
   and the line and the links sit under it. The bio is About's — the home
   carried the whole of it. The home is the page whose main opens on the
   hero; the order is a flex order so the markup stays the shared set's. */
[data-site-theme="pliego"] [data-site-part="main"]:has(> [data-site-part="hero"]) {
  display: flex;
  flex-direction: column;
}

[data-site-theme="pliego"] [data-site-part="main"]:has(> [data-site-part="hero"]) > [data-site-part="intro"] {
  order: 1;
  padding-block: 2rem 3rem;
}

[data-site-theme="pliego"] [data-site-part="main"]:has(> [data-site-part="hero"]) [data-site-part="bio"] {
  display: none;
}

/* Photographs edge to edge, words inset: the doors run the width of the
   page under the hero, a hairline apart, and their names take the inset
   the words have. */
[data-site-theme="pliego"] [data-site-part="main"]:has(> [data-site-part="hero"]) > [data-site-part="work"] {
  padding-block: 1px 0;
  padding-inline: 0;
}

[data-site-theme="pliego"] [data-site-part="main"]:has(> [data-site-part="hero"]) [data-site-part="collection-title"] {
  padding-inline: 0.75rem;
}

[data-site-theme="pliego"] [data-site-part="collections"] {
  gap: 1px;
}

@media (min-width: 48rem) {
  [data-site-theme="pliego"] [data-site-part="collections"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

[data-site-theme="pliego"] [data-site-part="collection-title"] {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.5rem;
  padding-bottom: 0.75rem;
}

[data-site-theme="pliego"] [data-site-part="work"] {
  padding-block: 0 3rem;
}

[data-site-theme="pliego"] [data-site-part="page-title"] {
  letter-spacing: 0;
}

[data-site-theme="pliego"] [data-site-part="footer"] {
  font-size: 0.75rem;
  padding-block: 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
}

/* ---- The header on a phone ----------------------------------------------- */
/* Five labels wrap to three rows; the rows are a hit box apart (34px on a
   34px pitch), where the shared 0.5rem row gap had 8px of every row's
   padded link over its neighbour's. */
@media (max-width: 47.99rem) {
  [data-site-theme="pliego"] [data-site-part="header"] {
    padding-block: 1rem;
  }

  [data-site-theme="pliego"] [data-site-part="header"] [data-site-part="nav"] > ul {
    gap: 1rem;
  }

  [data-site-theme="pliego"] [data-site-part="intro"] {
    padding-block: 1.5rem;
  }
}