/* =========================================================
   LILLIPIX — Design System
   Tiny art. Real marks. One small original.
   ========================================================= */

:root {
  /* Color */
  --lp-color-bg: #F4F1EA;
  --lp-color-paper: #FCFBF7;
  --lp-color-text: #1E1E1B;
  --lp-color-text-soft: #77736A;
  --lp-color-line: #D8D3C8;
  --lp-color-accent: #A23E2E; /* muted red */
  --lp-color-accent-soft: #C97A63;

  /* Typography */
  --lp-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --lp-font-body: "Inter", -apple-system, "Segoe UI", sans-serif;

  --lp-size-display-xl: clamp(2.75rem, 7vw, 6.5rem);
  --lp-size-display-lg: clamp(2rem, 4vw, 3.25rem);
  --lp-size-display-md: clamp(1.5rem, 2.5vw, 2rem);
  --lp-size-body: 1rem;
  --lp-size-small: 0.8125rem;
  --lp-size-micro: 0.6875rem;

  --lp-leading-display: 0.98;
  --lp-leading-body: 1.55;
  --lp-tracking-label: 0.14em;

  /* Spacing scale */
  --lp-space-1: 0.25rem;
  --lp-space-2: 0.5rem;
  --lp-space-3: 1rem;
  --lp-space-4: 1.5rem;
  --lp-space-5: 2.5rem;
  --lp-space-6: 4rem;
  --lp-space-7: 6rem;
  --lp-space-8: 9rem;

  /* Container widths */
  --lp-container-max: 1240px;
  --lp-container-narrow: 760px;
  --lp-gutter: clamp(1.25rem, 4vw, 3.5rem);

  /* Borders */
  --lp-border-hair: 1px solid var(--lp-color-line);
  --lp-border-radius: 2px; /* deliberately near-square, not "rounded card" */

  /* Image ratios */
  --lp-ratio-portrait: 3 / 4;
  --lp-ratio-square: 1 / 1;
  --lp-ratio-wide: 4 / 3;
  --lp-ratio-card: 5 / 7;

  /* Grid */
  --lp-grid-gap: clamp(1rem, 3vw, 2.5rem);

  /* Breakpoints (reference only, used in media queries below) */
}

/* =========================================================
   Reset / Base
   ========================================================= */

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

html { background: var(--lp-color-bg); }

body.lillipix {
  margin: 0;
  background: var(--lp-color-bg);
  color: var(--lp-color-text);
  font-family: var(--lp-font-body);
  font-size: var(--lp-size-body);
  line-height: var(--lp-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--lp-font-display);
  font-weight: 500;
  margin: 0;
  line-height: var(--lp-leading-display);
  letter-spacing: -0.01em;
}

/* =========================================================
   Layout primitives
   ========================================================= */

.lp-container {
  max-width: var(--lp-container-max);
  margin-inline: auto;
  padding-inline: var(--lp-gutter);
}

.lp-container--narrow { max-width: var(--lp-container-narrow); }

.lp-stack > * + * { margin-top: var(--lp-space-4); }

/* =========================================================
   Section Label — small typographic marker
   ========================================================= */

.lp-section-label {
  display: inline-flex;
  align-items: baseline;
  gap: var(--lp-space-2);
  font-family: var(--lp-font-body);
  font-size: var(--lp-size-micro);
  letter-spacing: var(--lp-tracking-label);
  text-transform: uppercase;
  color: var(--lp-color-text-soft);
}

.lp-section-label::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--lp-color-accent);
  display: inline-block;
}

/* =========================================================
   Line Mark — signature drawn-line motif
   ========================================================= */

.lp-linemark {
  width: 100%;
  height: 18px;
  overflow: visible;
  stroke: var(--lp-color-accent);
  fill: none;
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.85;
}

.lp-linemark--under {
  display: block;
  margin-top: var(--lp-space-2);
  max-width: 9rem;
}

/* =========================================================
   Navigation
   ========================================================= */

.lp-nav {
  border-bottom: var(--lp-border-hair);
  background: var(--lp-color-bg);
  position: sticky;
  top: 0;
  z-index: 20;
}

.lp-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--lp-space-3);
  gap: var(--lp-space-4);
}

.lp-nav__mark {
  font-family: var(--lp-font-display);
  font-size: 1.25rem;
  letter-spacing: 0.08em;
}

.lp-nav__links {
  display: flex;
  gap: var(--lp-space-5);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--lp-size-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lp-nav__links a {
  color: var(--lp-color-text-soft);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.lp-nav__links a:hover { color: var(--lp-color-text); border-color: var(--lp-color-accent); }

.lp-nav__cart {
  font-size: var(--lp-size-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lp-color-text-soft);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .lp-nav__links { display: none; }
}

/* =========================================================
   Footer
   ========================================================= */

.lp-footer {
  border-top: var(--lp-border-hair);
  padding-block: var(--lp-space-6);
  margin-top: var(--lp-space-8);
  color: var(--lp-color-text-soft);
  font-size: var(--lp-size-small);
}

.lp-footer__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--lp-space-4);
}

/* =========================================================
   Intro / Hero (section 01)
   ========================================================= */

.lp-intro {
  padding-block: var(--lp-space-7) var(--lp-space-6);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--lp-space-6);
  align-items: end;
}

.lp-intro__headline {
  font-size: var(--lp-size-display-xl);
}

.lp-intro__sub {
  max-width: 28rem;
  margin-top: var(--lp-space-4);
  color: var(--lp-color-text-soft);
}

.lp-intro__cta {
  margin-top: var(--lp-space-5);
  display: inline-block;
  font-size: var(--lp-size-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--lp-color-accent);
  padding-bottom: 2px;
}

.lp-intro__figure {
  aspect-ratio: var(--lp-ratio-portrait);
  background: var(--lp-color-paper);
  border: var(--lp-border-hair);
  position: relative;
  overflow: hidden;
  justify-self: end;
  width: 100%;
  max-width: 22rem;
}

@media (max-width: 860px) {
  .lp-intro { grid-template-columns: 1fr; }
  .lp-intro__figure { justify-self: start; max-width: none; }
}

/* =========================================================
   Artwork placeholder texture (no real images available)
   ========================================================= */

.lp-artwork-image {
  position: relative;
  background: var(--lp-color-paper);
  border: var(--lp-border-hair);
  overflow: hidden;
}

.lp-artwork-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(115deg, transparent 0 10px, rgba(30,30,27,0.035) 10px 11px),
    radial-gradient(ellipse at 30% 25%, rgba(162,62,46,0.10), transparent 55%);
}

/* =========================================================
   Editorial Grid — Selected Works (section 02)
   ========================================================= */

.lp-editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--lp-grid-gap);
  padding-block: var(--lp-space-6);
}

.lp-editorial-grid__item--a { grid-column: 1 / 8; }
.lp-editorial-grid__item--b { grid-column: 8 / 13; margin-top: var(--lp-space-7); }
.lp-editorial-grid__item--c { grid-column: 1 / 6; margin-top: var(--lp-space-5); }

@media (max-width: 860px) {
  .lp-editorial-grid { grid-template-columns: 1fr; }
  .lp-editorial-grid__item--a,
  .lp-editorial-grid__item--b,
  .lp-editorial-grid__item--c {
    grid-column: 1 / -1;
    margin-top: 0;
  }
}

/* =========================================================
   Artwork Card
   ========================================================= */

.lp-artwork-card { display: block; }

.lp-artwork-card__image { aspect-ratio: var(--lp-ratio-portrait); }

.lp-artwork-card__meta {
  margin-top: var(--lp-space-3);
  display: flex;
  justify-content: space-between;
  gap: var(--lp-space-3);
}

.lp-artwork-meta__number {
  font-size: var(--lp-size-micro);
  letter-spacing: var(--lp-tracking-label);
  color: var(--lp-color-text-soft);
  text-transform: uppercase;
}

.lp-artwork-meta__title {
  font-family: var(--lp-font-display);
  font-size: 1.1rem;
  margin-top: var(--lp-space-1);
}

.lp-artwork-meta__details {
  font-size: var(--lp-size-small);
  color: var(--lp-color-text-soft);
  margin-top: var(--lp-space-1);
}

.lp-price {
  font-size: var(--lp-size-small);
  white-space: nowrap;
  align-self: flex-end;
}

/* =========================================================
   Statements (section 03)
   ========================================================= */

.lp-statements {
  padding-block: var(--lp-space-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lp-space-5);
  border-top: var(--lp-border-hair);
  border-bottom: var(--lp-border-hair);
}

.lp-statement:nth-child(2) { margin-top: var(--lp-space-5); }
.lp-statement:nth-child(3) { margin-top: var(--lp-space-2); }

.lp-statement__title {
  font-family: var(--lp-font-display);
  font-size: var(--lp-size-display-md);
}

.lp-statement__text {
  margin-top: var(--lp-space-2);
  color: var(--lp-color-text-soft);
  max-width: 18rem;
}

@media (max-width: 860px) {
  .lp-statements { grid-template-columns: 1fr; gap: var(--lp-space-6); }
  .lp-statement:nth-child(2),
  .lp-statement:nth-child(3) { margin-top: 0; }
}

/* =========================================================
   Series preview (section 04)
   ========================================================= */

.lp-series-list {
  padding-block: var(--lp-space-6);
  border-bottom: var(--lp-border-hair);
}

.lp-series-preview {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--lp-space-5);
  padding-block: var(--lp-space-5);
  border-top: var(--lp-border-hair);
  align-items: center;
}

.lp-series-preview:last-child { border-bottom: var(--lp-border-hair); }

.lp-series-preview__name {
  font-family: var(--lp-font-display);
  font-size: var(--lp-size-display-md);
}

.lp-series-preview__desc { color: var(--lp-color-text-soft); margin-top: var(--lp-space-1); }

.lp-series-preview__swatches {
  display: flex;
  gap: var(--lp-space-2);
}

.lp-series-preview__swatch {
  width: 4.5rem;
  aspect-ratio: var(--lp-ratio-square);
}

@media (max-width: 720px) {
  .lp-series-preview { grid-template-columns: 1fr; }
  .lp-series-preview__swatches { overflow-x: auto; }
}

/* =========================================================
   Art Cards archive-table (section 05)
   ========================================================= */

.lp-cards-table {
  padding-block: var(--lp-space-6);
  display: flex;
  gap: var(--lp-space-4);
  overflow-x: auto;
  border-bottom: var(--lp-border-hair);
}

.lp-cards-table::-webkit-scrollbar { height: 4px; }

.lp-card-item {
  flex: 0 0 auto;
  width: 11rem;
}

.lp-card-item__image { aspect-ratio: var(--lp-ratio-card); }

.lp-card-item__label {
  margin-top: var(--lp-space-2);
  font-size: var(--lp-size-small);
  color: var(--lp-color-text-soft);
}

/* =========================================================
   Studio note (section 06)
   ========================================================= */

.lp-studio-note {
  padding-block: var(--lp-space-7);
  max-width: var(--lp-container-narrow);
}

.lp-studio-note__headline { font-size: var(--lp-size-display-lg); }

.lp-studio-note__text {
  margin-top: var(--lp-space-4);
  color: var(--lp-color-text-soft);
  font-size: 1.05rem;
}

/* =========================================================
   Archive (section 07 + Archive page)
   ========================================================= */

.lp-archive-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lp-space-5);
  padding-block: var(--lp-space-6);
}

.lp-archive-column__label {
  padding-bottom: var(--lp-space-2);
  border-bottom: var(--lp-border-hair);
  margin-bottom: var(--lp-space-3);
}

.lp-archive-item {
  display: flex;
  justify-content: space-between;
  gap: var(--lp-space-3);
  padding-block: var(--lp-space-2);
  font-size: var(--lp-size-small);
  border-bottom: 1px dotted var(--lp-color-line);
}

.lp-archive-item--sold { color: var(--lp-color-text-soft); }

.lp-archive-item__number { color: var(--lp-color-text-soft); }

@media (max-width: 860px) {
  .lp-archive-columns { grid-template-columns: 1fr; }
}

/* =========================================================
   Product / Werkseite
   ========================================================= */

.lp-product {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--lp-space-6);
  padding-block: var(--lp-space-6);
}

.lp-product__image { aspect-ratio: var(--lp-ratio-portrait); }

.lp-product__number {
  font-size: var(--lp-size-micro);
  letter-spacing: var(--lp-tracking-label);
  text-transform: uppercase;
  color: var(--lp-color-text-soft);
}

.lp-product__title {
  font-size: var(--lp-size-display-lg);
  margin-top: var(--lp-space-2);
}

.lp-product__meta {
  margin-top: var(--lp-space-4);
  color: var(--lp-color-text-soft);
}

.lp-product__meta p { margin: 0.15rem 0; }

.lp-product__edition {
  margin-top: var(--lp-space-4);
  padding-top: var(--lp-space-3);
  border-top: var(--lp-border-hair);
  font-size: var(--lp-size-small);
}

.lp-product__price {
  margin-top: var(--lp-space-4);
  font-family: var(--lp-font-display);
  font-size: 1.5rem;
}

.lp-add-to-collection {
  margin-top: var(--lp-space-5);
  display: inline-block;
  background: var(--lp-color-text);
  color: var(--lp-color-paper);
  padding: 0.85rem 1.75rem;
  font-size: var(--lp-size-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
}

.lp-add-to-collection:hover { background: var(--lp-color-accent); }

.lp-product__notes {
  padding-block: var(--lp-space-6);
  border-top: var(--lp-border-hair);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lp-space-5);
}

.lp-product__note-title {
  font-size: var(--lp-size-micro);
  letter-spacing: var(--lp-tracking-label);
  text-transform: uppercase;
  color: var(--lp-color-text-soft);
}

.lp-product__note-text { margin-top: var(--lp-space-2); }

@media (max-width: 860px) {
  .lp-product { grid-template-columns: 1fr; }
  .lp-product__notes { grid-template-columns: 1fr; }
}

/* =========================================================
   Series detail page
   ========================================================= */

.lp-series-hero {
  padding-block: var(--lp-space-6);
  border-bottom: var(--lp-border-hair);
}

.lp-series-hero__title { font-size: var(--lp-size-display-xl); }
.lp-series-hero__desc { max-width: 34rem; color: var(--lp-color-text-soft); margin-top: var(--lp-space-3); }

/* =========================================================
   Page header (generic, used by Series/Archive pages)
   ========================================================= */

.lp-page-header {
  padding-block: var(--lp-space-6) var(--lp-space-4);
}

.lp-page-header__title { font-size: var(--lp-size-display-lg); }