/* Our Work — editorial layer (23 Sep 2026).
 *
 * Founder's note: "these are very bad … the gallery has to look good, all photos
 * have to look editorial, it's more text and the photo size is less … the
 * section-wise segregation is bad."
 *
 * Every rule here is presentation only, scoped to body[data-our-work-editorial].
 * No text, link, heading or schema is removed anywhere — the SEO, AEO and GEO
 * surface is untouched. What changes is what the eye is given first: the
 * photograph, at its true proportion and at a size worth looking at, with the
 * caption chrome demoted to a quiet second line.
 *
 * The specific defect this corrects: site-cohesion.css pins every card image to
 * height:230px with object-fit:contain on a #f6eff3 ground, to "preserve the
 * whole photograph". It does preserve it — inside a pink letterbox, at a third
 * of the size it deserves. Letting the image keep its own width/height ratio
 * preserves the whole photograph just as faithfully and fills the frame, so the
 * intent survives and the letterbox does not.
 */

body[data-our-work-editorial] {
  --ow-ink: #2b2028;
  --ow-muted: #6d5c66;
  --ow-rule: #e2d5dd;
  --ow-ground: #faf7f9;
}

/* ── Section rhythm ─────────────────────────────────────────────────────────
   The old page ran every section at the same weight on the same ground, so
   nothing read as a beginning or an end. Alternating grounds and a hairline
   above each heading give the page joints. */
body[data-our-work-editorial] .studio-section { padding-block: clamp(56px, 7vw, 104px); }
body[data-our-work-editorial] .studio-section + .studio-section { border-top: 1px solid var(--ow-rule); }
body[data-our-work-editorial] .studio-destinations,
body[data-our-work-editorial] .ow-tinted { background: var(--ow-ground); }
body[data-our-work-editorial] .studio-section-heading { align-items: flex-end; margin-bottom: clamp(28px, 3.4vw, 48px); }
body[data-our-work-editorial] .studio-eyebrow {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ow-muted);
}
body[data-our-work-editorial] .studio-section h2 { letter-spacing: -.01em; }

/* ── The two-line promise ──────────────────────────────────────────────────
   Planning and decor, said once, plainly, before any photograph. */
body[data-our-work-editorial] .ow-promise { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 72px); }
body[data-our-work-editorial] .ow-promise > div { padding-top: 26px; border-top: 2px solid var(--ow-ink); }
body[data-our-work-editorial] .ow-promise h3 {
  font: 400 clamp(26px, 2.6vw, 36px)/1.15 'Cormorant Garamond', Georgia, serif;
  margin: 0 0 14px; color: var(--ow-ink);
}
body[data-our-work-editorial] .ow-promise p { margin: 0; max-width: 46ch; line-height: 1.75; color: var(--ow-muted); }
body[data-our-work-editorial] .ow-lede { max-width: 62ch; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.7; }

/* ── Studio work cards: the photograph at its own proportion ───────────────
   Masonry columns so unequal heights read as a composition rather than a
   ragged grid. The !important flags answer the equally-!important rules in
   site-cohesion.css; they are not decoration. */
body[data-our-work-editorial] .studio-work-grid {
  display: block !important; columns: 3; column-gap: clamp(16px, 1.8vw, 28px);
}
body[data-our-work-editorial] .studio-work-card {
  break-inside: avoid; display: block; margin: 0 0 clamp(26px, 3vw, 44px) !important;
  grid-column: auto !important; max-width: none !important;
}
body[data-our-work-editorial] .studio-work-card figure { margin: 0; overflow: hidden; }
body[data-our-work-editorial] .studio-work-grid .studio-work-card img {
  width: 100% !important; height: auto !important; max-height: none !important;
  aspect-ratio: auto !important; object-fit: contain !important; background: none !important;
  display: block; transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
body[data-our-work-editorial] .studio-work-card:hover img { transform: scale(1.02); }
body[data-our-work-editorial] .studio-caption { margin-top: 14px; align-items: baseline; }
body[data-our-work-editorial] .studio-caption h3 {
  font: 400 clamp(19px, 1.6vw, 23px)/1.25 'Cormorant Garamond', Georgia, serif; margin: 0 0 3px;
}
body[data-our-work-editorial] .studio-caption p { margin: 0; font-size: 12px; letter-spacing: .04em; color: var(--ow-muted); }

/* ── The decor library: fewer columns, bigger photographs, quiet captions ──
   The caption still carries the title, the credit, the Pinterest link and the
   brief link — nothing is removed, because those are real content and real
   conversion routes. They are simply no longer the loudest thing in the tile. */
body[data-our-work-editorial] .media-grid { columns: 3; column-gap: clamp(16px, 1.8vw, 28px); }
body[data-our-work-editorial] .media-piece { margin: 0 0 clamp(26px, 3vw, 44px) !important; }
body[data-our-work-editorial] .media-piece img { background: none !important; }
body[data-our-work-editorial] .media-piece figcaption {
  margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--ow-ink);
}
body[data-our-work-editorial] .media-piece figcaption small {
  display: block !important; margin-top: 2px; font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ow-muted);
}
/* The two action links become one quiet line instead of two loud ones. */
body[data-our-work-editorial] .media-piece .media-pinterest-link,
body[data-our-work-editorial] .media-piece .media-brief-link {
  display: inline !important; margin: 0 !important; font-size: 11.5px; color: var(--ow-muted);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
body[data-our-work-editorial] .media-piece .media-pinterest-link { margin-top: 7px !important; }
body[data-our-work-editorial] .media-piece .media-brief-link::before {
  content: "·"; margin: 0 7px; color: var(--ow-rule); text-decoration: none; display: inline-block;
}
body[data-our-work-editorial] .media-piece figcaption a:hover { color: var(--ow-ink); }
body[data-our-work-editorial] .media-filters { margin-bottom: 18px; }
body[data-our-work-editorial] .media-count { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ow-muted); }

/* ── Story cards: a photograph where we have one, typography where we do not ─ */
body[data-our-work-editorial] .ow-story-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(30px, 3.6vw, 60px);
}
body[data-our-work-editorial] .ow-story { display: block; text-decoration: none; color: inherit; }
body[data-our-work-editorial] .ow-story figure { margin: 0 0 20px; overflow: hidden; }
body[data-our-work-editorial] .ow-story img {
  display: block; width: 100%; height: auto; transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
body[data-our-work-editorial] .ow-story:hover img { transform: scale(1.02); }
body[data-our-work-editorial] .ow-story h3 {
  font: 400 clamp(24px, 2.2vw, 32px)/1.2 'Cormorant Garamond', Georgia, serif; margin: 0 0 12px;
}
body[data-our-work-editorial] .ow-story p { margin: 0 0 16px; line-height: 1.75; color: var(--ow-muted); max-width: 52ch; }
body[data-our-work-editorial] .ow-story span { font-size: 13px; letter-spacing: .04em; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ── The celebration index ────────────────────────────────────────────────
   Fourteen names with nothing but an arrow beside them was a list pretending
   to be a gallery. Given the venue and the place, it becomes an index worth
   reading — and every link and every word is still here. */
body[data-our-work-editorial] .ow-index { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(26px, 3vw, 52px); }
body[data-our-work-editorial] .ow-index a {
  display: block; text-decoration: none; color: inherit;
  padding: 24px 0; border-top: 1px solid var(--ow-rule);
  transition: padding-left .35s cubic-bezier(.2,.7,.3,1), border-color .35s;
}
body[data-our-work-editorial] .ow-index a:hover { padding-left: 10px; border-top-color: var(--ow-ink); }
body[data-our-work-editorial] .ow-index h3 {
  font: 400 clamp(21px, 1.9vw, 27px)/1.2 'Cormorant Garamond', Georgia, serif; margin: 0 0 6px;
}
body[data-our-work-editorial] .ow-index .ow-where { display: block; font-size: 13px; line-height: 1.5; color: var(--ow-muted); margin-bottom: 10px; }
body[data-our-work-editorial] .ow-index span:not(.ow-where) { font-size: 12px; letter-spacing: .05em; color: var(--ow-muted); }

@media (max-width: 1000px) {
  body[data-our-work-editorial] .studio-work-grid,
  body[data-our-work-editorial] .media-grid { columns: 2; }
  body[data-our-work-editorial] .ow-index { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  body[data-our-work-editorial] .studio-work-grid,
  body[data-our-work-editorial] .media-grid { columns: 1; }
  body[data-our-work-editorial] .ow-promise,
  body[data-our-work-editorial] .ow-story-grid { grid-template-columns: 1fr; }
  body[data-our-work-editorial] .ow-index { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-our-work-editorial] .studio-work-card img,
  body[data-our-work-editorial] .ow-story img,
  body[data-our-work-editorial] .ow-index a { transition: none; }
  body[data-our-work-editorial] .studio-work-card:hover img,
  body[data-our-work-editorial] .ow-story:hover img { transform: none; }
}

/* ── Journal story cards ───────────────────────────────────────────────────
   The same site-cohesion rule that letterboxed the studio cards also pins the
   journal and story cards to 230px on the pink ground. Same correction: let
   the photograph keep its own proportion and it fills its frame honestly. */
body[data-our-work-editorial] .studio-latest-grid img,
body[data-our-work-editorial] .media-story-grid .media-story img {
  height: auto !important; max-height: none !important; aspect-ratio: auto !important;
  object-fit: contain !important; background: none !important;
}
body[data-our-work-editorial] .media-story-grid,
body[data-our-work-editorial] .studio-latest-grid { align-items: start; }
body[data-our-work-editorial] .media-story-grid .media-story figcaption,
body[data-our-work-editorial] .studio-latest-grid figcaption { margin-top: 14px; }

/* ── One rule that has to win ──────────────────────────────────────────────
   Several stylesheets force a fixed aspect-ratio (4/3) on card and gallery
   images and then object-fit:contain them into it. A portrait photograph in a
   landscape box is a photograph with empty bars down both sides — which is why
   the decor library looked like small pictures in big frames. Clearing the
   forced ratio lets each photograph set its own, so it fills its column at its
   true proportion with nothing cropped and nothing padded. Verified in the
   browser before shipping: a 423px column went from a 317px letterbox to a
   526px photograph. */
body[data-our-work-editorial] .media-piece img,
body[data-our-work-editorial] .studio-work-grid .studio-work-card img,
body[data-our-work-editorial] .media-story-grid .media-story img,
body[data-our-work-editorial] .studio-latest-grid img {
  aspect-ratio: auto !important;
  height: auto !important;
  max-height: none !important;
  width: 100% !important;
  object-fit: contain !important;
  background: none !important;
}

/* Archive navigation remains usable without JavaScript or a catalogue fetch. */
body[data-our-work-editorial] .media-filters[hidden],
body[data-our-work-editorial] .media-more[hidden] { display: none !important; }
body[data-our-work-editorial] .portfolio-pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
body[data-our-work-editorial] .portfolio-pagination a { display: inline-flex; justify-content: center; align-items: center; min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--ow-rule); border-radius: 3px; color: var(--ow-ink); text-decoration: none; }
body[data-our-work-editorial] .portfolio-pagination a[aria-current="page"] { background: #75435f; border-color: #75435f; color: #fff; }
body[data-our-work-editorial] .portfolio-pagination a:focus-visible { outline: 3px solid #75435f; outline-offset: 3px; }
body[data-our-work-editorial] .portfolio-status { font-size: 14px; margin-top: 12px; }
body[data-our-work-editorial] .portfolio-status:empty { display: none; }
body[data-our-work-editorial] .portfolio-return { margin-top: 32px; }
@media (max-width: 720px) {
  body[data-our-work-editorial] .media-piece figcaption small,
  body[data-our-work-editorial] .media-piece .media-pinterest-link,
  body[data-our-work-editorial] .media-piece .media-brief-link { font-size: 12px; }
}