/* Porthos Collection -- editorial exhibition redesign, 2026-09-21.
   Art-directed against a contemporary-gallery reference (split-screen
   compositions, warm neutral palette, restrained serif display type,
   small tracked uppercase labels, strong grid, very little visible UI)
   -- translated to put PAINTINGS, not architecture photography, as the
   dominant visual material. Reuses the main site's established type/
   color system (Cormorant Garamond + Inter, gold accent, warm ivory
   ground -- see /index.html's inline :root) rather than inventing a
   second palette.

   Still native-scroll only: nothing here drives position, no scroll-
   jacking, no parallax, no momentum. The one motion effect (.reveal)
   is a plain opacity/transform transition triggered by an
   IntersectionObserver in collection.js -- CSS has no scroll-linked
   values at all. */
:root{
  --gold:#8A5B00;
  --gold-light:#B8860B;
  --gold-dim:rgba(138,91,0,0.12);
  --bg:#F7F4EF;
  --surface:#FFFFFF;
  --surface2:#F3F1EC;
  --border:rgba(31,41,51,0.10);
  --text:#1F2933;
  --muted:#667085;
  --max:1440px;
  --max-wide:1760px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}

.idx{font:500 11px/1 'Inter',sans-serif;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold)}
.meta-line{font:400 11.5px/1.5 'Inter',sans-serif;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.artwork-title{font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--text);margin-top:10px}

/* ---------------------------------------------------------------
   Reveal-on-scroll -- a plain fade + slight rise, once per section,
   triggered by IntersectionObserver (see collection.js). Not
   scroll-linked: once .is-visible is added it stays, so this can
   never look like scroll-jacking or momentum, just a section quietly
   arriving as the visitor reaches it.
   --------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1),transform 0.9s cubic-bezier(0.16,1,0.3,1)}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------------------------------------------------------------
   About the Gallery -- THIS IS THE PAGE'S OPENING: the very first
   viewport, no hero/title section before it. ONE section, TWO
   original images side by side (a flex row, default
   align-items:stretch so both columns always share the same height,
   "visually balanced" by construction rather than by eyeballed
   numbers):

   LEFT (.opening-hall) -- the gallery's own physical interior photo.
   Environmental imagery, allowed to crop (object-fit:cover) to fill
   whatever width flex:1 leaves it. Anchored top-left (0% 0%) because
   the painted coin+PORTHOS lockup sits in that corner of the source
   photo, and this column's own aspect ratio shifts with viewport
   width even though its height doesn't -- sometimes that crops
   vertically, sometimes horizontally, and top-left anchoring is the
   one anchor that keeps the lockup in frame either way.

   RIGHT (.about-artwork-wrap) -- the commissioned Porthos Art Gallery
   artwork (collection.js's ABOUT_ARTWORK_SRC), which already contains
   the full "About the Gallery" composition baked in. Locked to its
   exact 9:16 ratio (aspect-ratio:9/16 with height:100% from the
   stretched row, width auto-derived) so it can never crop or
   distort -- unlike the hall photo, this one's true composition must
   always be fully visible. .about-artwork-cta is a transparent
   overlay (plain % positioning, since this wrapper always matches
   the image's exact ratio) directly over the baked-in "Discover the
   Collection" text.

   Below collection.css's own mobile breakpoint, the row becomes a
   column instead of squeezing two side-by-side portrait images into
   illegibility -- see the max-width:860px block.
   --------------------------------------------------------------- */
/* height (not just min-height) is required here: the artwork column's
   height:100% + aspect-ratio:9/16 needs a DEFINITE parent height to
   resolve against, and a flex container sized only by min-height
   doesn't reliably give its stretched children one -- without this,
   the artwork column silently falls back to the image's raw natural
   pixel size instead of the intended viewport height. */
.about-gallery{display:flex;height:100vh;background:var(--bg)}
.opening-hall{position:relative;overflow:hidden;flex:1;background:var(--surface2)}
.opening-hall>img{width:100%;height:100%;object-fit:cover;object-position:0% 0%;display:block;position:absolute;inset:0}
.hall-brand-link{position:absolute;z-index:2;display:block;text-decoration:none}
.hall-brand-mark{position:absolute;left:0;top:0;width:23.7%;height:100%;border-radius:50%;display:block}

.about-artwork-wrap{position:relative;flex:none;height:100%;aspect-ratio:9/16}
.about-artwork{width:100%;height:100%;object-fit:contain;display:block}
.about-artwork-cta{position:absolute}

/* ---------------------------------------------------------------
   Split moments -- a large artwork paired with a quiet label field.
   split-left keeps the artwork on the wide (1.4fr) column and the
   caption on the narrow one; split-right mirrors it. Two separate
   classes (not one + a modifier) so each can own its own
   grid-template-columns without DOM-order/`order` gymnastics.
   --------------------------------------------------------------- */
.split-left,.split-right{display:grid;align-items:center;gap:0;max-width:var(--max);margin:0 auto;padding:150px 40px}
.split-left{grid-template-columns:1.4fr 1fr}
.split-right{grid-template-columns:1fr 1.4fr}
.split-art{display:flex;align-items:center;justify-content:center;padding:0 48px}
.split-art img{max-width:100%;max-height:78vh;width:auto;height:auto;object-fit:contain}
.split-panel{padding:0 24px}
.split-right .split-panel{padding-left:0;padding-right:48px}
.split-left .split-panel{padding-left:48px}
.split-panel .artwork-title{font-size:clamp(24px,2.3vw,32px)}

/* ---------------------------------------------------------------
   Panorama moments -- the widest visual beat on the page,
   deliberately allowed to exceed the normal max-width for a genuine
   "extremely wide" impression. Caption sits quietly underneath, left-
   aligned, never overlaid on the image itself.
   --------------------------------------------------------------- */
.panorama-full{max-width:var(--max-wide);margin:0 auto;padding:170px 32px}
.panorama-art{width:100%}
.panorama-art img{width:100%;height:auto;object-fit:contain}
.panorama-meta{max-width:520px;margin-top:26px}

/* ---------------------------------------------------------------
   Monumental -- ONE work (Square or Portrait), as large as the
   viewport comfortably allows, centered, caption quietly below. The
   page's "occasional near-full-viewport presentation" beat -- a
   Square reads as a commanding block, a Portrait as a commanding
   figure. Never two works here; see collection.js's HARD RULE note.
   --------------------------------------------------------------- */
.monumental{max-width:var(--max);margin:0 auto;padding:120px 40px;text-align:center}
.monumental-art img{max-width:100%;max-height:88vh;width:auto;height:auto;margin:0 auto;object-fit:contain}
.monumental .cap{margin-top:28px}

/* ---------------------------------------------------------------
   Solo offset -- ONE work pushed to one side of the section (its own
   caption tucked directly beneath it), with a large deliberate field
   of negative space on the other side. This is where "left / center
   / right positioning" comes from now that no second artwork ever
   shares the row -- -left and -right alternate which side carries
   the visual weight through the page.
   --------------------------------------------------------------- */
.solo-offset{display:flex;max-width:var(--max);margin:0 auto;padding:140px 40px}
.solo-offset-left{justify-content:flex-start}
.solo-offset-right{justify-content:flex-end}
.solo-offset-inner{max-width:52%}
.solo-offset-inner img{max-width:100%;max-height:72vh;width:auto;height:auto;object-fit:contain}
.solo-offset-right .solo-offset-inner{text-align:right}

/* ---------------------------------------------------------------
   Quiet solo -- a deliberate pause in the rhythm: one work, narrower
   than the split/panorama treatments, with far more vertical
   whitespace than any other section on the page.
   --------------------------------------------------------------- */
.solo-quiet{max-width:640px;margin:0 auto;padding:210px 32px;text-align:center}
.solo-art img{max-width:100%;max-height:70vh;width:auto;height:auto;margin:0 auto;object-fit:contain}

/* ---------------------------------------------------------------
   Clickable artwork surfaces -- no card chrome. No border, no fill,
   no shadow: the painting sits directly on the page, exactly as
   instructed ("no borders unless genuinely necessary").
   --------------------------------------------------------------- */
.art-btn{cursor:pointer;border:none;background:none;padding:0;display:block;width:100%}
.art-btn:focus-visible{outline:2px solid var(--gold);outline-offset:10px}
.art-btn img{transition:transform 0.7s cubic-bezier(0.16,1,0.3,1)}
.art-btn:hover img,.art-btn:focus-visible img{transform:scale(1.012)}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.collection-footer{max-width:var(--max);margin:0 auto;padding:40px 32px 100px;text-align:center}
.back-link{color:var(--muted);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;transition:color 0.2s}
.back-link:hover{color:var(--gold)}

/* ---------------------------------------------------------------
   Detail lightbox -- unchanged behavior, restyled to match the
   refined palette. Never crops; always shows the full composition.
   --------------------------------------------------------------- */
.detail-backdrop{position:fixed;inset:0;z-index:200;background:rgba(18,15,10,0.86);display:flex;align-items:center;justify-content:center;padding:28px;backdrop-filter:blur(3px)}
.detail-backdrop[hidden]{display:none}
.detail-panel{position:relative;max-width:min(94vw,1150px);max-height:92vh;width:100%;display:flex;flex-direction:column;align-items:center}
.detail-image-wrap{max-width:100%;max-height:74vh}
.detail-image-wrap img{max-width:100%;max-height:74vh;width:auto;height:auto;display:block;object-fit:contain}
.detail-meta{margin-top:26px;text-align:center;color:var(--bg)}
.detail-meta h2{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:600;margin-bottom:7px}
.detail-meta p{font-family:'Inter',sans-serif;font-size:12px;letter-spacing:0.09em;text-transform:uppercase;opacity:0.72}
.detail-close{position:absolute;top:-46px;right:0;width:40px;height:40px;border-radius:50%;border:1px solid rgba(247,244,239,0.3);background:rgba(247,244,239,0.08);color:var(--bg);font-size:20px;line-height:1;cursor:pointer;transition:background 0.2s}
.detail-close:hover{background:rgba(247,244,239,0.18)}

/* ---------------------------------------------------------------
   Mobile -- the desktop split/offset logic is NOT literally
   preserved. Every section collapses to one dominant artwork, full
   width, with its caption flowing underneath -- the solo-offset
   left/right positioning (a desktop-only device, since there's no
   spare horizontal space to offset into on a phone) simply becomes
   centered, full-width, like every other single-artwork section.
   --------------------------------------------------------------- */
@media (max-width:860px){
  /* Two side-by-side portrait images stop working below this width --
     each would shrink to an illegible sliver. Stack them instead:
     hall photo full-bleed on top, artwork below with its own
     breathing room (matching how it was sized when it stood alone,
     before this row existed). */
  .about-gallery{flex-direction:column;height:auto}
  .opening-hall{flex:none;width:100%;min-height:60vh}
  .about-artwork-wrap{flex:none;height:auto;width:min(92vw,calc(60vh * 0.5625));margin:32px auto}

  .split-left,.split-right{grid-template-columns:1fr;padding:88px 24px;gap:28px}
  .split-art{padding:0}
  .split-panel,.split-right .split-panel,.split-left .split-panel{padding:0}

  .panorama-full{padding:96px 20px}
  .panorama-meta{max-width:100%}

  .monumental{padding:80px 24px}
  .monumental-art img{max-height:64vh}

  .solo-offset{padding:88px 24px;justify-content:center!important}
  .solo-offset-inner{max-width:100%;text-align:center!important}

  .solo-quiet{padding:120px 24px;max-width:100%}

  .detail-panel{max-width:100%}
  .detail-close{top:-44px;right:4px}
}