/* ============================================================================
   Responsive — collapse inline grids on tablet / mobile.
   Inline style="grid-template-columns:…" needs !important to be overridden.
   ============================================================================ */

/* Split heroes (image | text) stack vertically */
@media(max-width:900px){
  .r-split{grid-template-columns:1fr!important;min-height:auto!important}
  .r-split > *{min-height:62vh}
  .r-2col{grid-template-columns:1fr!important}
  .r-entry{grid-template-columns:1fr!important;gap:8px!important}
  .r-meta2{grid-template-columns:1fr 1fr!important}
}

/* General multi-column content grids */
@media(max-width:1080px){
  .r-4col{grid-template-columns:1fr 1fr!important}
  .r-5col{grid-template-columns:1fr 1fr 1fr!important}
  .r-6col{grid-template-columns:1fr 1fr 1fr!important}
}
@media(max-width:760px){
  .r-3col{grid-template-columns:1fr!important}
  .r-4col{grid-template-columns:1fr 1fr!important}
  .r-5col{grid-template-columns:1fr 1fr!important}
  .r-6col{grid-template-columns:1fr 1fr!important}
  .r-2col-keep{grid-template-columns:1fr!important}
  .r-cardspan{grid-column:span 1!important}
}
@media(max-width:560px){
  .r-4col,.r-5col,.r-6col{grid-template-columns:1fr 1fr!important}
}

/* CV header portrait drops below name on small screens */
@media(max-width:760px){
  .cv-headgrid{grid-template-columns:1fr!important}
}

/* NavHub rows: hide the Arabic accent column on narrow screens to avoid crowding */
@media(max-width:680px){
  [data-rv-stagger] button[style*="grid-template-columns"]{ grid-template-columns:auto 1fr auto!important; }
}

/* Content manager table scrolls horizontally rather than crushing */
@media(max-width:1100px){
  .cm-tablewrap{overflow-x:auto}
  .cm-tablewrap > div{min-width:880px}
}

/* ============================================================================
   Inline-grid catch-all — collapse two-column inline styles on mobile.
   Authored to target the project's recurring inline grid patterns that
   don't carry an .r-* class (About g2, editorial hero, experience rows,
   StudioTeaser, HomeGrid rows, etc.).
   ============================================================================ */
@media(max-width:760px){
  /* Generic two-column inline grids → stack */
  [style*="grid-template-columns:1fr 1fr"]:not(.r-meta2):not(.r-2col-keep),
  [style*="grid-template-columns: 1fr 1fr"]:not(.r-meta2):not(.r-2col-keep),
  [style*="grid-template-columns:1.05fr 0.95fr"],
  [style*="grid-template-columns:0.95fr 1.05fr"],
  [style*="grid-template-columns:1.4fr 0.9fr"],
  [style*="grid-template-columns:0.85fr 1.15fr"],
  [style*="grid-template-columns:1.15fr 0.85fr"],
  [style*="grid-template-columns:1.5fr 1fr"],
  [style*="grid-template-columns:1.7fr 1fr"],
  [style*="grid-template-columns:1fr 2.2fr"],
  [style*="grid-template-columns:1.4fr 1fr"],
  [style*="grid-template-columns:1fr 1.5fr"]{
    grid-template-columns:1fr!important;
  }
  /* RAAI bento rows — stack but keep image first on mobile for visual order */
  .r-bento-b > div:first-child{order:2}
  .r-bento-d > div:last-child{order:2}


  /* Year | title experience rows → stack the year above the body */
  [style*="grid-template-columns:190px 1fr"]{
    grid-template-columns:1fr!important;
    gap:6px!important;
    padding:18px 0!important;
  }

  /* Section padding tightens on phones */
  .sec{padding:clamp(56px,9vw,84px) clamp(18px,5vw,28px)!important}
  .shead{gap:14px!important;margin-bottom:clamp(28px,6vw,44px)!important}
  .shead h2{font-size:clamp(26px,7vw,38px)!important}

  /* Hero typography scales down further */
  .hero-rise h1{font-size:clamp(40px,11vw,62px)!important;line-height:0.98!important}

  /* About hero meta block: two columns is still fine but tighten gap */
  .r-meta2{gap:14px 18px!important}

  /* Contact cards: stack for breathing room */
  [style*="grid-template-columns:1fr 1fr"][style*="maxWidth:740"]{
    grid-template-columns:1fr!important;
  }

  /* StudioTeaser / wide ink panels: portrait above text */
  [style*="grid-template-columns:0.85fr 1.15fr"]{
    min-height:auto!important;
  }
}

/* Very small phones — give the hero room and shrink CTAs */
@media(max-width:420px){
  .btn{padding:13px 22px!important;font-size:10.5px!important;letter-spacing:.18em!important}
  .btn-sm{padding:9px 14px!important}
  .eyebrow{font-size:9.5px!important;letter-spacing:.24em!important;gap:10px!important}
  .eyebrow::before{width:22px!important}
  .lead{font-size:clamp(17px,5vw,22px)!important;line-height:1.5!important}
  .body{font-size:14.5px!important;line-height:1.85!important}
}

/* Prevent any horizontal scroll caused by oversized inline widths */
@media(max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  img,video{max-width:100%;height:auto}
}

/* ============================================================================
   Mobile typography — comfortable line-height & sizing across all sections.
   ============================================================================ */
@media(max-width:760px){
  body{font-size:16px;line-height:1.7}
  h1{font-size:clamp(32px,9vw,52px)!important;line-height:1.05!important;letter-spacing:-0.01em}
  h2{font-size:clamp(26px,7vw,38px)!important;line-height:1.12!important}
  h3{font-size:clamp(20px,5.5vw,28px)!important;line-height:1.2!important}
  h4{font-size:clamp(17px,4.6vw,22px)!important;line-height:1.3!important}
  p,li{line-height:1.75!important}
  .lead{font-size:clamp(18px,5vw,24px)!important;line-height:1.55!important}
  .body{font-size:15.5px!important;line-height:1.8!important}
  .eyebrow{line-height:1.4!important}

  /* Nav: larger tap targets, ensure burger always reachable */
  .nav{padding-left:18px!important;padding-right:18px!important}
  .nav button,.nav a{min-height:44px}
}

@media(max-width:420px){
  body{font-size:15.5px;line-height:1.72}
  h1{font-size:clamp(30px,10vw,44px)!important}
  h2{font-size:clamp(22px,7.5vw,32px)!important}
  h3{font-size:clamp(18px,6vw,24px)!important}
  p,li{line-height:1.78!important}
}

/* ============================================================================
   Responsive images — fluid scaling, prevent unnecessary cropping on phones.
   ============================================================================ */
img,picture,video{max-width:100%;height:auto}

@media(max-width:760px){
  /* Hero cinematic (Home) — keep full-bleed but cap height so the image isn't
     stretched edge-to-edge of a tall mobile viewport. */
  [style*="min-height:100vh"][style*="align-items:flex-end"]{
    min-height:88vh!important;
  }
  /* Absolute-positioned hero cover images: keep covering the parent — do NOT
     convert to height:auto, that breaks position:absolute layouts. */
  [style*="position:absolute"][style*="object-fit:cover"]{
    height:100%!important;
    width:100%!important;
  }

  /* About hero split: each side gets a reasonable height when stacked */
  .r-split > *{min-height:auto!important}
  .r-split [style*="object-fit:cover"]{
    height:auto!important;
    aspect-ratio: 4 / 5;
    max-height:70vh;
  }

  /* Project detail cover (100vh fullscreen) — soften */
  [style*="height:100vh"]:not([style*="position:absolute"]){
    height:auto!important;
    min-height:62vh;
    max-height:80vh;
  }

  /* Projects grid: collapse the "feature spans 2" cells to span 1 so all
     thumbnails get equal width and predictable aspect ratio on mobile. */
  [style*="grid-template-columns:repeat(2,1fr)"] > [style*="grid-column: span 2"],
  [style*="grid-template-columns:repeat(2,1fr)"] > [style*="grid-column:span 2"],
  [style*="grid-template-columns: repeat(2,1fr)"] > [style*="grid-column: span 2"]{
    grid-column:span 1!important;
  }

  /* Project card / aspect-ratio frames: keep their declared aspectRatio so
     images don't squish — width:100% does the rest. */
  [style*="aspectRatio"] img,
  [style*="aspect-ratio"] img{
    width:100%!important;
    height:100%!important;
    object-fit:cover;
  }

  /* Card / thumbnail images keep aspect ratio without overflow */
  .card img,.thumb img,figure img{
    width:100%!important;
    height:auto!important;
    object-fit:cover;
  }

  /* Editorial plate (Home selected work): cap aspect so portrait crops aren't
     too tall on phones. */
  [style*="aspectRatio:'3 / 4'"]{ aspect-ratio: 4 / 5!important; }

  /* CV / About portraits become fluid */
  .cv-headgrid img{ width:100%; height:auto; object-position:center top; }

  /* Background-image hero panels: ensure full width visible */
  [style*="background-image"]{
    background-size:cover!important;
    background-position:center!important;
  }
}

/* Tiny phones — soften cropping further */
@media(max-width:420px){
  .r-split [style*="object-fit:cover"]{max-height:60vh}
}

/* ============================================================================
   Footer — stack columns and shrink long handles/emails on phones so words
   don't overflow or wrap one-per-line in narrow columns.
   ============================================================================ */
@media(max-width:760px){
  /* Footer top row (headline | columns) → stack. Match both spaced and
     unspaced inline-style serializations. */
  footer > div[style*="1.2fr 1.4fr"]{
    grid-template-columns:1fr!important;
    gap:36px!important;
  }
  /* Footer inner columns (Navigate | More | Contact) → 2 columns */
  footer div[style*="1fr 1fr 1.2fr"]{
    grid-template-columns:1fr 1fr!important;
    gap:24px!important;
    padding-left:0!important;
    border-left:none!important;
    border-top:1px solid rgba(255,255,255,0.1)!important;
    padding-top:28px!important;
  }
  /* Footer bottom bar: stack copyright + tagline */
  footer [style*="justify-content:space-between"][style*="border-top"],
  footer div[style*="space-between"][style*="border-top"]{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:8px!important;
    text-align:left!important;
  }
}

@media(max-width:520px){
  /* Footer text wraps normally — no global nowrap. Hyphenate only at
     explicit hyphens (manual) to avoid breaking short words mid-syllable. */
  footer, footer p, footer h2, footer button, footer a, footer div, footer .cv,
  footer [style*="fontFamily:var(--cond)"]{
    word-break:normal!important;
    overflow-wrap:break-word!important;
    white-space:normal!important;
    -webkit-hyphens:manual!important;
    hyphens:manual!important;
    -ms-hyphens:manual!important;
    line-height:1.6!important;
  }
  /* Headline: balance + hyphenate only long words (≥7 chars, ≥4 before
     break, ≥3 after) so short words like "with", "for", "and" stay intact. */
  footer h2{
    font-size:clamp(20px,5.8vw,28px)!important;
    line-height:1.22!important;
    letter-spacing:-0.005em!important;
    text-wrap:balance;
    -webkit-hyphens:auto!important;
    hyphens:auto!important;
    -webkit-hyphenate-limit-before:4;
    -webkit-hyphenate-limit-after:3;
    hyphenate-limit-chars:7 4 3;
    max-width:100%!important;
  }
  footer p{ text-wrap:balance; line-height:1.65!important; }

  /* Tighten footer top section spacing */
  footer > div:first-child{
    padding-bottom:36px!important;
    gap:28px!important;
  }

  /* Nav/contact labels: legible size + 44px tap target + WCAG AA contrast
     (rgba(255,255,255,0.92) on var(--ink-warm) → ~13:1, exceeds AAA). */
  footer button[style*="fontSize:20"],
  footer a[style*="fontSize:20"],
  footer div[style*="fontSize:20"]{
    font-size:15px!important;
    letter-spacing:0.015em!important;
    padding:11px 0!important;
    line-height:1.4!important;
    min-height:44px!important;
    text-wrap:balance;
    max-width:100%;
    color:rgba(255,255,255,0.92)!important;
    border-radius:4px;
    transition:color .2s, outline-color .2s, background .2s;
  }
  footer a[style*="fontSize:20"]{
    text-decoration:underline;
    text-decoration-color:rgba(201,164,92,0.55);
    text-underline-offset:3px;
  }

  /* Visible focus state — keyboard + mobile tap a11y (WCAG 2.4.7) */
  footer button:focus-visible,
  footer a:focus-visible{
    outline:2px solid var(--gold,#c9a45c)!important;
    outline-offset:3px!important;
    color:#fff!important;
    background:rgba(201,164,92,0.08)!important;
    text-decoration-color:var(--gold,#c9a45c)!important;
  }
  footer button:hover,
  footer a:hover{ color:#fff!important; }

  /* Column labels */
  footer div[style*="letterSpacing:0.22em"]{
    margin-bottom:12px!important;
    color:var(--gold-light)!important;
    line-height:1.5!important;
  }

  /* Email + Instagram handle ONLY: one-line ellipsis if too long. */
  footer a[href^="mailto:"],
  footer a[href*="instagram.com"]{
    display:block!important;
    max-width:100%!important;
    width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    -webkit-hyphens:none!important;
    hyphens:none!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
  }

  /* Bottom copyright bar */
  footer [style*="justify-content:space-between"][style*="border-top"] span{
    text-wrap:balance;
    line-height:1.55!important;
    letter-spacing:0.12em!important;
    color:rgba(255,255,255,0.78)!important;
  }
}

/* Orientation safety net — landscape phones still keep ellipsis on the
   contact links and don't re-introduce nowrap on body copy. */
@media(max-width:900px) and (orientation:landscape){
  footer a[href^="mailto:"],
  footer a[href*="instagram.com"]{
    display:block!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
}

@media(max-width:520px){
  body{overflow-wrap:normal;word-break:normal}
  .eyebrow{word-break:normal!important;overflow-wrap:normal!important}
}

/* ============================================================================
   Public pages — content density & spacing on mobile (Certificates / About /
   Contact / Project detail). Targets: readable cards, fewer cramped grids.
   ============================================================================ */
@media(max-width:760px){
  /* Certificates / works document grid: 2-col with breathing gap, taller
     thumb so titles below have room. */
  [style*="grid-template-columns:repeat(4,1fr)"]{
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }
  /* Doc card meta padding shrinks so title doesn't get clipped */
  [style*="grid-template-columns:repeat(4,1fr)"] button[style*="textAlign:left"] > div:last-child,
  [style*="grid-template-columns:repeat(4,1fr)"] button[style*="textAlign: left"] > div:last-child{
    padding:12px 12px 14px!important;
  }
  /* Memberships / training grids: stack to a single column for readability */
  [style*="grid-template-columns:repeat(3,1fr)"]{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  /* Cert/About cards: tighten padding */
  .sec [style*="padding:'28px 26px'"],
  .sec [style*="padding:'32px 28px'"]{
    padding:22px 20px!important;
    min-height:auto!important;
  }
  /* Contact cards (2-col) → stack on small phones */
  [style*="maxWidth:740"][style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  /* Project-detail year/title rows: stack year above title */
  .sec [style*="grid-template-columns:190px 1fr"]{
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding:18px 0!important;
  }
  /* Section headers — keep number, title, and line balanced on phones */
  .shead{flex-wrap:wrap!important}
  .shead .ln{display:none!important}
}

@media(max-width:420px){
  /* On very small phones the 2-col doc grid is too tight — go to single col */
  [style*="grid-template-columns:repeat(4,1fr)"]{
    grid-template-columns:1fr!important;
  }
  /* Tighten section padding further */
  .sec{padding:44px 16px!important}
}

/* ============================================================================
   Mobile cards polish — refined content presentation: lighter overlays,
   tighter spacing, predictable aspect ratios, no clipping or overlap.
   ============================================================================ */
@media(max-width:760px){
  /* Featured FeatureBlock card: shorter so it doesn't feel like a vertical
     poster, with softer gradient so the painting underneath remains visible
     instead of being half-black. */
  .card-btn [style*="minHeight:340"]{
    min-height:auto!important;
  }
  .card-btn [style*="aspect-ratio"]{ aspect-ratio:4/3 !important; }
  /* Force every project card frame to a consistent ratio on phones */
  .card-btn > div:first-child{
    aspect-ratio:4/3 !important;
    min-height:auto!important;
  }
  /* Soften both gradients (top overlay + featured bottom band) on phones */
  .card-btn [style*="linear-gradient(to top,rgba(8,7,6,0.92)"],
  .card-btn [style*="linear-gradient(to top,rgba(8,7,6,0.92"]{
    background:linear-gradient(to top,rgba(8,7,6,0.78),rgba(8,7,6,0.05) 65%,transparent)!important;
  }
  .card-btn [style*="linear-gradient(to top,rgba(10,10,10,0.4)"]{
    background:linear-gradient(to top,rgba(10,10,10,0.55),transparent 60%)!important;
  }
  /* Title block padding tightens so blurb doesn't clip against the edge */
  .card-btn [style*="padding:'clamp(24px,3vw,40px)'"]{
    padding:18px 18px 20px!important;
  }
  /* Card meta row: keep the title + Arabic on one row but allow soft wrap */
  .card-btn [style*="justify-content:space-between"][style*="gap:14"]{
    flex-wrap:wrap!important;
    gap:6px 12px!important;
  }
  /* Home grid rows: add breathing space between stacked cards */
  [style*="grid-template-columns:1.5fr 1fr"][style*="gap:2"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:2"]{ gap:12px!important; }
  [style*="grid-template-rows:1fr 1fr"][style*="gap:2"]{ gap:12px!important; }
  /* News cards: smaller min height, looser type */
  [style*="minHeight:150"]{ min-height:auto!important; padding:20px 18px!important; }

  /* About hero photo cap shouldn't sit on top of edge */
  [style*="left:32"][style*="bottom:30"]{ left:18px!important; bottom:18px!important; }

  /* Studio teaser: ensure portrait gets enough height when stacked */
  [style*="grid-template-columns:0.85fr 1.15fr"] > div:first-child{
    aspect-ratio:4/5!important; min-height:auto!important;
  }

  /* Project detail year/title spacing */
  .sec [style*="grid-template-columns:190px 1fr"]{
    padding:14px 0!important;
  }

  /* Certificates doc card title — prevent overlap with view link */
  [style*="grid-template-columns:repeat(4,1fr)"] h3{
    font-size:16px!important; line-height:1.18!important;
  }
  [style*="grid-template-columns:repeat(4,1fr)"] button{
    min-height:0!important;
  }
}

@media(max-width:420px){
  /* Even softer gradient on the smallest phones — RAA-style, image dominates */
  .card-btn [style*="linear-gradient(to top,rgba(8,7,6"]{
    background:linear-gradient(to top,rgba(8,7,6,0.6),rgba(8,7,6,0) 55%,transparent)!important;
  }
  .card-btn [style*="linear-gradient(to top,rgba(10,10,10"]{
    background:linear-gradient(to top,rgba(10,10,10,0.45),transparent 50%)!important;
  }
  .card-btn h3{ font-size:21px!important; line-height:1.1!important; }
  /* Hide the verbose blurb on tiny phones — RAA shows only title + location */
  .card-btn [style*="maxWidth:520"]{ display:none!important; }
}

/* ============================================================================
   RAA-style counter ornament (e.g. "01 / 13") for featured project tiles
   ============================================================================ */
.raa-counter{
  position:absolute; right:18px; bottom:18px; z-index:2;
  font-family:var(--cond,'Inter',sans-serif);
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  color:rgba(255,255,255,0.85);
  padding:6px 10px; background:rgba(10,10,10,0.35);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
@media(max-width:760px){
  .raa-counter{ right:14px; bottom:14px; font-size:10px; padding:5px 8px; }
}


/* ============================================================================
   Admin live preview — read-only mirror of the public Certificates grid
   so the user sees actual cards while drag-reordering in the CMS.
   ============================================================================ */
.cm-live-preview{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  background:var(--ivory,#fbf7ee); border:1px solid var(--rule,#e6e0d2);
  padding:2px; margin-top:12px;
}
@media(max-width:1100px){ .cm-live-preview{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:760px){  .cm-live-preview{ grid-template-columns:repeat(2,1fr); } }
.cm-live-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--ivory,#fbf7ee); border:1px solid rgba(0,0,0,0.08);
  transition:transform .25s, border-color .25s;
}
.cm-live-card.is-drag{ opacity:.55; }
.cm-live-card.is-over{ outline:2px solid var(--gold-deep,#a07f3e); outline-offset:-2px; }
.cm-live-thumb{
  aspect-ratio:1/1.3; width:100%; background:var(--warm,#efe7d4);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}
.cm-live-thumb img{ width:100%; height:100%; object-fit:cover; }
.cm-live-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:50%;
  background:rgba(8,7,6,0.62); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:16px;
  padding-left:3px; border:1px solid rgba(255,255,255,0.4);
}
.cm-live-cat{
  position:absolute; top:8px; left:8px;
  font:11px/1 var(--cond,'Bebas Neue'); letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-deep,#a07f3e);
  background:rgba(251,247,238,0.92); padding:4px 7px;
}
.cm-live-meta{ padding:12px 12px 14px; display:flex; flex-direction:column; gap:4px; flex:1; }
.cm-live-t{ font:300 16px/1.12 var(--serif,Georgia); color:var(--ink,#1a1612); }
.cm-live-ar{ font:14px/1 var(--serif,Georgia); color:var(--gold-deep,#a07f3e); direction:rtl; }
.cm-live-iss{ font:10px/1.2 var(--cond,'Bebas Neue'); letter-spacing:.08em; text-transform:uppercase; color:var(--muted,#7a716b); }
.cm-live-toolbar{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  padding:10px 12px; background:var(--warm,#efe7d4);
  border:1px solid var(--rule,#e6e0d2); border-bottom:none;
  font:11px/1 var(--cond,'Bebas Neue'); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink,#1a1612);
}
.cm-live-toolbar .sw{ margin-inline-start:auto; display:flex; align-items:center; gap:6px; cursor:pointer; }


/* ============================================================================
   PROJECT DETAIL — responsive cover, gallery, next-project
   ============================================================================ */
@media(max-width:900px){
  /* Cover: stack meta card below text, tighten padding */
  [style*="minHeight:'100vh'"][style*="paddingTop:56"]{min-height:auto!important;padding-top:80px!important}
  [style*="grid-template-columns:1.4fr 1fr"][style*="alignItems:end"]{
    grid-template-columns:1fr!important;gap:28px!important;padding-bottom:48px!important
  }
}
@media(max-width:640px){
  /* Gallery: single column, first item normal aspect */
  [style*="grid-template-columns:repeat(2,1fr)"][style*="gap:2"]{grid-template-columns:1fr!important}
  /* Next-project banner: shorter on phones */
  [style*="height:380px"],[style*="height:380"]{height:280px!important}
  /* Featured plate caption: smaller gap */
  [style*="flexWrap:'wrap'"][style*="letterSpacing:'0.2em'"]{gap:8px!important;font-size:10px!important}
}
/* Keep image aspect on small screens — never let images become tall stretched bars */
.cs-stage-img,.cs-swatch{max-width:100%}
img{max-width:100%;height:auto}

/* ============================================================================
   LUXE MASONRY — Selected Work editorial grid (Home)
   12-column desktop, single column mobile, calculated aspects + spacing
   ============================================================================ */
.luxe-masonry{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(14px,1.6vw,28px);
  margin-top:clamp(28px,3.5vw,52px);
  list-style:none;
  padding:0;
}
.luxe-masonry > *{min-width:0; list-style:none}
/* Mosaic spans: 6 cards, cinematic asymmetric rhythm */
.luxe-masonry .lm-1{grid-column:span 8} .luxe-masonry .lm-1 .lm-frame{aspect-ratio:16/10}
.luxe-masonry .lm-2{grid-column:span 4} .luxe-masonry .lm-2 .lm-frame{aspect-ratio:3/4}
.luxe-masonry .lm-3{grid-column:span 4} .luxe-masonry .lm-3 .lm-frame{aspect-ratio:4/5}
.luxe-masonry .lm-4{grid-column:span 4} .luxe-masonry .lm-4 .lm-frame{aspect-ratio:4/5}
.luxe-masonry .lm-5{grid-column:span 4} .luxe-masonry .lm-5 .lm-frame{aspect-ratio:1/1}
.luxe-masonry .lm-6{grid-column:span 7} .luxe-masonry .lm-6 .lm-frame{aspect-ratio:16/9}
.luxe-masonry .lm-7{grid-column:span 5} .luxe-masonry .lm-7 .lm-frame{aspect-ratio:4/5}

/* Tablet — fold to 6 columns */
@media (max-width: 1100px){
  .luxe-masonry{grid-template-columns:repeat(6,1fr); gap:clamp(14px,2vw,22px)}
  .luxe-masonry .lm-1,.luxe-masonry .lm-6{grid-column:span 6}
  .luxe-masonry .lm-1 .lm-frame{aspect-ratio:16/9}
  .luxe-masonry .lm-6 .lm-frame{aspect-ratio:16/9}
  .luxe-masonry .lm-2,.luxe-masonry .lm-3,.luxe-masonry .lm-4,
  .luxe-masonry .lm-5,.luxe-masonry .lm-7{grid-column:span 3}
  .luxe-masonry .lm-2 .lm-frame,.luxe-masonry .lm-7 .lm-frame{aspect-ratio:3/4}
  .luxe-masonry .lm-3 .lm-frame,.luxe-masonry .lm-4 .lm-frame{aspect-ratio:4/5}
  .luxe-masonry .lm-5 .lm-frame{aspect-ratio:1/1}
}

/* Mobile — single column, 28–44px breathing consistent across iPhone & Android.
   Linear interp: 28px at 360px viewport → 44px at 600px viewport, clamped. */
@media (max-width: 720px){
  .luxe-masonry{
    grid-template-columns:1fr;
    gap:clamp(28px, calc(28px + 16 * ((100vw - 360px) / 240)), 44px);
    margin-top:clamp(24px,6vw,36px);
  }
  .luxe-masonry .lm-1,.luxe-masonry .lm-2,.luxe-masonry .lm-3,
  .luxe-masonry .lm-4,.luxe-masonry .lm-5,.luxe-masonry .lm-6,
  .luxe-masonry .lm-7{grid-column:span 1}
  .luxe-masonry .lm-1 .lm-frame,.luxe-masonry .lm-6 .lm-frame{aspect-ratio:5/4}
  .luxe-masonry .lm-2 .lm-frame,.luxe-masonry .lm-4 .lm-frame,
  .luxe-masonry .lm-7 .lm-frame{aspect-ratio:4/5}
  .luxe-masonry .lm-3 .lm-frame,.luxe-masonry .lm-5 .lm-frame{aspect-ratio:1/1}
}

/* ============================================================================
   LUXE MASONRY — cinematic hover, LQIP blur-up, keyboard focus
   ============================================================================ */
.luxe-masonry .card-btn{
  position:relative;
  cursor:pointer;
  transition:transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
  border-radius:2px;
}
.luxe-masonry .lm-frame{
  background-color:#121212;
  background-size:cover;
  background-position:center;
}
.luxe-masonry .lm-frame::before{
  content:"";
  position:absolute; inset:0;
  background-image:inherit;
  background-size:cover;
  background-position:center;
  filter:blur(22px) saturate(1.05);
  transform:scale(1.08);
  transition:opacity .6s ease;
  z-index:0;
  pointer-events:none;
}
.luxe-masonry .lm-frame.is-loaded::before{ opacity:0 }
.luxe-masonry .lm-frame img{
  position:relative; z-index:1;
  opacity:0; transition:opacity .55s ease, transform .65s var(--ease);
}
.luxe-masonry .lm-frame.is-loaded img{ opacity:1 }

/* Cinematic gold overlay on hover/focus */
.luxe-masonry .lm-frame::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(212,175,55,0.20), transparent 60%),
    linear-gradient(180deg, rgba(212,175,55,0.06), rgba(11,11,11,0.18));
  opacity:0;
  transition:opacity .45s ease;
  pointer-events:none;
  z-index:2;
  mix-blend-mode:screen;
}
@media (hover:hover) and (pointer:fine){
  .luxe-masonry .card-btn:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -28px rgba(0,0,0,0.55) }
  .luxe-masonry .card-btn:hover .lm-frame::after{ opacity:1 }
}
/* Keyboard focus — WCAG 2.4.7, gold ring + lift */
.luxe-masonry .card-btn:focus-visible{
  outline:none;
  transform:translateY(-4px);
  box-shadow:0 0 0 2px var(--bg-deep,#0B0B0B), 0 0 0 4px var(--gold,#D4AF37), 0 30px 60px -28px rgba(0,0,0,0.55);
}
.luxe-masonry .card-btn:focus-visible .lm-frame::after{ opacity:1 }
@media (prefers-reduced-motion: reduce){
  .luxe-masonry .card-btn,
  .luxe-masonry .lm-frame img,
  .luxe-masonry .lm-frame::before,
  .luxe-masonry .lm-frame::after{ transition:none !important }
  .luxe-masonry .card-btn:hover,
  .luxe-masonry .card-btn:focus-visible{ transform:none }
}