/* ============================================================
   site-fixes.css — the ONLY css we author.
   Loaded LAST, after the original theme + Jetpack override, so it
   patches things the mirror can't inherit (dead plugins etc.)
   WITHOUT editing the original stylesheets.
   ============================================================ */

/* ---- Photo Book "flipbook" reconstruction ----
   The Photo Book Gallery plugin rendered these as a page-flip viewer at a
   modest page size. Its JS is gone, so the pages were stretching to full
   container width and upscaling (pixelation). Present them instead as a
   clean, centred sequence of book pages, capped so they never upscale. */
/* ---- Book reader: the ORIGINAL jQuery Booklet plugin (page curl + edge/corner curl).
   Booklet's own CSS styles the processed `.flipbook.booklet`. These rules only cover the
   pre-init / no-JS state so it degrades to a clean centred page stack instead of raw huge
   images. carousels.js no longer touches .flipbook. ---- */
/* left-align the book with the rest of the page (slideshow, body text, its own caption all sit at the
   content's left edge — a centred book broke that convention). Small shadow so it lifts off the white. */
.flipbook{ margin:2rem 0 !important; }   /* !important: the plugin sets margin:auto to centre it */
.flipbook.booklet{ margin-left:0 !important; margin-right:auto !important; box-shadow:0 6px 22px rgba(0,0,0,.20); }
.flipbook:not(.booklet){ display:block; max-width:480px; }
.flipbook:not(.booklet) > *{ margin:0 0 8px; }
.flipbook:not(.booklet) img{ display:block; width:100%; height:auto; box-shadow:0 1px 6px rgba(0,0,0,.14); }
/* the booklet plugin ships an empty loading-spinner div (~394px wide) that does nothing without its
   JS but pushes the page ~19px past the viewport -> a shaky horizontal scroll on mobile. Kill it.
   (.wcp-size-image is the hidden reference image init.js measures for responsive width — keep it
   capped so, on the brief moment it's shown at 100%, it can't itself overflow.) */
.wcp-loader{ display:none !important; }
.wcp-size-image{ max-width:100% !important; }
/* in category-archive excerpts, just show the cover as a small preview (no reader loads there) */
.su-post .flipbook, .type-post .entry-summary .flipbook{ display:block; max-width:200px; overflow:hidden; margin:0; }
.su-post .flipbook img:not(:first-child), .type-post .entry-summary .flipbook img:not(:first-child){ display:none; }

/* ---- EWIC "flexslider" slideshow reconstruction ----
   The image-collection slideshows were driven by flexslider JS: the base CSS
   hides <ul.slides> (display:none) and JS reveals one slide at a time. With the
   JS stripped, the whole slideshow collapsed to height 0 (images invisible).
   Rebuild it JS-free as a horizontal scroll-snap carousel — one image at a time,
   swipe/scroll to advance, every slide reachable, nothing cropped. */
/* must be positioned so the absolute prev/next arrows anchor to the slideshow, not a
   distant ancestor (a static box let the "›" escape and float over the body text on mobile). */
.flexslider{ position:relative !important; margin:1.5rem 0; }
.flexslider .slides{
  display:flex !important;
  overflow-x:auto;
  scroll-snap-type:x proximity;         /* looser snap -> gentler, WP-like feel */
  scroll-behavior:smooth;
  gap:0; margin:0; padding:0; list-style:none;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;                 /* keep a visible affordance that it scrolls */
  background:transparent;               /* no dark band — letterbox reads as page white */
}
/* the ewic caption was just the image's "." title — suppress the stray dot */
.flexslider .flex-caption{ display:none !important; }
.flexslider .slides > li{
  display:block !important; float:none !important;
  flex:0 0 100%; margin:0; scroll-snap-align:center;
}
.flexslider .slides > li > a{ display:block; }
.flexslider .slides img, .flexslider .ewic-wid-imgs{
  display:block !important; width:100% !important; height:auto !important;
  max-height:78vh; object-fit:contain; margin:0 auto;
}
/* the theme's own JS prev/next arrows and dot nav do nothing now — hide them */
.flexslider .flex-direction-nav, .flexslider .flex-control-nav{ display:none !important; }

/* our subtle reconstructed arrows (carousels.js) — plain chevrons, no button/circle background
   (Kai: "no round thingies"). White with a soft shadow so they read on any image; hover-revealed. */
.cz-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:3rem; height:4rem; padding:0; border:0; border-radius:0; background:transparent;
  color:#fff; text-shadow:0 1px 5px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.6);
  font-size:3rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; }
.cz-prev{ left:.4rem; } .cz-next{ right:.4rem; }
.flexslider:hover .cz-nav, .hl-reel:hover .cz-nav{ opacity:.75; }
.cz-nav:hover{ opacity:1; background:transparent; }
@media(hover:none){ .cz-nav{ opacity:.4; } }   /* touch: keep a faint hint */
/* on a multi-image POST carousel, make the swipe affordance obvious (arrows always visible + counter) */
.diary-post-media .cz-nav{ opacity:.55; }
.diary-post-media:hover .cz-nav{ opacity:.8; }
.cz-count{ position:absolute; bottom:.7rem; left:50%; transform:translateX(-50%); z-index:5;
  background:rgba(0,0,0,.6); color:#fff; font-size:1.1rem; letter-spacing:.03em;
  padding:.2rem .8rem; border-radius:1rem; pointer-events:none; }

/* ---- landing page: image-based PROJECT GRID with two kinds of tile ----
   .is-project  = bold title, links to the project page (primary navigation)
   .is-lightbox = reconstructed WP gallery image, enlarges in place (subtle expand cue on hover) ---- */
/* column masonry (natural image heights, varied) — shuffled + sampled by lightbox.js on each load,
   so the tiles are never all in a row and the mix feels fresh every visit. */
.project-grid{ column-count:3; column-gap:1.8rem; margin:1.5rem 0 0; }
.pgrid-tile{ display:inline-block; width:100%; margin:0 0 1.8rem; position:relative;
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  text-decoration:none; color:inherit; border:0; background:none; padding:0; text-align:left; font:inherit; cursor:pointer; }
/* a white veil over each tile — fades the non-menu tiles toward white while a genuine menu (project)
   tile is hovered, so the real navigation stands out. Hover-capable devices only (never on touch,
   where there's no persistent hover — keeps the mobile experience simple). */
.pgrid-tile::before{ content:""; position:absolute; inset:0; z-index:2; background:#fff; opacity:0;
  transition:opacity .5s ease; pointer-events:none; }
@media (hover:hover){
  .project-grid:has(.is-project:hover) .pgrid-tile:not(.is-project)::before{ opacity:.7; }
}
.pgrid-tile .pt-img{ display:block; position:relative; overflow:hidden; background:#f2f2f2; }
.pgrid-tile .pt-img img{ width:100%; height:auto; display:block; transition:transform .4s ease; }
.pgrid-tile:hover .pt-img img{ transform:scale(1.03); }
/* project tiles: bold title = "enter the project" */
.is-project .pt-name{ display:block; margin:.6rem 0 0; font-family:"Roboto Condensed", sans-serif;
  font-weight:700; font-size:1.55rem; line-height:1.25; color:#222; }
.is-project:hover .pt-name{ color:#000; }
/* corner cue on hover: ⤢ = enlarge here (lightbox), ↗ = go to the diary post */
.is-lightbox .pt-img::after, .is-diary .pt-img::after{ position:absolute; right:.5rem; bottom:.5rem;
  width:2.4rem; height:2.4rem; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); color:#fff; font-size:1.5rem; border-radius:2px; opacity:0; transition:opacity .2s; }
.is-lightbox .pt-img::after{ content:"\2922"; }
.is-diary .pt-img::after{ content:"\2197"; }
.is-lightbox:hover .pt-img::after, .is-diary:hover .pt-img::after{ opacity:1; }
@media(hover:none){ .is-lightbox .pt-img::after, .is-diary .pt-img::after{ opacity:.85; } }

/* the enlarge-in-place overlay */
.lbx{ position:fixed; inset:0; z-index:1000; background:rgba(18,18,18,.93);
  display:flex; align-items:center; justify-content:center; padding:4vh 4vw; }
.lbx[hidden]{ display:none; }
.lbx-fig{ margin:0; display:flex; flex-direction:column; align-items:center; max-width:100%; max-height:100%; }
.lbx-img{ max-width:100%; max-height:80vh; object-fit:contain; display:block; box-shadow:0 4px 30px rgba(0,0,0,.5); }
.lbx-cap{ color:#e9e9e9; font-size:1.35rem; line-height:1.5; margin:1.1rem 0 0; max-width:70ch; text-align:center; }
.lbx-link{ color:#fff; font-weight:700; font-size:1.4rem; margin:.6rem 0 0; text-decoration:underline; }
.lbx-close{ position:fixed; top:1rem; right:1.6rem; width:4rem; height:4rem; border:0; background:none;
  color:#fff; font-size:3.4rem; line-height:1; cursor:pointer; }
@media(max-width:820px){ .project-grid{ column-count:2; column-gap:1.4rem; } }
@media(max-width:480px){ .project-grid{ column-count:1; } }

/* ---- Jetpack "tiled gallery" reconstruction ----
   Tiled galleries need JS to measure and position their mosaic tiles; the
   `tiled-gallery-unresized` state is what you get without it. Flatten the
   row/group wrappers and lay the items out as a clean responsive mosaic. */
/* True column MASONRY (Pinterest-style), no JS — restores the original /projects/ feel:
   varied-height tiles in columns, whole images (never cropped), captions beneath. */
.tiled-gallery{ column-count:3; column-gap:10px; width:100%; }
.tiled-gallery .gallery-row, .tiled-gallery .gallery-group{ display:contents; }
.tiled-gallery .tiled-gallery-item{
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  margin:0 0 10px; display:block; width:100% !important; height:auto !important;
}
.tiled-gallery .tiled-gallery-item img{ display:block; width:100% !important; height:auto !important; }
.tiled-gallery .tiled-gallery-caption{ font-size:.76em; color:#888; line-height:1.35; padding:3px 2px 0; }
@media(max-width:820px){ .tiled-gallery{ column-count:2; } }
@media(max-width:480px){ .tiled-gallery{ column-count:1; } }

/* ---- FontAwesome tofu cleanup ----
   The theme marks category/tag/comment meta and blockquotes with FontAwesome
   glyphs. That font isn't loaded in the static mirror (the site has no social-
   icon markup that would justify shipping it), so those glyphs rendered as empty
   tofu boxes — e.g. the □ beside "project". Suppress the leftover glyphs and
   reclaim the 25px the icon reserved so the label sits flush left. */
.meta-list li::before{ content:none !important; }
.meta-list li{ padding-left:0 !important; }
blockquote::before, .format-quote .entry-title::before{ content:none !important; }

/* ---- publication / news list: a clean two-column catalogue row (cover | text),
   with the cover at its NATURAL shape (books are portrait/landscape, not squares) ---- */
.su-post{ display:grid; grid-template-columns:130px 1fr; column-gap:1.6rem; align-items:start; margin-bottom:2.2rem; }
.su-post > *{ grid-column:2; }                         /* title, meta, excerpt in the right column */
/* override the theme's fixed 100x100 square thumbnail box + object-fit:cover crop.
   align-self:start + capped max-height stop the cover stretching down the tall text row. */
.su-post-thumbnail{ grid-column:1; grid-row:1 / 99; margin:0 !important; align-self:start;
  width:auto !important; height:auto !important; float:none !important; }
.su-post .su-post-thumbnail img, .su-post .wp-post-image{
  width:auto !important; height:auto !important; aspect-ratio:auto !important; min-height:0 !important;
  max-width:130px !important; max-height:190px !important;
  object-fit:contain !important; box-shadow:0 1px 6px rgba(0,0,0,.12); }

/* ---- art.thing.notes journal (artist's diary, rebuilt from the IG archive) ---- */
.diary-intro{ max-width:640px; margin:.5rem 0 1.8rem; color:#666; font-size:1.55rem; line-height:1.55; }
.diary-nav{ display:flex; flex-wrap:wrap; gap:.4rem .5rem; margin:0 0 1.8rem; }
/* subtle sage accent — reads as its own layer without shouting on the neutral page */
/* NOTE: the theme sets html{font-size:10px} (62.5% base), so 1rem = 10px.
   All diary type is scaled to that base: site body text is 1.4rem (14px). */
.diary-nav button{
  font:inherit; font-size:1.25rem; letter-spacing:.02em; color:#5b6e5f; background:#f4f6f3;
  border:1px solid #dfe6dc; border-radius:2px; padding:.4rem .9rem; cursor:pointer; transition:.15s;
}
.diary-nav button:hover{ background:#e9efe6; }
.diary-nav button.on{ background:#5b6e5f; color:#fff; border-color:#5b6e5f; }
/* ROW-based grid so posts read left-to-right in DATE order (a diary is chronological;
   column-masonry filled top-to-bottom per column and scrambled the order) */
.diary-stream{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.6rem 1.4rem; align-items:start; }
.diary-card{ margin:0; background:#fff; border:1px solid #ededed;
  text-decoration:none; color:inherit; transition:box-shadow .15s, transform .15s; }
.diary-card:hover{ box-shadow:0 3px 14px rgba(0,0,0,.13); transform:translateY(-2px); }
@media(max-width:820px){ .diary-stream{ grid-template-columns:repeat(2, 1fr); } }
@media(max-width:480px){ .diary-stream{ grid-template-columns:1fr; } }
.diary-media{ position:relative; background:#111; }
.diary-media img{ display:block; width:100%; height:auto; }
.diary-carousel{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; background:#111; scrollbar-width:thin; }
.diary-carousel img, .diary-carousel video{ flex:0 0 100%; scroll-snap-align:center; }
.diary-media video, .diary-post-media video{ display:block; width:100%; height:auto; background:#111; }
.diary-vid{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:5.2rem; height:5.2rem; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.5); color:#fff; font-size:1.9rem; padding-left:.3rem;
  border-radius:50%; pointer-events:none; }
.diary-body{ padding:1.1rem 1.2rem 1.2rem; display:flex; flex-direction:column; gap:.7rem; }
.diary-body time{ font-size:1.1rem; letter-spacing:.05em; text-transform:uppercase; color:#999; }
.diary-body p{ margin:0; font-size:1.4rem; line-height:1.5; color:#333;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ---- single post page (the actual post, links out to Instagram) ---- */
.diary-post-page{ max-width:680px; margin:0 auto; }
.diary-back a{ font-size:1.2rem; color:#5b6e5f; text-decoration:none; }
.diary-post-media{ background:#111; margin:.6rem 0 1.4rem; }
.diary-post-media > img{ display:block; width:100%; height:auto; }
.diary-post-media .diary-carousel img{ height:auto; max-height:80vh; object-fit:contain; }
.diary-post-date{ display:block; font-size:1.1rem; letter-spacing:.05em; text-transform:uppercase; color:#999; margin-bottom:.6rem; }
.diary-post-caption{ font-size:1.5rem; line-height:1.6; color:#2b2b2b; white-space:normal; }
.diary-post-tags{ font-size:1.2rem; color:#8aa08a; margin:1rem 0 .3rem; word-spacing:.2rem; }
.diary-translation{ font-size:1.35rem; color:#444; }
.diary-translation summary{ cursor:pointer; color:#5b6e5f; font-size:1.2rem; letter-spacing:.02em; }
.diary-translation p{ margin:.6rem 0 0; line-height:1.55; }
.diary-link{ font-size:1.2rem; color:#888; text-decoration:none; border-bottom:1px solid #ddd; align-self:flex-start; }
.diary-link:hover{ color:#222; }

/* ---- Highlights: each curated collection as a swipeable slideshow ---- */
.diary-highlights{ margin:0 0 2.4rem; }
.diary-highlights > h2{ font-size:1.5rem; letter-spacing:.08em; text-transform:uppercase; color:#333; margin:0 0 .3rem; }
.diary-hl-note{ margin:0 0 1.2rem; font-size:1.25rem; color:#8a8a8a; }
.hl-reel{ margin:0 0 1.3rem; }
.hl-reel h3{ font-size:1.3rem; letter-spacing:.03em; margin:0 0 .45rem; font-weight:600; }
.hl-reel h3 a{ color:#5b6e5f; text-decoration:none; }
.hl-reel h3 a:hover{ text-decoration:underline; }
.hl-ext{ font-size:.85em; opacity:.55; }
.hl-carousel{
  display:flex; gap:6px; overflow-x:auto; scroll-snap-type:x proximity; scroll-behavior:smooth;
  background:#f6f6f6; padding:0; scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
.hl-carousel a{ flex:0 0 auto; display:block; scroll-snap-align:start; }
.hl-carousel img{ height:340px; width:auto; display:block; }

/* menu tint reverted to the theme's original light grey + hover-reveal (Kai's preference) */

/* ---- section "separator" headings (e.g. "Selected screenings / exhibitions") ----
   The original theme rendered h*.separator at 40px — more than twice the site's own
   heading scale (page title & widget titles are 18px), which read as a mistake. Bring it
   into line with the rest of the site: a quiet 18px Roboto Condensed section label with a
   hairline rule above it to do the "separating" the class name promises. */
h1.separator, h2.separator, h3.separator, h4.separator{
  font-family:"Roboto Condensed", "Helvetica Neue", Arial, sans-serif !important;
  font-size:1.8rem !important; font-weight:700 !important; line-height:1.3 !important;
  color:#333 !important; text-transform:none !important; letter-spacing:0 !important;
  margin:2.4rem 0 1rem !important; padding-top:1.4rem !important;
  border-top:1px solid #e6e6e6 !important; }

/* ---- artwork "tombstone" caption (title. artist. year. medium. venue. photo credit) ----
   Authored as the first paragraph of a project page; tagged .artwork-caption in the build so
   it reads as image metadata, not body copy. */
.entry-content p.artwork-caption{
  font-size:1.3rem; line-height:1.5; color:#8a8a8a; font-style:italic;
  margin:0 0 1.8rem; max-width:62ch; }

/* ---- mobile navigation: collapse the long sidebar menu behind a hamburger ----
   On desktop the menu is the left sidebar (unchanged). At <=768px the theme stacks the
   header, which previously dumped the entire ~18-item menu above the content. Hide it behind
   a burger toggle (pure CSS, no JS) so a visitor lands on content, not the menu. */
.nav-toggle{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.nav-burger{ display:none; }
@media(max-width:768px){
  #tab-1{ position:relative; }
  .nav-burger{ display:flex; flex-direction:column; justify-content:center; gap:5px;
    position:absolute; top:.4rem; right:1.2rem; width:44px; height:44px; padding:9px 8px;
    box-sizing:border-box; cursor:pointer; z-index:60; }
  .nav-burger span{ display:block; height:2px; width:100%; background:#333; border-radius:2px;
    transition:transform .25s, opacity .2s; }
  #site-navigation .menu{ display:none; }
  #nav-toggle:checked ~ #site-navigation .menu{ display:block; }
  /* morph the burger into an X while open */
  #nav-toggle:checked ~ .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  #nav-toggle:checked ~ .nav-burger span:nth-child(2){ opacity:0; }
  #nav-toggle:checked ~ .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}