/*
Ithaca Gallery — shared site CSS.
Consolidated from the Claude Design handoff's repeated <helmet><style> blocks
(same rules appeared near-identically across Home, Artist Page, Featured Artwork, etc.).
This is the one file every template can rely on for nav, footer, cards, and responsive rules.
*/

/* Featured Artwork archive: custom artist-filter dropdown (matches site chrome, no native
   <select> UI). Built to design's exact spec. */
.fa-filter{position:relative}
.fa-menu{position:absolute;top:calc(100% + 12px);left:0;min-width:220px;max-height:360px;overflow-y:auto;background:#fff;border:1px solid #ececec;box-shadow:0 26px 44px -24px rgba(0,0,0,.28);padding:8px 0;z-index:25}
.fa-opt{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:'Inter',system-ui,sans-serif;font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:#555;padding:11px 22px;transition:color .18s ease,background .18s ease;white-space:nowrap}
.fa-opt:hover{color:#141414;background:#f7f7f7}
.fa-caret{transition:transform .25s ease}
.fa-open .fa-caret{transform:rotate(180deg)}

*,*::before,*::after{box-sizing:border-box}
/* overflow-x:clip, not hidden -- hidden makes body an actual scroll container (its paired
   overflow-y computes to auto per the CSS spec when only one axis is set to non-visible), which
   breaks position:sticky for the header on mobile (a scrolling ancestor other than the real
   viewport confuses sticky's containing-block math). clip still fully contains any horizontal
   overflow without creating a scroll container, so the header can stay pinned correctly. */
html,body{margin:0;overflow-x:clip;max-width:100%}
body{font-family:'Inter',system-ui,sans-serif;color:#141414;background:#fff;-webkit-font-smoothing:antialiased}
a{color:inherit}

/* WordPress core injects margin-block-start on every direct child of .wp-site-blocks except
   the first (see twentytwentyfour's global styles) -- the header is exempted as :first-child,
   but the content block right after it is not, creating a visible gap between the sticky nav
   and whatever the page's first section is (most visible on dark hero sections). Reset it. */
header.wp-block-template-part + *{margin-block-start:0!important}

/* WordPress core adds a visible outline to any focused element (`.wp-site-blocks *:focus`),
   which shows as a black box around links/buttons/images right after a mouse click (e.g. the
   artwork frame, save button). Suppress it for pointer clicks only -- keyboard-tab focus (an
   accessibility requirement) still gets a visible outline via :focus-visible. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible){outline:none!important}

/* Artist page hero: the eyebrow/title/meta blocks have no margin set via their JSON style
   attribute (spacing.margin doesn't reliably translate to rendered CSS for these blocks --
   same failure mode already documented for Editorial Home's post-terms/post-excerpt), so they
   were falling back to the theme's default block/heading margins instead of the design's exact
   24px/0/20px rhythm. Scoped to this hero specifically since post-title/paragraph margins differ
   by context elsewhere on the site. */
.ithaca-artist-hero .wp-block-paragraph{margin-bottom:24px}
.ithaca-artist-hero .wp-block-post-title{margin:0;line-height:1}

/* Artist bio paragraphs: wpautop() wraps migrated multi-paragraph biographies in plain <p> tags
   with no class -- give them breathing room so they read as distinct paragraphs, matching the
   ~20-22px paragraph gaps used elsewhere on the site (About page, legal pages). */
.ithaca-artist-bio p{margin:0 0 20px}
.ithaca-artist-bio p:last-child{margin-bottom:0}

/* Home Current Exhibition (#current) is a raw section with no block-gap margin, but the section
   right AFTER it inherits WordPress's default block-gap margin-block-start (~19px). That opened a
   gap between the full-bleed exhibition image and the next gray divider, while the top divider sat
   flush. Zero it so the image bleeds to both dividers symmetrically. */
#current + *{margin-block-start:0 !important}

/* Site header: sticky, pinned under the WP admin bar when logged in so it isn't clipped by it. */
header.wp-block-template-part{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid #ececec}
body.admin-bar header.wp-block-template-part{top:32px}
@media screen and (max-width:782px){
  body.admin-bar header.wp-block-template-part{top:46px}
}

/* Nav mega-menu */
.nav-item{position:relative;display:flex;align-items:center}
.nav-caret{margin-left:5px;transition:transform .25s ease}
.nav-item:hover .nav-caret{transform:rotate(180deg)}
.nav-mega{position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid #ececec;box-shadow:0 26px 40px -26px rgba(0,0,0,.22);padding:32px 0;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .28s ease,transform .28s ease,visibility .28s;z-index:20}
.nav-mega.open{opacity:1;visibility:visible;transform:translateY(0)}
.mega-eyebrow{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#141414;margin-bottom:14px}
.mega-desc{font-size:13px;font-weight:400;line-height:1.6;color:#6e6e73}
.mega-link{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#141414;text-decoration:none;transition:color .18s ease;line-height:1.05}
.mega-link:hover{color:#6e6e73}

/* Mobile nav / drawer */
.nav-burger{display:none;background:none;border:none;padding:0;cursor:pointer;align-items:center;margin-right:2px}
.navtoggle{display:none}
.mobile-drawer{display:none;position:fixed;top:61px;left:0;right:0;bottom:0;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:40}
.md-link{display:block;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14);color:#fff;text-decoration:none;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.md-label{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#6e6e73;padding:22px 0 6px}

/* Framed artwork tiles */
.iw-frame,.fw-frame{transition:box-shadow .45s ease, transform .45s ease}
.iw-tile:hover .iw-frame,.fw-tile:hover .fw-frame{box-shadow:0 30px 62px -22px rgba(0,0,0,.5);transform:translateY(-5px)}
.iw-tile:hover .iw-acts{opacity:1 !important;transform:translateY(0) !important}
.hp-card:hover .hp-img{transform:scale(1.03)}
.hp-card:hover .hp-head{color:#000}
.hp-artist:hover .hp-aimg{transform:scale(1.04)}

/* Query-Loop artwork tile (Featured Artwork archive, Home's Featured Works) — a small
   floating framed placeholder centered inside a larger gray "wall" box. Explicit classes,
   not Gutenberg's JSON style/layout attributes, so the CSS here is exactly what ships,
   with no dependency on how core block-editor JSON gets translated. */
/* CSS Grid's default align-items:stretch makes every cell in a row match the tallest one,
   which was locking all tiles in a row to whatever height the browser's initial layout pass
   produced -- overriding the per-tile height the JS sets afterward for every item except
   the one that happened to establish the row height first. Opt out of stretch entirely. */
.wp-block-post-template.is-layout-grid{align-items:start}
.ithaca-fw-item{position:relative}
/* 9:10 aspect ratio via the classic padding-percentage technique (padding-top is % of WIDTH),
   not the newer CSS aspect-ratio property -- this guarantees a definite height regardless of
   how it interacts with the surrounding CSS Grid/flex layers, so the absolutely-positioned
   action icons always have a real box to anchor to instead of collapsing to content height. */
.ithaca-fw-tile{background:#ededef;position:relative;overflow:hidden}
.ithaca-fw-tile::before{content:"";display:block;padding-top:111.111%}
.ithaca-fw-tile-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0!important}
.ithaca-fw-tile-inner>*{margin-block-start:0!important}
.ithaca-fw-acts{position:absolute;right:16px;bottom:16px;display:flex;gap:9px;z-index:2;margin:0!important}
.ithaca-fw-view,.ithaca-fw-save{width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid #e6e6e6;box-shadow:0 4px 12px -4px rgba(0,0,0,.2);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#141414;text-decoration:none}
.ithaca-fw-view:hover{background:#141414;color:#fff}
.ithaca-fw-save:hover{background:#f2f2f2}
.ithaca-fw-save.is-saved svg{fill:#141414}
.ithaca-fw-frame{border:8px solid #141414;background:#fff;box-shadow:0 22px 40px -22px rgba(0,0,0,.35);width:52%}
.ithaca-fw-pad{background:#fff;padding:5.5%}
.ithaca-fw-pattern{width:100%;aspect-ratio:4/5;background:repeating-linear-gradient(45deg,#e9e9ea 0 11px,#e3e3e5 11px 22px);display:flex;align-items:center;justify-content:center}
.ithaca-fw-pattern .wp-block-post-title{font-family:ui-monospace,Menlo,monospace;font-size:9.5px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:rgba(20,20,20,.3);text-align:center;line-height:1.5;padding:0 16px;max-width:82%}
.ithaca-fw-pattern .wp-block-post-title a{color:inherit;text-decoration:none}

/* Editorial Home cards (Latest/Featured/Archive) -- explicit classes because post-terms/
   post-excerpt only translate a subset of their JSON style attributes (fontSize works,
   color/letterSpacing/textTransform/lineHeight silently don't), same failure mode already
   documented elsewhere in this project. */
.ithaca-editorial-meta{display:flex;align-items:center;gap:6px;margin:20px 0 10px}
.ithaca-editorial-meta .wp-block-post-terms{font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#6e6e73}
.ithaca-editorial-meta .wp-block-post-terms a{color:inherit;text-decoration:none}
.ithaca-editorial-meta .wp-block-post-date{font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#6e6e73}
.ithaca-editorial-meta .wp-block-post-date::before{content:"\00b7";margin-right:6px;color:#6e6e73}
.ithaca-editorial-card .wp-block-post-title,.ithaca-editorial-feat .wp-block-post-title{letter-spacing:-.005em;line-height:1.35;color:#141414;margin:0 0 10px}
.ithaca-editorial-card .wp-block-post-title a,.ithaca-editorial-feat .wp-block-post-title a{color:inherit;text-decoration:none}
.ithaca-editorial-card .wp-block-post-excerpt,.ithaca-editorial-feat .wp-block-post-excerpt{color:#6b6b6b;line-height:1.6}
.ithaca-editorial-card .wp-block-post-excerpt p,.ithaca-editorial-feat .wp-block-post-excerpt p{margin:0}
/* Cap card blurbs to 2 lines (the migrated excerpts run long). */
.ithaca-editorial-card .wp-block-post-excerpt,.ithaca-editorial-feat .wp-block-post-excerpt{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ithaca-editorial-card .wp-block-post-excerpt__more-text,.ithaca-editorial-feat .wp-block-post-excerpt__more-text{display:none}

/* Exhibition gallery popup (full-screen sequential viewer) */
.ithaca-gallery-popup{display:none;position:fixed;inset:0;z-index:100000;background:#fff;flex-direction:column;overflow:hidden}
.ithaca-gallery-topbar{display:flex;align-items:center;justify-content:center;position:relative;padding:22px 28px;flex-shrink:0}
.ithaca-gallery-back{background:none;border:none;cursor:pointer;font-family:inherit;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#141414;padding:0 0 3px;border-bottom:1px solid #141414}
.ithaca-gallery-close{position:absolute;right:28px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:#141414;border:none;cursor:pointer;color:#fff;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center}
.ithaca-gallery-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:8px 90px 40px;min-height:0;min-width:0}
.ithaca-gallery-prev,.ithaca-gallery-next{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid #e2e2e2;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#141414;font-size:22px;line-height:1}
.ithaca-gallery-prev{left:28px}
.ithaca-gallery-next{right:28px}
/* Restored to match the original design handoff exactly (Exhibition Template.dc.html) after a
   run of mobile-specific fixes today drifted away from it: height:100% + aspect-ratio (set by JS
   per photo) + max-width:100% safety net, mat-pattern background always visible behind the
   photo, box-shadow on this frame. min-width:0 is one addition beyond the handoff -- a real
   WebKit/Safari flexbox bug (a flex child sized via aspect-ratio ignores its own max-width unless
   min-width:0 is also set) that has nothing to do with the visual design.
   The handoff's height:100%/max-width:100% have no absolute ceiling of their own -- on a wide
   desktop window, max-width:100% still means "100% of the stage," which on a 1920px-wide browser
   is well over 1000px, so a landscape photo can still span nearly the full window width even with
   the height capped. max-height:78vh handles the "too tall" direction; max-width:920px handles
   the "too wide" direction the same way -- a sensible absolute ceiling regardless of how wide or
   tall the actual browser window is, not a mobile-only breakpoint. Tightened 78vh/920px ->
   60vh/680px (still too big) -> 45vh/500px (overcorrected, too small) -> settled on the
   midpoint of the last two steps: 52vh/590px. */
.ithaca-gallery-image{max-height:52vh;max-width:min(100%, 590px);min-width:0;min-height:0;background:repeating-linear-gradient(45deg,#e6e6e8 0 13px,#dedee0 13px 26px);display:flex;align-items:center;justify-content:center;box-shadow:0 30px 60px -30px rgba(0,0,0,.4);position:relative}
.ithaca-gallery-counter-bg{position:absolute;right:44px;top:0;font-family:'Noto Serif Display',serif;font-size:clamp(24px,3vw,44px);font-weight:400;color:#dcdcdc;pointer-events:none}
.ithaca-gallery-caption-inline{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(20,20,20,.34);text-align:center;padding:0 24px;line-height:1.6}
.ithaca-gallery-footer{text-align:center;padding:0 48px 30px;flex-shrink:0}
.ithaca-gallery-artist{font-size:13px;font-weight:600;color:#141414}
.ithaca-gallery-title{font-size:12px;font-weight:400;color:#6e6e73;margin-top:5px}
.ithaca-gallery-price{font-size:12px;font-weight:400;color:#141414;margin-top:5px}

/* Artwork page image slides (Framed / Full Image toggle) */
.ithaca-slide-prev,.ithaca-slide-next{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid #e0e0e0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#141414;z-index:3}
.ithaca-slide-prev:hover,.ithaca-slide-next:hover{background:#141414;color:#fff}
.ithaca-slide-prev{left:18px}
.ithaca-slide-next{right:18px}
.ithaca-slide-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:9px;z-index:3}
.ithaca-slide-dots button{width:8px;height:8px;border-radius:50%;padding:0;border:none;cursor:pointer;background:#8a8a8a}

/* Horizontal scroll rows (homepage, Editorial Home). Plain markup (e.g. a row of <a> tags)
   can just use .hscroll directly. A WordPress Query Loop is different: the block always
   wraps its repeated items in its OWN <ul class="wp-block-post-template">, one level below
   wherever .hscroll gets applied -- so the flex/scroll behavior has to target that <ul>
   descendant, not the .hscroll element itself, or the posts silently stay in a vertical list. */
.hscroll{display:flex;gap:40px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.hscroll::-webkit-scrollbar{display:none}
.hscroll>a{scroll-snap-align:start;flex:0 0 auto}

.hscroll .hs-work,.hscroll .hs-artist,.hscroll .hs-article{scroll-snap-align:start;flex:0 0 auto}
.hscroll .hs-artist{width:clamp(200px,16.5vw,244px)}
.hscroll .hs-article{width:clamp(340px,31vw,460px)}
/* No rounded corners on any featured image (kills the theme default rounding site-wide). */
.wp-block-post-featured-image,.wp-block-post-featured-image img{border-radius:0}

/* Editorial article body -- matches Editorial Article.dc.html: narrow serif reading column,
   drop cap on the opening paragraph, clean image/heading/pull-quote treatment. Neutralizes the
   old-site block wrappers (global-padding / background groups) that came in with migrated content. */
/* Article header eyebrow: force the post-terms/post-date blocks to inherit the small eyebrow size
   (they render at the theme default otherwise, making the eyebrow look oversized). */
.ithaca-article-eyebrow,.ithaca-article-eyebrow *,.ithaca-article-eyebrow .wp-block-post-terms,.ithaca-article-eyebrow .wp-block-post-date,.ithaca-article-eyebrow p{font-size:11px!important;font-weight:600;letter-spacing:.16em;color:#6e6e73;margin:0}
.ithaca-article-eyebrow .wp-block-post-terms a{color:inherit;text-decoration:none}

.ithaca-article-body{font-family:'Noto Serif Display',serif;font-size:15px;font-weight:400;line-height:1.9;color:#1f1f1f}
/* No extra top gap on the article body's first element (WP core injects margin-block-start). */
.ithaca-article-body > *:first-child,.ithaca-article-body .wp-block-group:first-child > *:first-child,.ithaca-article-body figure:first-child{margin-top:0!important}
.ithaca-article-body .wp-block-group{padding:0!important;background:none!important;max-width:100%!important}
.ithaca-article-body p{margin:0 0 22px;text-align:left}
/* Force heading sizes over the inline font-size the old-site content set on each <h2>/<h3>
   (they came in at 13-14px, inverting the hierarchy vs the bold sub-labels). */
.ithaca-article-body h2,.ithaca-article-body h3{font-family:'Inter',sans-serif!important;letter-spacing:-.01em!important;line-height:1.3!important;color:#141414;text-align:left;padding:0!important}
.ithaca-article-body h2{font-size:20px!important;font-weight:600!important;margin:46px 0 16px!important}
.ithaca-article-body h3{font-size:16px!important;font-weight:600!important;margin:34px 0 12px!important}
/* Bold sub-heading labels (a <strong> at the start of a paragraph) -> sans-serif to match headings. */
.ithaca-article-body p > strong:first-child{font-family:'Inter',sans-serif;font-weight:600;letter-spacing:-.005em}
.ithaca-article-body figure,.ithaca-article-body .wp-block-image{margin:38px 0}
.ithaca-article-body img{width:100%;height:auto;display:block;border-radius:0}
.ithaca-article-body figcaption{font-family:'Inter',sans-serif;font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#6e6e73;text-align:center;margin-top:14px}
.ithaca-article-body blockquote{border:none;margin:44px 0;padding:0}
.ithaca-article-body blockquote p{font-family:'Noto Serif Display',serif;font-size:23px;font-style:italic;font-weight:400;line-height:1.5;color:#141414;text-align:center}
.ithaca-article-body a{color:#141414;text-decoration:underline;text-underline-offset:2px}
.ithaca-article-body hr{border:none;border-top:1px solid #ececec;margin:44px 0}
/* full-bleed images can break out of the 680px column up to ~980px, like the design's wider plates */
.ithaca-article-body figure.alignwide,.ithaca-article-body .alignwide{width:min(980px,90vw);margin-left:calc(50% - min(490px,45vw));margin-right:0}
.hscroll .wp-block-post-template{display:flex;gap:40px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px;list-style:none;margin:0;padding-left:0}
.hscroll .wp-block-post-template::-webkit-scrollbar{display:none}
.hscroll .wp-block-post-template>li{scroll-snap-align:start;flex:0 0 auto;margin:0}
.hs-work{width:340px}
/* Same width as .hs-work -- keeps the "sliver of the next card" peek at the row's right edge
   identical between Featured Works and From the Journal instead of each carousel cutting off
   at a different point. */
.hs-article{width:340px}
.hs-artist{width:190px}

/* Buttons */
.cta-btn:hover{background:#f0f0f0}
.cta-under:hover{opacity:.55}
.hero-cta-light:hover{opacity:.85}
.hero-cta-under:hover{opacity:.6}

/* Responsive */
@media (max-width:900px){
  /* Editorial newsletter (text | form) stacks to one column on tablet/mobile. */
  .ithaca-ednews{grid-template-columns:1fr !important;gap:36px !important}
  .nav-left .nav-item{display:none !important}
  /* Keep the nav-right container (and the Saved heart specifically) visible on mobile so it
     sits top-right opposite the hamburger -- only hide the other nav-right links, which already
     live in the hamburger drawer. */
  .nav-right-link{display:none !important}
  .nav-burger{display:flex !important}
  /* Mobile uses the hamburger drawer instead, so nav-mega is never opened here -- but its closed
     state was only visibility:hidden/opacity:0, which still occupies layout space (240px-wide
     columns, several hundred px total). That space still counts toward the document's real
     scrollable width, and iOS Safari's elastic/bounce scroll can still drag the viewport
     sideways into it even though overflow-x:hidden clips it visually. Removing it from layout
     entirely on mobile is the actual fix, not just visually hiding it again. */
  .nav-mega{display:none !important}
  .navtoggle:checked ~ .mobile-drawer{display:block !important}
  .grid-3{grid-template-columns:1fr 1fr !important}
  .grid-5,.works-grid{grid-template-columns:repeat(2,1fr) !important}
  .split{grid-template-columns:1fr !important;min-height:0 !important}
  .split-text{padding:52px 0 60px 0 !important}
  .split-img{min-height:50vh !important}
  .ithaca-cur-exh{grid-template-columns:1fr !important;min-height:0 !important}
  .ithaca-cur-exh-img{min-height:50vh !important}
  .ithaca-cur-exh-text{padding:52px 24px 60px !important}
  .ithaca-aw-hero{grid-template-columns:1fr !important;padding:0 0 40px !important}
  .ithaca-aw-hero-img{min-height:60vh !important;padding:40px 24px !important}
  .ithaca-aw-hero-info{padding:40px 24px 24px !important}
  .footer-grid{grid-template-columns:1fr 1fr !important;gap:44px 40px !important}
  .dt-main{grid-template-columns:1fr !important}
  .dt-related{grid-template-columns:repeat(2,1fr) !important}
  .ithaca-work-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:40px 2px !important}
  .rgrid-3{grid-template-columns:repeat(2,1fr) !important}
  .insitu{grid-template-columns:1fr !important;gap:32px !important}
  .insitu-textfirst>div:first-child{order:2}
  .insitu-textfirst>div:last-child{order:1}
  /* Artist page "On this page / Biography / Selected Works / Inquire" jump-nav: 4 items with
     generous letter-spacing never fit a phone-width row, and with no white-space:nowrap the
     multi-word labels ("On this page", "Selected Works") wrapped mid-label instead of the row
     itself scrolling -- reading as messy stacked/broken text. Tightened gap and let it scroll
     horizontally (same hidden-scrollbar technique as .hscroll) instead of wrapping. */
  .ithaca-artist-jumpnav{gap:18px !important}
  .ithaca-artist-jumpnav::-webkit-scrollbar{display:none}
  .ithaca-artists-grid{grid-template-columns:repeat(2,1fr) !important}
  .ithaca-past-exh-grid{grid-template-columns:repeat(2,1fr) !important;gap:40px 28px !important}
  .ithaca-related-services-grid{grid-template-columns:repeat(2,1fr) !important;gap:28px !important}
  .ithaca-404-grid{grid-template-columns:repeat(2,1fr) !important}
  .ithaca-svc-hero{grid-template-columns:1fr !important;min-height:0 !important}
  .ithaca-svc-whatwedo{grid-template-columns:1fr !important;gap:0 !important}
  .ithaca-svc-approach{grid-template-columns:1fr !important;gap:48px !important}
  .ithaca-svc-faq{grid-template-columns:1fr !important;gap:56px !important}
  .ithaca-svc-faq-aside{position:static !important;top:auto !important}
  /* Hero text block has an asymmetric desktop padding (96px 96px 96px 0) that leaves 0 left /
     96px right when the hero stacks on mobile. Drop the horizontal padding entirely (the wrapper
     now supplies the side margin) and use a sane mobile vertical rhythm so the heading aligns
     with the image and every other section. */
  .ithaca-svc-hero>div:first-child{padding:52px 0 44px 0 !important}
  /* Exhibition gallery lightbox: base desktop styles (90px side padding, image sized purely by
     height:100% of the stage) were only ever corrected below 640px -- between 640-900px (a
     narrowed browser window, small laptop, or tablet) it still fell through to the full desktop
     padding with no height cap, so the image dominated the window edge-to-edge. Widening this to
     the same 900px breakpoint every other tablet-down rule on the site already uses, and adding
     a real height cap (previously only padding was adjusted, which wasn't enough on its own). */
  /* Stage side padding is what caps the image's max-width (max-width:100% resolves against the
     stage's content box) -- it needs to stay bigger than the arrow buttons' own footprint
     (left/right offset + button width) or the image can render as wide as/wider than the arrows,
     visually falling underneath them instead of staying narrower. */
  .ithaca-gallery-stage{padding:16px 64px 28px !important}
  .ithaca-gallery-prev{left:12px !important}
  .ithaca-gallery-next{right:12px !important}
  .ithaca-gallery-prev,.ithaca-gallery-next{width:38px !important;height:38px !important;font-size:18px !important}
  .ithaca-gallery-footer{padding:0 24px 24px !important}
}
@media (max-width:640px){
  .nav-grid,.wrap,.wrap-narrow{padding-left:24px !important;padding-right:24px !important}
  /* Section wrappers with a hardcoded 48px inline side-padding (the site's standard desktop
     content margin) never had a mobile reduction -- unlike .wrap/.wrap-narrow above, these are
     one-off inline styles with no class hook, so a class-based rule can't reach them. Targeting
     every distinct vertical value found sitewide (all share the same 48px horizontal value) is
     safer than a generic "contains 48px" selector, which risks matching unrelated properties. */
  [style*="padding:0 48px"],[style*="padding:16px 48px"],[style*="padding:20px 48px"],[style*="padding:22px 48px"],
  [style*="padding:36px 48px"],[style*="padding:44px 48px"],[style*="padding:48px 48px"],[style*="padding:56px 48px"],
  [style*="padding:60px 48px"],[style*="padding:64px 48px"],[style*="padding:72px 48px"],
  [style*="padding:80px 48px"],[style*="padding:88px 48px"],[style*="padding:96px 48px"],
  [style*="padding:104px 48px"],[style*="padding:112px 48px"],[style*="padding:120px 48px"]
  {padding-left:24px !important;padding-right:24px !important}
  /* Service hero wrapper uses padding:0 48px (not caught by the list above); bring it to the
     same 24px mobile margin as every other section. */
  .ithaca-svc-hero{padding-left:24px !important;padding-right:24px !important}
  .grid-3,.grid-5,.works-grid{grid-template-columns:1fr !important}
  .rgrid-3{grid-template-columns:1fr !important}
  .footer-grid{grid-template-columns:1fr !important;gap:36px !important}
  .ithaca-past-exh-grid{grid-template-columns:1fr !important}
  .hs-work{width:78vw}
  .hs-article{width:78vw}
  .hs-artist{width:46vw}
  .ithaca-work-icon{width:30px !important;height:30px !important}
  .ithaca-work-icon svg{width:12px !important;height:12px !important}
  /* Exhibition detail hero title/credit use percentage-based left/right insets (8%) for a
     large-screen editorial look -- on mobile that shrinks to ~30px and scales with viewport
     width instead of the fixed 24px every other section on the site uses, reading as
     inconsistent side padding. Switch to the same fixed 24px standard on mobile. */
  .ithaca-exh-hero-title{left:24px !important;max-width:calc(100% - 48px) !important}
  .ithaca-exh-hero-credit{right:24px !important}
  /* Tighter than the shared 900px gallery rule above, for true phone widths. Side padding (48px)
     must stay bigger than the arrow buttons' own footprint (8px offset + 34px width = 42px) so
     the image's max-width never renders as wide as the arrows. */
  .ithaca-gallery-stage{padding:12px 48px 20px !important}
  .ithaca-gallery-prev{left:8px !important}
  .ithaca-gallery-next{right:8px !important}
  .ithaca-gallery-prev,.ithaca-gallery-next{width:34px !important;height:34px !important;font-size:16px !important}
  .ithaca-gallery-footer{padding:0 20px 20px !important}
}

/* Home hero image — landscape group shot; bias the mobile crop toward the two
   in-focus figures on the right so it doesn't collapse to a blurry center slice. */
@media (max-width:768px){
  .home-hero-img{object-position:72% 22%}
}

/* Editorial featured images (home row + editorial hub): iOS Safari mishandles `img{height:100%}`
   inside a figure sized by `aspect-ratio` -- the parent's aspect-derived height isn't treated as
   definite, so the image falls back to its intrinsic height and stretches ("distorts on mobile").
   Fill via absolute positioning instead: the positioned figure gives the img a definite box, and
   object-fit:cover crops rather than stretches. Bulletproof across browsers. */
.ithaca-editorial-card .wp-block-post-featured-image,
.ithaca-editorial-feat .wp-block-post-featured-image{position:relative;overflow:hidden}
.ithaca-editorial-card .wp-block-post-featured-image img,
.ithaca-editorial-feat .wp-block-post-featured-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}