/* ============================================================
   Erisse — /objects page-specific styles.
   PARALLEL PROTOCOL: this file is the ONLY stylesheet the /objects
   agent owns. styles.css and templates/ are NOT modified; wherever the
   shared template does not fit /objects, it is overridden from here.
   Linked from pages/objects/content.html (a body <link>), so it loads
   after styles.css and wins on specificity ties.
   Breakpoint boundary: 809px (matches styles.css).
   ============================================================ */

/* /objects has no ornament strip; it uses its own full-page SVG texture. */
.ornament { display: none !important; }

/* ---------- hero overrides (objects hero differs from home) ----------
   - fixed height 900 (home is 922)
   - nav bar is 900 wide (home frame is 1128)
   - hero copy is a centred block (both axes), text left-aligned, no CTA
   - no top padding on hero-content desktop (nav sits at y0) */
.hero { height: 900px; }
.hero-content { padding: 0; }
.hero-frame { width: min(900px, 100%); }
.site-nav { margin-bottom: 0; }

.hero-copy {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 709px; max-width: 100%;
  padding: 0;
  gap: 32px;
  align-items: flex-start;
}
.obj-hero-head p { margin: 0; }
.obj-hero-title { font-family: var(--serif-light); font-size: 64px; line-height: 64px; }
.obj-hero-chapter { font-family: var(--serif-regular); font-size: 32px; line-height: 38.4px; }
.obj-hero-body { display: block; }
.obj-hero-body p { font-family: var(--serif-light); font-size: 24px; line-height: 28.8px; }

/* ============================================================
   PAGE WRAPPER — cancels the .page 167px flex-gap (objects sections
   touch each other and the hero/footer; spacing is via own padding).
   ============================================================ */
.obj-main {
  position: relative;
  width: 100%;
  margin-top: -167px;      /* cancel gap above (hero -> content) */
  margin-bottom: -167px;   /* cancel gap below (content -> footer) */
}
.obj-bg {
  position: absolute;
  left: -476px; top: 569.35px;
  width: 2389px; height: 7140.33px;
  z-index: 0; pointer-events: none;
}
.obj-content {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
}

/* grayscale-AA compositing for text blocks (see styles.css note) */
.obj-orn-head, .obj-offer-label, .obj-inquire, .obj-show-head, .obj-labels,
.obj-intro, .obj-limited-head, .obj-coming, .obj-card-label, .obj-acquire {
  transform: translate(0, 0);
}

/* ---------- shared objects type ---------- */
.oh-32s { font-family: var(--serif-regular); font-size: 32px; line-height: 38.4px; }  /* stays 32 on mobile */
.oh-24  { font-family: var(--serif-regular); font-size: 24px; line-height: 28.8px; }
.osub-20-20 { font-family: var(--serif-light); font-size: 20px; line-height: 24px; }
.osub-20-14 { font-family: var(--serif-light); font-size: 20px; line-height: 24px; }

/* ============================================================
   ORNAMENTAL EMBROIDERY
   ============================================================ */
.obj-ornamental {
  width: min(1128px, 100%);
  padding: 100px 75px 200px;
  display: flex; flex-direction: column; gap: 64px; align-items: center;
}
.obj-orn-head { width: 100%; display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.obj-orn-head > * { width: 100%; }
.obj-offers { width: 100%; display: flex; flex-direction: column; gap: 75px; }
.obj-offer { width: 100%; display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.obj-offer-media { width: 100%; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.obj-offer-media-alt { align-items: flex-end; }

.obj-offer-crop { position: relative; width: 100%; height: 720px; overflow: hidden; }
.obj-offer-crop img { position: absolute; left: -3.81px; top: -39.77px; width: 978px; height: 1873.63px; max-width: none; object-fit: fill; }
.obj-offer-plain { width: 100%; height: 719.8px; }
.obj-offer-plain img { width: 100%; height: 100%; object-fit: fill; object-position: 50% 100%; }

.obj-offer-label { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; }
.obj-tag {
  font-family: var(--sans-bold); font-size: 12px; line-height: 16.8px;
  letter-spacing: 1.2px; text-transform: uppercase; color: rgb(255, 255, 255);
  flex-shrink: 0;   /* keep fixed widths; overflow like the mirror (no reflow) */
}
.obj-tag-name1  { width: 178px; }
.obj-tag-price1 { width: 138px; text-align: right; }
.obj-tag-name2  { width: 201px; }
.obj-tag-price2 { width: 164px; text-align: right; }

/* gold inquire button */
.obj-inquire {
  position: relative;
  display: inline-flex; justify-content: center; align-items: center;
  width: 109px; height: 36px;
  background: rgb(166, 133, 69);
}
.obj-inquire::before { content: ""; position: absolute; inset: -1px; border: 1px solid var(--cream); pointer-events: none; }
.obj-inquire span {
  font-family: var(--sans-bold); font-size: 16px; line-height: 24px;
  text-transform: uppercase; color: var(--ink);
}

/* ============================================================
   INTERIOR WORLDS intro
   ============================================================ */
.obj-intro {
  width: 860px; max-width: 100%;
  padding: 0 75px;
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
}
.obj-intro-body p {
  font-family: var(--serif-light); font-size: 24px; line-height: 28.8px;
}

/* ============================================================
   SHOWCASE SECTIONS (Framed / Veiled / Quiet)
   ============================================================ */
.obj-show { width: min(1128px, 100%); padding: 50px 75px; }
.obj-show-quiet { padding-bottom: 250px; }
.obj-show-col { width: 100%; display: flex; flex-direction: column; gap: 25px; align-items: center; }
.obj-show-head { width: 100%; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; padding-bottom: 47px; }
.obj-show-head > * { width: 100%; }

.obj-show-media { position: relative; width: 100%; }
.obj-show-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.obj-media-tall  { height: 1043.19px; }
.obj-media-short { height: 826.73px; }
.obj-media-dim img { opacity: 0.9; }

.obj-labels { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.obj-labels-left  { align-items: flex-start; }
.obj-labels-right { align-items: flex-end; text-align: right; }
.obj-item { width: 100%; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.obj-item > * { width: 100%; }   /* full-width so text-align (right/left) lands like the mirror */
.obj-item-title { font-family: var(--serif-light); font-size: 20px; line-height: 24px; color: var(--cream); }
.obj-desc { font-family: var(--serif-light-italic); font-size: 14px; line-height: 16.8px; color: var(--cream); }
.obj-desc p { font-family: inherit; font-size: inherit; line-height: inherit; }
.obj-desc.desc-up { font-family: var(--serif-light); }        /* non-italic both breakpoints */
/* .desc-up-m: italic on desktop, upright on mobile (source quirk) */

/* ============================================================
   LIMITED EDITION OBJECTS (blurred teaser + coming-soon card)
   ============================================================ */
.obj-limited {
  width: min(900px, 100%);
  padding: 0 20px 150px;
  display: flex; flex-direction: column; gap: 64px; align-items: center;
}
.obj-limited-head {
  width: 100%;
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
  filter: blur(20px);
}
.obj-limited-head > * { width: 100%; }

.obj-grid-wrap { position: relative; width: 100%; display: flex; justify-content: center; }
.obj-grid { filter: blur(30px); }
.obj-grid-d {
  display: grid; grid-template-columns: repeat(3, 253.328px);
  column-gap: 25px; row-gap: 70px; padding: 50px 25px 150px;
}
.obj-grid-m {
  display: grid; grid-template-columns: repeat(2, 150px);
  gap: 25px; padding: 0 25px;
}
.obj-card { display: flex; flex-direction: column; gap: 13px; align-items: flex-start; }
.obj-card-media { position: relative; width: 100%; height: 365px; }
.obj-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.obj-card-label { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.obj-card-name, .obj-card-price {
  font-family: var(--sans-bold); font-size: 10px; line-height: 14px;
  letter-spacing: 1px; text-transform: uppercase; color: rgb(255, 255, 255);
}
.obj-card-price { text-align: right; }
.obj-acquire {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  width: 86px; height: 36px;
  background: var(--cream);
}
.obj-acquire::before { content: ""; position: absolute; inset: -1px; border: 1px solid var(--cream); pointer-events: none; }
.obj-acquire span {
  font-family: var(--sans-bold); font-size: 10px; line-height: 14px;
  text-transform: uppercase; color: var(--ink);
}

.obj-coming {
  position: absolute; top: 415px; left: 50%;
  transform: translateX(-50%);
  width: 401px; height: 283px;
  background: rgb(77, 66, 51); border-radius: 10px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
}
.obj-coming p { font-family: var(--serif-regular); font-size: 24px; line-height: 28.8px; color: var(--cream); }

/* ============================================================
   DESKTOP sub-pixel nudges — the offer-2 lattice and framed image
   rasterise ~1px low vs the mirror at 1440; nudge up (desktop only).
   ============================================================ */
@media (min-width: 810px) {
  .obj-offer-plain img { transform: translateY(-1px); }
  .obj-show-framed .obj-show-media img { transform: translateY(-1px); }
}

/* ============================================================
   MOBILE (<=809px)
   ============================================================ */
@media (max-width: 809px) {
  /* gap cancel uses mobile --section-gap (91px); leave 2px below to offset
     cumulative fractional-height rounding so the footer lands at y6801. */
  .obj-main { margin-top: -91px; margin-bottom: -89px; }
  .obj-bg { left: -605px; top: 144px; width: 1600px; height: 5402px; }

  /* hero */
  .hero { height: 900px; }
  .hero-content { padding: 30px 0; }
  .hero-copy { width: 287px; padding: 0 10px; }
  .site-nav { padding: 30px 30px; }
  .obj-hero-title { font-size: 32px; line-height: 32px; }
  .obj-hero-chapter { font-family: var(--serif-light); font-size: 32px; line-height: 32px; }
  .obj-hero-body p { font-size: 18px; line-height: 21.6px; }

  /* ornamental */
  .obj-ornamental { width: 100%; padding: 75px 25px; }
  .obj-offer-crop { height: 340px; }
  .obj-offer-crop img { left: -1px; top: -19px; width: 340px; height: 885px; }
  .obj-offer-plain { height: 340px; }

  /* interior worlds intro */
  .obj-intro { width: 100%; }
  .obj-intro-body p { font-size: 18px; line-height: 21.6px; }
  .obj-gapline { font-size: 24px !important; line-height: 28.8px !important; }

  /* showcase */
  .obj-show { width: 100%; }
  .obj-show-framed { padding: 0 25px; }
  .obj-show-veiled { padding: 50px 25px; }
  .obj-show-quiet  { padding: 50px 25px 250px; }
  .oh-24 { font-size: 20px; line-height: 24px; }
  .osub-20-14 { font-size: 14px; line-height: 16.8px; }
  .obj-media-tall, .obj-media-short { height: 418px; }
  /* sub-pixel: veiled & quiet images rasterise 1px high vs the mirror at 390 */
  .obj-show-veiled .obj-show-media img,
  .obj-show-quiet .obj-show-media img { transform: translateY(1px); }
  .obj-item-title { font-size: 14px; line-height: 16.8px; }
  .obj-desc.desc-up-m { font-family: var(--serif-light); }  /* upright on mobile */

  /* limited edition */
  .obj-limited { width: 415px; max-width: none; padding: 75px 20px 150px; gap: 24px; }
  .osub-20-14 { font-size: 14px; line-height: 16.8px; }
  .obj-card-media { height: 216px; }
  .obj-coming { top: 144px; width: 326px; height: 244px; }
  .obj-coming p { font-size: 20px; line-height: 24px; }
}