/*
Theme Name: D_FALT Digital
Theme URI: https://davidfalter.com
Author: David Falter
Author URI: https://davidfalter.com
Description: Custom theme for davidfalter.com — a Finder-style portfolio for digital design work. Vertical nav rail, floating column finder, project + note custom post types via ACF Flexible Content. Distinct from the dfalt.art public-art site.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: All rights reserved
Text Domain: dfalt-digital
*/

:root{
  --ink:#111111;
  --red:#E63329;--yellow:#FFC400;--blue:#0F6FE0;--green:#23A455;
  --white:#FFFFFF;--soft:#FAFAF9;--grey:#8C8C88;--line:#E8E8E4;
  --mono:'IBM Plex Mono',monospace;
  --rail:46px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--mono);background:var(--white);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* image cells: real WP images fill these; gradient is the empty-state fallback */
.photo{position:relative;background:#d8d6d1;overflow:hidden}
.photo.empty::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#cdcbc5,#9e9c96)}
.photo .frame{position:absolute;inset:8px;border:1px solid #ffffff44;pointer-events:none}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo .lbl{position:absolute;left:9px;bottom:8px;font-size:8px;letter-spacing:.1em;color:#fff;opacity:.9;text-transform:uppercase;z-index:2}

/* ===== CENTERED SHELL: rail + page ===== */
.shell{position:relative;max-width:calc(1640px + var(--rail));margin:0 auto;min-height:100vh;display:flex;align-items:stretch}
.rail{position:sticky;top:0;align-self:flex-start;height:100vh;flex:0 0 var(--rail);width:var(--rail);border-right:1px solid var(--ink);background:var(--white);z-index:60;display:flex;flex-direction:column;align-items:center;padding:14px 0;overflow:hidden}
.rail .mark{font-size:16px;color:var(--blue);margin-bottom:26px;position:relative}
.rail .mark .tot{position:absolute;top:-6px;right:-9px;background:var(--red);color:#fff;font-size:8px;font-weight:700;min-width:14px;height:14px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 3px;line-height:1}
.rail .labels{flex:1;display:flex;flex-direction:column;gap:26px;align-items:center}
.rail .nv{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;cursor:pointer;color:var(--ink);padding:4px 0;transition:color .15s;display:flex;align-items:center;gap:9px;background:none;border:none;font-family:inherit}
.rail .nv .d{writing-mode:horizontal-tb;font-size:9px}
.rail .nv .rb{writing-mode:horizontal-tb;transform:rotate(180deg);color:#fff;font-size:8px;font-weight:700;min-width:13px;height:13px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 3px;line-height:1}
.rail .nv[data-c=work] .rb{background:var(--blue)}
.rail .nv[data-c=lab] .rb{background:var(--yellow);color:#222}
.rail .nv[data-c=about] .rb{background:var(--green)}
.rail .nv[data-c=contact] .rb{background:var(--red)}
.rail .nv[data-c=work]:hover{color:var(--blue)}
.rail .nv[data-c=lab]:hover{color:var(--yellow)}
.rail .nv[data-c=about]:hover{color:var(--green)}
.rail .nv[data-c=contact]:hover{color:var(--red)}
.rail .nv:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.rail .nv.active{color:#fff;background:var(--ink);padding:10px 4px;border-radius:3px}
.rail .foot{font-size:8px;color:var(--grey);writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.1em;margin-top:14px}

/* ===== PAGE ===== */
.page{min-height:100vh;flex:1;min-width:0;background:var(--white);border-left:1px solid var(--line);border-right:1px solid var(--ink);display:flex;flex-direction:column}
body.admin-bar .page{min-height:calc(100vh - 32px)}
@media(max-width:782px){body.admin-bar .page{min-height:calc(100vh - 46px)}}
.page .grow{flex:1}
.top{display:flex;justify-content:space-between;align-items:baseline;padding:18px 26px;border-bottom:1px solid var(--ink)}
.top .brand{font-size:15px;font-weight:700;letter-spacing:.02em}.top .brand b{color:var(--blue)}
.top .right{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);display:flex;gap:20px;align-items:center}
.top .right .open{color:var(--ink);font-weight:600;cursor:pointer;border:1px solid var(--ink);padding:5px 10px;display:flex;gap:7px;align-items:center;background:none;font-family:inherit;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.top .right .open:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* hero / latest banner */
.hero{display:grid;grid-template-columns:1.6fr 1fr;border-bottom:1px solid var(--ink)}
.hero-main{position:relative;border-right:1px solid var(--ink);min-height:570px;display:flex;flex-direction:column;justify-content:flex-end;cursor:pointer}
.hero-main .photo{position:absolute;inset:0}
.flag{position:absolute;top:14px;left:14px;z-index:3;display:flex;align-items:center;gap:0;background:var(--green);color:#fff;font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:7px 12px}
.hero-cap{position:relative;z-index:3;padding:26px 28px;background:linear-gradient(transparent,#000000d0);color:#fff}
.hero-cap .et{font-size:9px;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.hero-cap h1{font-size:42px;font-weight:700;text-transform:uppercase;line-height:.95;letter-spacing:-0.02em;margin:9px 0}
.hero-cap p{font-size:11px;opacity:.85;max-width:440px;line-height:1.5}
.recent{display:flex;flex-direction:column}
.rec-h{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-weight:600;padding:13px 18px;border-bottom:1px solid var(--ink);display:flex;justify-content:space-between;align-items:center}
.rec-h .ct{color:var(--grey);font-weight:400}
.rec{flex:1;display:grid;grid-template-columns:96px 1fr;border-bottom:1px solid var(--line);align-items:stretch;cursor:pointer;transition:background .12s;min-height:0}
.rec:last-child{border-bottom:none}
.rec:hover{background:var(--soft)}
.rec .photo{min-height:0}
.rec .rc{padding:14px 16px;display:flex;flex-direction:column;justify-content:center;position:relative}
.rec .rc .d{font-size:9px;color:var(--grey);letter-spacing:.08em;display:flex;align-items:center;gap:7px}
.rec .rc .d .ax{font-size:10px}
.rec .rc b{font-size:14px;font-weight:700;text-transform:uppercase;display:block;margin:6px 0 8px;line-height:1.05;letter-spacing:-0.01em}
.rec .rc em{font-style:normal;font-size:8px;color:#fff;padding:3px 7px;letter-spacing:.05em;align-self:flex-start}
.rec .rc .ar{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--grey);font-size:13px}
.rec.c-work em{background:var(--blue)}.rec.c-work .d .ax{color:var(--blue)}
.rec.c-lab em{background:var(--yellow);color:#222}.rec.c-lab .d .ax{color:var(--yellow)}
.rec.c-about em{background:var(--green)}.rec.c-about .d .ax{color:var(--green)}
.rec.c-contact em{background:var(--red)}.rec.c-contact .d .ax{color:var(--red)}

/* lower strips */
.strips{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--ink)}
.strip{padding:22px 22px 26px;border-right:1px solid var(--line)}
.strip:last-child{border-right:none}
.strip .sh{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);display:flex;gap:8px;align-items:center;margin-bottom:14px}
.strip .sh .ax{font-size:12px}
.strip h4{font-size:15px;font-weight:700;text-transform:uppercase;line-height:1.05;margin-bottom:8px}
.strip p{font-size:10.5px;color:#555;line-height:1.6}
.strip .mini{display:flex;gap:6px;margin-top:14px}
.strip .mini .photo{width:48px;height:48px;flex:none}
.ax.red{color:var(--red)}.ax.blue{color:var(--blue)}.ax.yellow{color:var(--yellow)}.ax.green{color:var(--green)}
.clients{padding:20px 26px;border-bottom:1px solid var(--ink);font-size:11px;letter-spacing:.06em;color:#444;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.clients span{color:var(--grey);text-transform:uppercase;font-size:9px;letter-spacing:.1em;margin-right:10px}
.pagefoot{position:relative;z-index:46;padding:22px 26px;font-size:9px;color:#888;letter-spacing:.08em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;background:var(--ink);border-top:1px solid var(--ink)}
.pagefoot .fl{display:flex;gap:7px;align-items:center;color:#fff}
.pagefoot .fl .ax{color:var(--blue);font-size:12px}

/* ===== FLOATING FINDER POPUP ===== */
.scrim{position:fixed;inset:0;background:#11111199;backdrop-filter:blur(1.5px);z-index:50;opacity:0;pointer-events:none;transition:opacity .22s}
.scrim.show{opacity:1;pointer-events:auto}
.finder{position:fixed;z-index:60;left:calc(var(--rail) + 40px);right:64px;top:54px;bottom:54px;background:var(--white);border:1px solid var(--ink);box-shadow:0 30px 80px #00000055;display:flex;flex-direction:column;transform:translateY(14px) scale(.99);opacity:0;pointer-events:none;transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .2s}
.finder.show{transform:none;opacity:1;pointer-events:auto}
.fd-bar{display:flex;align-items:center;gap:12px;background:var(--white);border-bottom:1px solid var(--ink);padding:10px 13px;font-size:10px}
.fd-dots{display:flex;gap:6px}.fd-dots i{width:10px;height:10px;border-radius:50%;display:block}
.fd-dots i:nth-child(1){background:var(--red);cursor:pointer}.fd-dots i:nth-child(2){background:var(--yellow)}.fd-dots i:nth-child(3){background:var(--green)}
.fd-path{font-weight:600;letter-spacing:.04em}.fd-path span{color:var(--grey);font-weight:400}
.fd-x{margin-left:auto;cursor:pointer;font-size:15px;line-height:1;color:var(--ink);padding:0 4px;background:none;border:none;font-family:inherit}
.fd-x:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.fd-cols{flex:1;display:flex;overflow:hidden}
.fcol{overflow-y:auto;flex:none}
.fcol-h{font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);padding:9px 11px 7px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--white)}
.frow{display:flex;align-items:center;gap:8px;padding:7px 11px;font-size:10.5px;border-bottom:1px solid var(--soft);cursor:pointer;width:100%;text-align:left;background:none;border-left:none;border-right:none;border-top:none;font-family:inherit;color:var(--ink)}
.frow:hover{background:var(--soft)}
.frow:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.frow .ax{font-size:10px;width:11px;text-align:center;flex:none}
.frow .nm{flex:1}.frow .ch{color:var(--grey);font-size:9px}
.frow.sel{color:#fff}.frow.sel .ax,.frow.sel .ch{color:#fff}
.frow.sel.s-blue{background:var(--blue)}.frow.sel.s-yellow{background:var(--yellow);color:#222}.frow.sel.s-yellow .ax{color:#222}.frow.sel.s-green{background:var(--green)}.frow.sel.s-red{background:var(--red)}
.badge{color:#fff;font-size:8px;font-weight:700;min-width:15px;height:15px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px;letter-spacing:0;line-height:1;flex:none}
.badge.b-blue{background:var(--blue)}.badge.b-yellow{background:var(--yellow);color:#222}.badge.b-green{background:var(--green)}.badge.b-red{background:var(--red)}
.frow.sel .badge{background:#fff!important;color:var(--ink)!important}
.resizer{width:5px;flex:none;cursor:col-resize;background:transparent;position:relative;z-index:5;margin:0 -2px}
.resizer::after{content:"";position:absolute;top:0;bottom:0;left:2px;width:1px;background:var(--line);transition:background .12s}
.resizer:hover::after,.resizer.drag::after{background:var(--blue);width:2px;left:1.5px}
.fdetail{overflow-y:auto;flex:1;min-width:0}
.fd-photo{height:200px}
.fd-body{padding:22px 26px}
.fd-flags{display:flex;gap:7px;margin-bottom:14px;flex-wrap:wrap}
.fd-flag{font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:#fff;padding:4px 8px}
.fd-flag.b{background:var(--blue)}
.fd-flag.b-blue{background:var(--blue)}.fd-flag.b-yellow{background:var(--yellow);color:#222}.fd-flag.b-green{background:var(--green)}.fd-flag.b-red{background:var(--red)}
.fd-flag.date{background:var(--soft);color:var(--grey);border:1px solid var(--line)}
.fd-h{font-size:32px;font-weight:700;text-transform:uppercase;line-height:.98;letter-spacing:-0.015em;margin-bottom:8px}
.fd-deck{font-size:12px;color:#333;line-height:1.6;margin-bottom:18px;max-width:540px}
.fd-text{max-width:560px}
.fd-text h4{font-size:10px;letter-spacing:.06em;text-transform:uppercase;margin:18px 0 8px;display:flex;gap:7px;align-items:center}
.fd-text p{font-size:11.5px;color:#2a2a2a;line-height:1.75;margin-bottom:11px}
.fd-text img{margin:14px 0;border:1px solid var(--line)}
.fd-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:18px 0}
.fd-meta div{background:var(--white);padding:10px 12px;font-size:9px}
.fd-meta span{display:block;color:var(--grey);text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}
.fd-loading{padding:40px 26px;font-size:10px;color:var(--grey);letter-spacing:.08em;text-transform:uppercase}
.hint{position:fixed;bottom:18px;left:calc(var(--rail) + 16px);font-size:9px;color:var(--grey);letter-spacing:.06em;z-index:45;text-transform:uppercase}
.fd-grip{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;z-index:70}
.fd-grip::before{content:"";position:absolute;right:3px;bottom:3px;width:9px;height:9px;border-right:2px solid var(--grey);border-bottom:2px solid var(--grey)}
.fd-grip:hover::before{border-color:var(--blue)}

/* ===== STANDALONE SINGLE / ARCHIVE (direct URL, crawlable) ===== */
.single{max-width:760px;margin:0 auto;padding:48px 26px 80px}
.single .crumbs{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-bottom:18px}
.single .crumbs a:hover{color:var(--ink)}
.single .s-flags{display:flex;gap:7px;margin-bottom:16px;flex-wrap:wrap}
.single .s-flag{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#fff;padding:4px 9px}
.single .s-flag.b-blue{background:var(--blue)}.single .s-flag.b-yellow{background:var(--yellow);color:#222}.single .s-flag.b-green{background:var(--green)}.single .s-flag.b-red{background:var(--red)}
.single h1{font-size:46px;font-weight:700;text-transform:uppercase;line-height:.98;letter-spacing:-0.02em;margin-bottom:14px}
.single .deck{font-size:15px;line-height:1.65;color:#222;margin-bottom:26px}
.single .s-hero{margin-bottom:30px;border:1px solid var(--line)}
.single .s-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:26px 0}
.single .s-meta div{background:var(--white);padding:12px 14px;font-size:10px}
.single .s-meta span{display:block;color:var(--grey);text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px}
.single .s-body h2,.single .s-body h3{font-size:13px;letter-spacing:.04em;text-transform:uppercase;margin:28px 0 12px;display:flex;align-items:center;gap:9px}
.single .s-body h2 .ax,.single .s-body h3 .ax{font-size:15px}
.single .s-body p{font-size:13px;line-height:1.85;color:#262626;margin-bottom:15px}
.single .s-body img{margin:24px 0;border:1px solid var(--line)}
.single .s-body .pull{border-left:3px solid var(--red);padding:6px 0 6px 18px;font-size:16px;line-height:1.5;margin:24px 0;color:#111}
.single .s-back{display:inline-block;margin-top:30px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--ink);padding:9px 14px}
.single .s-back:hover{background:var(--ink);color:#fff}

.arch{padding:40px 26px 80px}
.arch h1{font-size:34px;font-weight:700;text-transform:uppercase;letter-spacing:-0.01em;margin-bottom:6px}
.arch .lede{font-size:12px;color:#444;margin-bottom:30px}
.arch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.arch-card{border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.arch-card .photo{height:160px}
.arch-card .ac{padding:13px 15px}
.arch-card .ac .d{font-size:8px;color:var(--grey);letter-spacing:.06em}
.arch-card .ac b{font-size:14px;font-weight:700;text-transform:uppercase;display:block;margin:5px 0 8px;line-height:1.1}
.arch-card .ac em{font-style:normal;font-size:8px;color:#fff;padding:3px 7px;letter-spacing:.04em}
.arch-card.c-work em{background:var(--blue)}.arch-card.c-lab em{background:var(--yellow);color:#222}
.arch-card.c-about em{background:var(--green)}.arch-card.c-contact em{background:var(--red)}

/* WP admin bar offset */
body.admin-bar .rail{top:32px;height:calc(100vh - 32px)}
@media(max-width:782px){body.admin-bar .rail{top:46px;height:calc(100vh - 46px)}}
/* keep the finder/scrim clear of the admin bar too */
body.admin-bar .scrim{top:32px}
@media(max-width:782px){body.admin-bar .scrim{top:46px}}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  .finder,.scrim{transition:none}
}

/* ===== RESPONSIVE ===== */
@media(max-width:860px){
  .hero{grid-template-columns:1fr}
  .hero-main{border-right:none;border-bottom:1px solid var(--ink)}
  .strips{grid-template-columns:1fr}
  .strip{border-right:none;border-bottom:1px solid var(--line)}
}
@media(max-width:720px){
  .finder{left:8px;right:8px;top:8px;bottom:8px}
  /* mobile finder: stack to one column at a time, controlled by data-view */
  .fd-cols{position:relative}
  .finder[data-view="root"] #col2,
  .finder[data-view="root"] .resizer,
  .finder[data-view="root"] #detail{display:none}
  .finder[data-view="col2"] #col1,
  .finder[data-view="col2"] .resizer,
  .finder[data-view="col2"] #detail{display:none}
  .finder[data-view="detail"] #col1,
  .finder[data-view="detail"] #col2,
  .finder[data-view="detail"] .resizer{display:none}
  .finder #col1,.finder #col2{width:100%!important}
  .fd-grip{display:none}
  .fd-back{display:inline-block!important}
}
.fd-back{display:none;cursor:pointer;background:none;border:1px solid var(--ink);font-family:inherit;font-size:10px;padding:3px 9px;letter-spacing:.06em;text-transform:uppercase}