/*
Theme Name: Bianca Cork
Description: Design B (gallery-minimal). Layout is fixed in PHP templates; content comes from Works, fields and pages.
Version: 0.1.0
Requires PHP: 8.1
Update URI: false
*/
/* ============================================================
   gallery-minimal (design B)
   White ground, black/grey type, the work carries the colour.
   Inter Tight for everything; Instrument Serif italic only for
   artwork titles and the odd accent word (gallery convention).
   Spacing uses two steps only: --space-1 (header to content, image
   to text) and --space-2 (between sections).
   ============================================================ */
:root{
  --bg:#FFFFFF;
  --ink:#0B0B0B;
  --grey:#6B6B6B;    /* ~5.3:1 on white */
  --soft:#333333;
  --field:#8A8A8A;   /* input underline, ~3.4:1 (WCAG 1.4.11) */
  --line:#E6E6E4;
  --tint:#F4F4F2;
  --sans:"Inter Tight", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif:"Instrument Serif", Georgia, "Times New Roman", serif;
  --gutter:clamp(1rem, 4vw, 3.5rem);
  --measure:36rem;
  --space-1:clamp(1.5rem, 3vw, 2.5rem);
  --space-2:clamp(3rem, 6vw, 5rem);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; padding-inline:var(--gutter);
  background:var(--bg); color:var(--ink);
  font:400 16px/1.55 var(--sans); -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important}
}

/* ---------- chrome ---------- */
.top{
  position:sticky; top:0; z-index:10;
  margin-inline:calc(-1 * var(--gutter)); padding:1.1rem var(--gutter);
  background:rgba(255,255,255,.92); backdrop-filter:blur(12px);
  display:flex; justify-content:space-between; align-items:baseline; gap:.4rem 2rem; flex-wrap:wrap;
}
/* logged-in editors: stick below the WordPress toolbar (it scrolls away under 600px) */
.admin-bar .top{top:32px}
@media screen and (max-width:782px){ .admin-bar .top{top:46px} }
@media screen and (max-width:600px){ .admin-bar .top{top:0} }
.name{font-weight:500; letter-spacing:-.01em}
.top nav{display:flex; gap:clamp(1rem,2.5vw,2rem)}
.top nav a{color:var(--grey); transition:color .2s}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}
.foot{
  margin:var(--space-2) calc(-1 * var(--gutter)) 0; padding:1.5rem var(--gutter) 2rem;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem 2rem;
  font-size:.8rem; color:var(--grey);
}
.foot a:hover{color:var(--ink)}

/* ---------- type ---------- */
.kicker{font-size:.8rem; color:var(--grey); margin:0 0 1.25rem}
.display{
  font-weight:300; font-size:clamp(2.3rem, 5.6vw, 5rem); line-height:1.02;
  letter-spacing:-.04em; margin:0; max-width:22ch; text-wrap:balance;
}
.display em{font-family:var(--serif); font-style:italic; font-weight:400; font-size:1.08em; letter-spacing:-.01em}
.title{font-family:var(--serif); font-style:italic; font-size:1.12em; color:var(--ink)}
.lede{font-size:clamp(1.1rem,1.6vw,1.35rem); font-weight:300; line-height:1.45; max-width:40rem; margin:1.5rem 0 0}
.meta{font-size:.85rem; color:var(--grey); margin:.75rem 0 0}
.idx{color:var(--grey); font-variant-numeric:tabular-nums; font-weight:400}
.arrow-link{border-bottom:1px solid currentColor; padding-bottom:.1rem; white-space:nowrap}
.arr{display:inline-block; transition:transform .4s var(--ease)}
a:hover .arr,button:hover .arr{transform:translateX(.3em)}
.crumb{font-size:.8rem; color:var(--grey); margin:0 0 1.25rem}
.crumb a:hover{color:var(--ink)}

/* ---------- layout blocks ---------- */
.intro{padding-block:.5rem var(--space-1)}
.page-head{padding-block:.5rem 0}
.sec{padding-top:var(--space-2)}
.sec.tight{padding-top:var(--space-1)}
.sec-head,.cv{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:.75rem 2rem;
  border-top:1px solid var(--ink); padding-top:1rem;
}
.sec-head{margin-bottom:var(--space-1)}
.sec-head h2,.cv h2{font-size:.8rem; font-weight:500; margin:0; display:flex; gap:1.25rem}
.sec-head p{margin:0; font-size:clamp(1.25rem,2.2vw,1.75rem); font-weight:300; line-height:1.28; letter-spacing:-.02em; max-width:34ch}
.sec-head p + p{margin-top:1.25rem}
.sec-head p.long{font-size:clamp(1.1rem,1.6vw,1.35rem); line-height:1.45; letter-spacing:-.01em; max-width:46ch}
.sec-head p.more{font-size:1rem; letter-spacing:0; margin-top:1.75rem}
.sec-head.chapter-head h2{font-size:clamp(1.6rem,3vw,2.4rem); font-weight:300; letter-spacing:-.03em; line-height:1.05}
.sec-head.chapter-head p{font-size:1rem; color:var(--grey); letter-spacing:0; max-width:40ch}
.sec-head.chapter-head .arrow-link{color:var(--ink); margin-left:.4rem}
@media (max-width:700px){ .sec-head,.cv{grid-template-columns:1fr} }

/* ---------- home ---------- */
.hero{margin:0}
.hero img{width:100%; height:auto; max-height:88vh; object-fit:contain; object-position:left bottom}
.cap{display:flex; flex-wrap:wrap; gap:.2rem 1.5rem; align-items:baseline; font-size:.8rem; color:var(--grey); margin-top:.8rem}

.series-list{border-bottom:1px solid var(--line)}
.srow{
  display:grid; grid-template-columns:3rem minmax(0,1fr); gap:1.5rem; align-items:start;
  padding-block:clamp(1.5rem,3vw,2.5rem); border-top:1px solid var(--line);
}
.srow:first-child{border-top:0; padding-top:0}
.srow h3{font-weight:300; font-size:clamp(2rem,5vw,4.2rem); letter-spacing:-.04em; line-height:1; margin:0 0 .75rem; transition:transform .5s var(--ease)}
.srow:hover h3{transform:translateX(.4rem)}
.srow p{margin:0; color:var(--grey); max-width:42ch}
.srow img{width:min(100%,22rem); height:auto; margin:0 0 1rem}
@media (max-width:700px){
  .srow{grid-template-columns:1fr}
  .srow > .idx{display:none}
}

.duo{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2) 2rem}
.duo > div{border-top:1px solid var(--ink); padding-top:1rem}
.duo h2{font-size:.8rem; font-weight:500; margin:0 0 var(--space-1); display:flex; gap:1.25rem}
.duo h3{font-size:clamp(1.25rem,2.2vw,1.75rem); font-weight:300; line-height:1.28; letter-spacing:-.02em; margin:0 0 1.25rem; max-width:24ch}
.duo p{margin:0 0 1rem; color:var(--soft); max-width:46ch}
.duo .more{margin-top:1.75rem}
@media (max-width:700px){ .duo{grid-template-columns:1fr} }


.rows{list-style:none; margin:0; padding:0}
.rows li{
  display:grid; grid-template-columns:6rem minmax(0,1fr) minmax(0,14rem); gap:.2rem 1.5rem; align-items:baseline;
  padding-block:1rem; border-top:1px solid var(--line);
}
.rows .yr{color:var(--grey); font-size:.85rem; font-variant-numeric:tabular-nums}
.rows .what{font-size:clamp(1.05rem,1.8vw,1.35rem); font-weight:300; letter-spacing:-.015em; line-height:1.3}
.rows .where{color:var(--grey); font-size:.85rem; text-align:right}
.rows a{border-bottom:1px solid var(--line)}
.rows a:hover{border-bottom-color:var(--ink)}
.rows.compact li{grid-template-columns:5rem minmax(0,1fr) minmax(0,11rem); padding-block:.65rem}
.rows.compact .what{font-size:.98rem; font-weight:400; letter-spacing:0}
@media (max-width:700px){
  .rows li,.rows.compact li{grid-template-columns:3.5rem minmax(0,1fr)}
  .rows .where{grid-column:2; text-align:left}
}
.more{margin:2rem 0 0}

.cta{padding-top:var(--space-2)}
.cta .display{display:inline-block}

/* ---------- work index ---------- */
.chips{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem}
.chips a{border:1px solid var(--line); border-radius:999px; padding:.4rem .9rem; font-size:.85rem; transition:border-color .2s}
.chips a:hover{border-color:var(--ink)}
.chips a[aria-current]{background:var(--ink); color:#fff; border-color:var(--ink)}
.chips sup{font-size:.65em; opacity:.6; margin-left:.2rem}
.chapter{padding-top:var(--space-2)}

/* works hang on a common baseline, at their own proportions — no cropping */
.hang{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:clamp(2.5rem,5vw,4.5rem) clamp(1.25rem,3vw,2.5rem); align-items:end;
}
.tile-img{height:clamp(9rem,20vw,18rem); display:flex; align-items:flex-end}
.tile-img img{max-width:100%; max-height:100%; width:auto; height:auto; transition:opacity .3s}
.tile:hover img{opacity:.82}
.tile-cap{margin:.8rem 0 0; font-size:.8rem; line-height:1.4; color:var(--grey)}
.tile-cap .title{display:block; font-size:1.1rem; margin-bottom:.1rem}
@media (max-width:600px){ .hang{grid-template-columns:repeat(2,minmax(0,1fr))} }

.film{margin:0; max-width:60rem}
.poster{position:relative; aspect-ratio:16/9; background:var(--tint); overflow:hidden}
.poster img,.poster video{display:block; width:100%; height:100%; object-fit:cover}
.play{
  position:absolute; left:1rem; bottom:1rem; padding:.45rem .9rem; border-radius:999px;
  background:#fff; color:var(--ink); font-size:.8rem;
}
.next-series{display:block; margin-top:var(--space-2); padding-top:1rem; border-top:1px solid var(--ink)}
.next-series .kicker{display:block; margin-bottom:.6rem}

/* ---------- work page ---------- */
.work{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(16rem,22rem);
  gap:clamp(2rem,5vw,5rem); padding-top:var(--space-1); align-items:start;
}
.zoom{display:block; padding:0; border:0; background:none; font:inherit; color:inherit; text-align:left; cursor:zoom-in}
.work-img img{max-width:100%; max-height:min(80vh,56rem); width:auto; height:auto}
.enlarge{display:block; margin-top:.7rem; font-size:.8rem; color:var(--grey)}
.zoom:hover .enlarge{color:var(--ink)}
.work-info{position:sticky; top:5rem}
.work-title{font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(2.4rem,4vw,3.6rem); line-height:1; margin:0 0 1.75rem}
.facts{margin:0 0 1.75rem; border-top:1px solid var(--line)}
.facts div{display:grid; grid-template-columns:6.5rem 1fr; gap:1rem; padding-block:.65rem; border-bottom:1px solid var(--line); font-size:.88rem}
.facts dt{color:var(--grey)}
.facts dd{margin:0}
.notes{margin:0 0 1.75rem; font-size:.94rem; line-height:1.6; color:var(--soft)}
.notes h2{font-size:.8rem; font-weight:500; color:var(--ink); margin:0 0 .5rem}
.notes p,.notes ul{margin:0}
.notes ul{padding-left:1rem}
.btn{
  display:inline-flex; gap:.6rem; align-items:center; cursor:pointer;
  padding:.85rem 1.35rem; border:1px solid var(--ink); border-radius:999px;
  background:var(--ink); color:#fff; font:500 .88rem var(--sans);
  transition:background .2s,color .2s;
}
.btn:hover{background:#fff; color:var(--ink)}
.pn{display:flex; justify-content:space-between; gap:1rem; margin-top:2.5rem; padding-top:1rem; border-top:1px solid var(--line); font-size:.85rem}
.pn a{color:var(--grey)}
.pn a:hover{color:var(--ink)}
.pn .idx{flex:none}
@media (max-width:900px){
  .work{grid-template-columns:1fr}
  .work-info{position:static}
}

/* ---------- about ---------- */
.about{display:grid; grid-template-columns:minmax(0,var(--measure)) minmax(0,26rem); gap:clamp(2rem,5vw,5rem); justify-content:start; align-items:start}
.prose p{margin:0 0 1.1rem; font-size:1.02rem; line-height:1.68}
.prose h2{font-size:.8rem; font-weight:500; margin:2.75rem 0 1rem}
.about-imgs{display:grid; gap:1.25rem}
.about-imgs img{width:100%; height:auto}
@media (max-width:800px){ .about{grid-template-columns:1fr} }
.prose p,.lede,.sec-head p.long,.duo p{font-size:clamp(1.1rem,1.6vw,1.35rem); font-weight:300; line-height:1.5; letter-spacing:-.01em}

/* ---------- CV ---------- */
.cv{margin-top:var(--space-2)}
.cv .rows li:first-child{border-top:0; padding-top:0}

/* ---------- contact ---------- */
.contact{display:grid; grid-template-columns:minmax(0,34rem) minmax(0,20rem); gap:clamp(2.5rem,6vw,7rem); justify-content:start; align-items:start}
.form{display:grid; gap:1.6rem}
.form label{display:block; font-size:.8rem; color:var(--grey)}
.form input,.form select,.form textarea{
  width:100%; padding:.5rem 0; border:0; border-bottom:1px solid var(--field); border-radius:0;
  background:transparent; color:var(--ink); font:inherit; font-size:1.05rem;
}
.form textarea{min-height:7rem; resize:vertical}
.form :is(input,select,textarea):focus-visible{outline:none; border-bottom:2px solid var(--ink)}
.sent{font-size:clamp(1.25rem,2.2vw,1.75rem); font-weight:300; letter-spacing:-.02em; margin:0}
.contact-side h2{font-size:.8rem; font-weight:500; margin:0 0 .5rem}
.contact-side p{margin:0 0 2rem; color:var(--soft)}
@media (max-width:800px){ .contact{grid-template-columns:1fr} }
.note{display:inline-block; margin:1rem 0 0; padding:.45rem .7rem; background:#F6EEDF; color:#7A5A28; font-size:.78rem}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ---------- lightbox ---------- */
.lightbox{inset:0; width:100vw; height:100vh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:transparent; cursor:zoom-out}
.lightbox[open]{display:flex; align-items:center; justify-content:center}
.lightbox::backdrop{background:rgba(255,255,255,.97)}
.lightbox img{max-width:94vw; max-height:90vh; width:auto; height:auto}
.lb-close{position:fixed; top:1rem; right:var(--gutter); padding:.4rem 0; border:0; background:none; font:inherit; font-size:.85rem; color:var(--ink); cursor:pointer}