/* ipassas core: work index, case studies, about, contact, shots, search, 404.
   The homepage sections (hero, run-in, also built, typefaces, notes, tools) are in base.css.
   Page rules are scoped by the body class inc/10-core.php adds (.ipx-case, .ipx-about, .ipx-contact, .ipx-shots). */

/* ---------- shared: big titles, plain lists, search line, prev/next ---------- */
h1.hd{font-size:clamp(44px,8vw,140px);line-height:.84;letter-spacing:-.045em}
.say.sm{font-size:clamp(28px,3.4vw,60px);line-height:1.2}
.sf{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 20px;border-top:1px solid var(--ink);padding-top:22px}
.sf input{flex:1 1 10em;min-width:0;font:inherit;font-size:clamp(26px,3.6vw,58px);line-height:1.25;letter-spacing:-.025em;color:inherit;background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:0 0 2px;outline:0;-webkit-appearance:none;appearance:none}
.sf input:focus-visible{border-bottom-color:var(--blue);box-shadow:0 1px 0 var(--blue)}
.sf input::placeholder{color:var(--ink);opacity:.35}
.sf input::-webkit-search-cancel-button{-webkit-appearance:none}
.sf button,.pager a,.wk-all{background:var(--ink);color:var(--paper);font-size:17px;line-height:1;padding:11px 14px 10px}
.sf button:hover,.sf button:focus-visible,.pager a:hover,.pager a:focus-visible,.wk-all:hover,.wk-all:focus-visible{background:var(--blue);color:#FFFAFA}
.pager{display:flex;flex-wrap:wrap;gap:12px 18px}
.wk-all{padding:6px 10px 5px}

/* ---------- work index: grid of covers or a list of names ---------- */
.wk-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px}
.wk-head h1.hd{font-size:clamp(64px,13vw,220px);line-height:.84;letter-spacing:-.05em}
.wk-lede{font-size:clamp(18px,1.8vw,26px);line-height:1.2;max-width:34ch}
.wk-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 32px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding-block:12px}
.wk-view{display:flex;gap:10px 18px}
.wk-view button{font-size:17px;line-height:1;padding:6px 10px 5px}
.wk-view button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.wk-view button:hover{background:var(--blue);color:#FFFAFA}
.wk-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}
.wk-grid a{display:flex;flex-direction:column;gap:12px}
.wk-grid .ph{aspect-ratio:4/3;overflow:hidden;background:var(--blue)}
.wk-grid .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.wk-grid a:hover .ph img,.wk-grid a:focus-visible .ph img{filter:grayscale(1) contrast(1.3);mix-blend-mode:multiply;transform:scale(1.03)}
.wk-grid .nm{font-size:clamp(20px,1.9vw,28px);line-height:1.1;letter-spacing:-.015em}
.wk-grid a:hover .nm{background:var(--ink);color:var(--paper);align-self:flex-start;padding:0 .12em}
.wk-list{list-style:none;border-top:1px solid var(--ink)}
.wk-list a{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:8px 40px;align-items:baseline;padding:18px 10px 20px;border-bottom:1px solid var(--ink)}
.wk-list .nm{font-size:clamp(26px,3.4vw,54px);line-height:1;letter-spacing:-.025em}
.wk-list .ds{font-size:15px;max-width:48ch}
.wk-list a:hover,.wk-list a:focus-visible{background:var(--blue);color:#FFFAFA}
.wk-meta{display:flex;flex-direction:column;gap:6px}
#wk[data-view="list"] .wk-grid,#wk[data-view="grid"] .wk-list{display:none}
@media (max-width:1000px){.wk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.wk-grid{grid-template-columns:1fr}.wk-list a{grid-template-columns:1fr}}
@media (hover:none){.wk-peek{display:none}}

/* ---------- case study: header, story, panels, framed recordings ---------- */
.ipx-case .cs-head{display:flex;flex-direction:column;gap:22px}
.ipx-case .cs-head h1{font-size:clamp(40px,11vw,190px);line-height:.86;letter-spacing:-.05em;overflow-wrap:anywhere}
.ipx-case .cs-head .cap a:hover{background:var(--blue);color:#FFFAFA}
.ipx-case .facts{display:flex;flex-wrap:wrap;gap:6px 28px}
.ipx-case .facts span b{font-weight:400;color:var(--blue)}
.ipx-case .cs-intro{font-size:clamp(20px,2.2vw,32px);line-height:1.2;letter-spacing:-.01em;max-width:34ch}
.ipx-case .live a{text-decoration:underline;text-underline-offset:3px}
.ipx-case .live a:hover{background:var(--blue);color:#FFFAFA;text-decoration:none}
.ipx-case .seq{display:flex;flex-direction:column;gap:clamp(16px,2.4vw,32px)}
.ipx-case .vfig{margin:0;display:flex;flex-direction:column;gap:14px}
.ipx-case .vfig figcaption{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.ipx-case .vbox{position:relative}
/* the browser and phone frames are mockups, the one place with round corners */
.ipx-case .bframe{background:#000}
.ipx-case .bbar{height:28px;display:flex;align-items:center;gap:7px;padding:0 14px}
.ipx-case .bbar i{width:9px;height:9px;border-radius:50%;background:rgba(255,250,250,.28)}
.ipx-case .bbar b{margin-left:18px;height:14px;width:30%;background:rgba(255,250,250,.10);border-radius:7px}
.ipx-case .bframe video{display:block;width:100%;height:auto;background:#000}
.ipx-case .pframe{background:#000;border-radius:44px;padding:12px;width:min(100%,360px);margin:0 auto}
.ipx-case .pframe video{display:block;width:100%;height:auto;border-radius:34px;background:#000}
.ipx-case .vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--blue);color:#FFFAFA;font-size:17px;line-height:1;padding:12px 16px 11px}
.ipx-case .vplay[hidden]{display:none}
.ipx-case .vplay:hover,.ipx-case .vplay:focus-visible{background:var(--ink);color:var(--paper)}
.ipx-case .phone-one{display:flex;justify-content:center}
.ipx-case .phone-one .vfig{align-items:center}

/* ---------- block content (case studies and plain pages) ---------- */
.cs-body{display:flex;flex-direction:column;gap:clamp(16px,2.4vw,32px);min-width:0}
.cs-body > *{margin:0}
.cs-body > p,.cs-body > ul,.cs-body > ol,.cs-body > blockquote{font-size:clamp(18px,1.6vw,22px);line-height:1.45;max-width:62ch}
.cs-body > ul,.cs-body > ol{padding-left:1.1em}
.cs-body > blockquote{border-left:var(--rule) solid var(--ink);padding-left:18px}
.cs-body > h2{font-size:clamp(32px,4.4vw,72px);line-height:1;letter-spacing:-.035em;margin-top:clamp(28px,5vw,72px)}
.cs-body > h3,.cs-body > h4{font-size:clamp(22px,2.4vw,34px);line-height:1.1;letter-spacing:-.015em;margin-top:clamp(12px,2vw,24px)}
.cs-body > :first-child{margin-top:0}
.cs-body :is(p,li) a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.cs-body :is(p,li) a:hover{background:var(--blue);color:#FFFAFA;text-decoration:none}
.cs-body figure{margin:0}
.cs-body img{display:block;width:100%;height:auto}
.cs-body hr{border:0;border-top:1px solid var(--ink);margin:0}
.body.cs-body figcaption,.body.cs-body .wp-element-caption{margin:12px 0 0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-align:left;color:inherit}
.cs-body .alignfull{margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gutR) * -1);width:auto;max-width:none}
/* gallery: a two-up by default */
.body.cs-body .wp-block-gallery,.body.cs-body .blocks-gallery-grid,.body.cs-body .gallery{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)!important;align-items:start;list-style:none;padding:0}
.body.cs-body .wp-block-gallery:has(> .blocks-gallery-grid){display:block!important}
.body.cs-body .wp-block-gallery.columns-1,.body.cs-body .gallery-columns-1{grid-template-columns:1fr}
.body.cs-body .wp-block-gallery.columns-3,.body.cs-body .gallery-columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.body.cs-body .wp-block-gallery.columns-4,.body.cs-body .gallery-columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.body.cs-body .wp-block-gallery > *,.body.cs-body .blocks-gallery-item,.body.cs-body .gallery-item{width:auto!important;max-width:none!important;margin:0!important;flex:none!important}
.body.cs-body .wp-block-gallery img{height:auto!important;object-fit:initial!important}
.body.cs-body .wp-block-gallery figure.wp-block-image::before{content:none!important;display:none!important}
.body.cs-body .wp-block-gallery figcaption{position:static!important;background:none!important;color:inherit!important;padding:0!important;max-height:none!important;overflow:visible!important;text-shadow:none!important}
.body.cs-body .gallery br{display:none}
/* media & text: the image beside an ink (or blue) panel */
.body.cs-body .wp-block-media-text{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr)!important;grid-template-rows:auto;gap:clamp(20px,3vw,40px);align-items:stretch}
.body.cs-body .wp-block-media-text.has-media-on-the-right{grid-template-columns:minmax(280px,1fr) minmax(0,1.7fr)!important}
.body.cs-body .wp-block-media-text > .wp-block-media-text__media{grid-column:1;grid-row:1;margin:0;align-self:start}
.body.cs-body .wp-block-media-text > .wp-block-media-text__content{grid-column:2;grid-row:1;align-self:stretch;background:var(--ink);color:var(--paper);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;justify-content:flex-end;gap:14px}
.body.cs-body .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media{grid-column:2}
.body.cs-body .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content{grid-column:1}
.body.cs-body .wp-block-media-text.is-style-blue > .wp-block-media-text__content{background:var(--blue);color:#FFFAFA}
.body.cs-body .wp-block-media-text__content > *{margin:0}
.body.cs-body .wp-block-media-text__content :is(h2,h3,h4){font-size:clamp(26px,2.6vw,40px);line-height:1;letter-spacing:-.025em}
.body.cs-body .wp-block-media-text__content p{font-size:clamp(17px,1.4vw,20px);line-height:1.4;max-width:30ch}
.body.cs-body .wp-block-media-text__content a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media (max-width:820px){
  .body.cs-body .wp-block-media-text,.body.cs-body .wp-block-media-text.has-media-on-the-right{grid-template-columns:1fr!important}
  .body.cs-body .wp-block-media-text > .wp-block-media-text__media{grid-column:1!important;grid-row:1}
  .body.cs-body .wp-block-media-text > .wp-block-media-text__content{grid-column:1!important;grid-row:2;justify-content:flex-start}
  .body.cs-body .wp-block-gallery.columns-3,.body.cs-body .wp-block-gallery.columns-4,.body.cs-body .gallery-columns-3,.body.cs-body .gallery-columns-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- related projects: two cards, then all projects ---------- */
.rel{display:flex;flex-direction:column;gap:22px}
.rel-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:1px solid var(--ink);padding-top:14px}
.rel-head a{font-size:17px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.rel-head a:hover{background:var(--blue);color:#FFFAFA;text-decoration:none}
.rel-grid{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
.rel-grid a{display:flex;flex-direction:column;gap:12px}
.rel-grid .ph{aspect-ratio:4/3;overflow:hidden;background:var(--blue)}
.rel-grid .ph img{width:100%;height:100%;object-fit:cover;display:block}
.rel-grid a:hover .ph img,.rel-grid a:focus-visible .ph img{filter:grayscale(1) contrast(1.3);mix-blend-mode:multiply}
.rel-grid .nm{font-size:clamp(20px,1.9vw,28px);line-height:1.1;letter-spacing:-.015em}
.rel-grid a:hover .nm{background:var(--ink);color:var(--paper);align-self:flex-start;padding:0 .12em}
@media (max-width:620px){.rel-grid{grid-template-columns:1fr}}

/* ---------- about: portrait + the CV as a dossier ---------- */
.ipx-about .ab-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:28px 48px;align-items:end}
.ipx-about .portrait{margin:0;background:var(--ink)}
.ipx-about .portrait img{display:block;width:100%;height:auto}
.ipx-about .ab-txt{display:flex;flex-direction:column;gap:22px;min-width:0}
.ipx-about .cv{list-style:none;border-top:1px solid var(--ink)}
.ipx-about .cv li{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,3fr);gap:6px 32px;padding:16px 0 18px;border-bottom:1px solid var(--ink)}
.ipx-about .cv .yr{padding-top:7px;font-variant-numeric:tabular-nums}
.ipx-about .cv h3{font-size:clamp(20px,2.2vw,32px);line-height:1.1;letter-spacing:-.015em}
.ipx-about .cv .org{display:block;margin-top:6px}
.ipx-about .cv p{max-width:62ch;margin-top:8px}
.ipx-about .cv a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ipx-about .cv a:hover{background:var(--blue);color:#FFFAFA;text-decoration:none}
.ipx-about .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:28px 40px}
.ipx-about .cols h3{margin-bottom:8px}
.ipx-about .cols p{max-width:44ch}
@media (max-width:820px){.ipx-about .ab-grid{grid-template-columns:1fr}.ipx-about .cv li{grid-template-columns:1fr}.ipx-about .cv .yr{padding-top:0}}

/* ---------- contact: the form reads as one sentence ---------- */
.cform{display:flex;flex-direction:column;gap:22px;border-top:1px solid var(--ink);padding-top:22px}
.cform .line{font-size:clamp(26px,3.6vw,58px);line-height:1.25;letter-spacing:-.025em;display:flex;flex-wrap:wrap;align-items:baseline;gap:.1em .3em}
.cform input,.cform textarea{font:inherit;color:inherit;background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:0 0 2px;outline:0;letter-spacing:inherit;min-width:0}
.cform .line input{flex:1 1 7em;max-width:100%}
.cform input:focus-visible,.cform textarea:focus-visible{border-bottom-color:var(--blue);box-shadow:0 1px 0 var(--blue)}
.cform input::placeholder,.cform textarea::placeholder{color:var(--ink);opacity:.35}
.cform .topics{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.1em .2em}
.cform .topics .sep{opacity:.35}
.cform .topics button{font-size:inherit;line-height:1.1;padding:0 .12em}
.cform .topics button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.cform .topics button:hover{background:var(--blue);color:#FFFAFA}
.cform textarea{width:100%;font-size:clamp(20px,1.8vw,26px);line-height:1.35;min-height:6em;resize:vertical}
.cform .nl{display:flex;align-items:center;gap:12px;font-size:17px;line-height:1.3;cursor:pointer}
.cform .nl input{-webkit-appearance:none;appearance:none;flex:none;width:20px;height:20px;margin:0;padding:0;border:2px solid var(--ink);cursor:pointer}
.cform .nl input:checked{background:var(--blue);border-color:var(--blue)}
.cform .row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.cform .send{background:var(--blue);color:#FFFAFA;font-size:clamp(20px,1.8vw,26px);line-height:1;padding:12px 18px 10px}
.cform .send:hover{background:var(--ink);color:var(--paper)}
.cform :disabled{cursor:default}
.cform .err{background:var(--ink);color:var(--paper);padding:3px 8px 2px}
.cform .ok{font-size:clamp(20px,1.8vw,26px)}
.cform .ok b{font-weight:400;background:var(--blue);color:#FFFAFA;padding:0 .12em}
.sr-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* the footer below repeats "Contact"; keep its heading for screen readers only */
.ipx-contact #h-contact{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- shots: an Instagram profile, redacted ---------- */
.ipx-shots .prof{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px 40px;align-items:center;padding:40px var(--gutR) 32px var(--gut);max-width:1180px;margin:0 auto}
.ipx-shots .avatar{width:clamp(88px,13vw,150px);aspect-ratio:1;background:var(--ink);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.ipx-shots .avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ipx-shots .avatar .mark{width:auto;height:46%;fill:var(--paper)}
.ipx-shots .who{display:flex;flex-direction:column;gap:10px;min-width:0}
.ipx-shots .who .row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.ipx-shots .who h1{font-size:clamp(28px,3.4vw,52px);line-height:1;letter-spacing:-.03em}
.ipx-shots .who .handle{font-size:17px}
.ipx-shots .follow{background:var(--blue);color:#FFFAFA;padding:8px 12px 7px;font-size:15px;line-height:1}
.ipx-shots .follow:hover{background:var(--ink);color:var(--paper)}
.ipx-shots .who p{max-width:52ch}
.ipx-shots .tabs{display:flex;justify-content:center;gap:6px;border-top:1px solid var(--ink);max-width:1180px;margin:0 auto;padding:10px var(--gutR) 10px var(--gut)}
.ipx-shots .tabs button{font-size:15px;line-height:1;padding:7px 10px 6px}
.ipx-shots .tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.ipx-shots .tabs button:hover{background:var(--blue);color:#FFFAFA}
.ipx-shots .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;max-width:1180px;margin:0 auto 80px;padding-inline:max(0px,env(safe-area-inset-left,0px)) max(0px,env(safe-area-inset-right,0px))}
.ipx-shots .grid[hidden]{display:none}
.ipx-shots .tile{position:relative;aspect-ratio:1;overflow:hidden;background:var(--blue);display:block;width:100%}
.ipx-shots .tile img{width:100%;height:100%;object-fit:cover;display:block}
.ipx-shots .tile .cv{position:absolute;inset:auto 0 0 0;padding:10px 12px;color:#FFFAFA;text-align:left;font-size:15px;line-height:1.2;opacity:0}
.ipx-shots .tile:hover img,.ipx-shots .tile:focus-visible img{filter:grayscale(1) contrast(1.3);mix-blend-mode:multiply}
.ipx-shots .tile:hover .cv,.ipx-shots .tile:focus-visible .cv{opacity:1}
.ipx-shots .tile:focus-visible{outline-offset:-3px}
.ipx-shots .play.tab{margin:0;height:calc(100svh - 60px);min-height:420px}
.ipx-shots .play.tab[hidden]{display:none}
/* post viewer */
.ipx-shots .view{position:fixed;inset:0;z-index:90;background:var(--ink);color:var(--paper);display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px)}
.ipx-shots .view[hidden]{display:none}
.ipx-shots .view .ph{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:20px}
.ipx-shots .view .ph img{max-width:100%;max-height:calc(100svh - 40px);object-fit:contain}
.ipx-shots .view aside{background:var(--paper);color:var(--ink);display:flex;flex-direction:column;min-height:0}
.ipx-shots .view .vh{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--ink)}
.ipx-shots .view .vh .avatar{width:34px}
.ipx-shots .view .cap-txt{padding:16px;font-size:clamp(20px,1.8vw,26px);line-height:1.2;flex:1}
.ipx-shots .view .vf{display:flex;justify-content:space-between;gap:8px;padding:12px 16px;border-top:1px solid var(--ink)}
.ipx-shots .view .vf a{text-decoration:underline;text-underline-offset:3px}
.ipx-shots .view .nav{position:absolute;top:50%;transform:translateY(-50%);background:var(--paper);color:var(--ink);width:44px;height:44px;font-size:20px}
.ipx-shots .view .nav:hover{background:var(--blue);color:#FFFAFA}
.ipx-shots .view .prev{left:12px}
.ipx-shots .view .next{right:12px}
.ipx-shots .view .x{position:absolute;top:12px;right:12px;z-index:2;background:var(--paper);color:var(--ink);padding:9px 12px 8px}
.ipx-shots .view .x:hover{background:var(--blue);color:#FFFAFA}

@media (max-width:820px){
  .ipx-case .cs-head h1{font-size:clamp(40px,11vw,190px)}
  .ipx-shots .prof{gap:16px;padding-top:24px}
  .ipx-shots .grid{gap:2px}
  .ipx-shots .tile .cv{display:none}
  .ipx-shots .view{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .ipx-shots .view .ph img{max-height:62svh}
  .ipx-shots .play.tab{height:calc(100svh - 54px)}
}