/* ===================================================================
   Joshua Cooley — v2026 shared design system (warm / coastal)
   Palette + display font are swappable at runtime via site.js
   =================================================================== */
:root{
  --paper:#eef2f0; --paper-2:#e1e9e5; --card:#f6f9f7;
  --ink:#15302c; --ink-70:#4c6661; --ink-45:#869b95;
  --clay:#3a6ea5; --clay-d:#2d5887; --on-accent:#fff; --sage:#2f8470; --gold:#e0a23a;
  --rule:rgba(21,48,44,.14);
  --disp:'Lora',Georgia,serif; --sans:'DM Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; position:relative; min-height:100vh; display:flex; flex-direction:column}
/* paper grain */
body::before{content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");}
.wrap{max-width:1120px; margin:0 auto; padding:0 30px; position:relative; z-index:2}
.narrow{max-width:760px}
a{color:inherit}
.serif{font-family:var(--disp)}

/* nav */
nav.bar{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--rule)}
nav.bar .row{display:flex; align-items:center; justify-content:space-between; height:70px}
.brand{display:flex; align-items:center; text-decoration:none; color:var(--ink)}
.brand .logo{height:27px; width:auto; display:block; color:var(--ink); transition:color .18s}
.brand:hover .logo{color:var(--clay)}
.brand .logo .lw{font-family:'Jost','Futura','Century Gothic','Avant Garde',system-ui,sans-serif; font-weight:500; font-size:46px; letter-spacing:-1px; fill:currentColor}
.brand .logo .lo{fill:none; stroke:currentColor; stroke-width:4.6; stroke-linecap:round}
.links{display:flex; gap:26px; align-items:center}
.links a{text-decoration:none; color:var(--ink-70); font-size:15px; font-weight:500}
.links a:hover{color:var(--clay)}
.links a.active{color:var(--ink)}
.links a.cta{background:var(--ink); color:var(--paper); padding:9px 18px; border-radius:999px}
.links a.cta:hover{background:var(--clay-d); color:#fff}

/* hero (homepage) */
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:54px; align-items:center; padding:64px 0 40px}
.hero--solo{grid-template-columns:1fr; padding:76px 0 48px}
.hero--solo .lede{max-width:600px}
.kick{font-size:14px; font-weight:500; color:var(--clay); letter-spacing:.3px; margin:0 0 20px; display:flex; gap:9px; align-items:center}
.kick .pin{width:9px; height:9px; border-radius:50%; background:var(--sage)}
h1{font-family:var(--disp); font-weight:600; font-size:clamp(44px,6.4vw,76px); line-height:1.02; letter-spacing:-1.5px; margin:0; font-optical-sizing:auto}
h1 em{font-style:italic; color:var(--clay)}
.squig{position:relative; display:inline-block}
.squig svg{position:absolute; left:-2%; bottom:-14px; width:104%; height:16px; overflow:visible}
.squig svg path{stroke:var(--clay)}
.lede{font-size:18.5px; line-height:1.65; color:var(--ink-70); max-width:520px; margin:28px 0 0}
.lede b{color:var(--ink); font-weight:600}
.hero .cta{margin-top:32px; display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.btn{font-size:15px; font-weight:600; text-decoration:none; padding:13px 24px; border-radius:999px; display:inline-flex; gap:8px; align-items:center; transition:.18s}
.btn.go{background:var(--clay); color:var(--on-accent,#fff)} .btn.go:hover{background:var(--clay-d)}
.btn.ghost{color:var(--ink); border:1.5px solid var(--rule)} .btn.ghost:hover{border-color:var(--ink)}

.photo{position:relative}
.photo img{width:100%; border-radius:20px 20px 20px 60px; display:block; box-shadow:0 40px 80px -36px rgba(76,42,20,.55); transform:rotate(1.4deg)}
.photo .sun{position:absolute; top:-26px; right:-14px; width:84px; height:84px; border-radius:50%; background:radial-gradient(circle at 40% 35%, var(--gold), var(--clay)); opacity:.9; z-index:-1}
.photo .cap{position:absolute; bottom:18px; left:-18px; background:var(--card); border:1px solid var(--rule); border-radius:14px; padding:10px 15px; box-shadow:0 16px 36px -20px rgba(76,42,20,.5)}
.photo .cap b{font-family:var(--disp); font-size:15px; display:block}
.photo .cap span{font-size:12.5px; color:var(--ink-45)}

/* facts strip */
.facts{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:22px 0; margin-top:30px; display:flex; gap:40px; flex-wrap:wrap; justify-content:space-between}
.facts .f{display:flex; gap:12px; align-items:baseline}
.facts .f .num{font-family:var(--disp); font-size:30px; font-weight:600; color:var(--clay)}
.facts .f .lab{font-size:13.5px; color:var(--ink-70); max-width:150px; line-height:1.35}

/* section */
.sec{padding:78px 0}
.sec.sep{border-top:1px solid var(--rule)}
.sec-h{margin-bottom:42px}
.sec-h .eg{font-size:13.5px; font-weight:600; letter-spacing:.4px; color:var(--sage); text-transform:uppercase; margin:0 0 12px}
.sec-h h2{font-family:var(--disp); font-weight:600; font-size:clamp(32px,4.4vw,46px); letter-spacing:-1px; margin:0; line-height:1.05}
.sec-h h2 em{font-style:italic; color:var(--clay)}

.work{display:grid; gap:30px}
.card{background:var(--card); border:1px solid var(--rule); border-radius:24px; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; transition:.2s; cursor:pointer}
.card:hover{transform:translateY(-3px); box-shadow:0 36px 70px -42px rgba(76,42,20,.5); border-color:color-mix(in srgb, var(--clay) 45%, var(--rule))}
.card .pic{background:var(--paper-2); display:flex; align-items:center; justify-content:center; padding:30px; min-height:280px}
.card .pic img{max-width:100%; max-height:240px; border-radius:14px; display:block; box-shadow:0 20px 44px -26px rgba(76,42,20,.5)}
.card .pic.logo{background:var(--card)}
.card .pic.logo img{max-height:170px; max-width:82%; width:auto; border-radius:0; box-shadow:none; object-fit:contain}
.card .pic.logo.circle img{width:172px; height:172px; max-height:none; max-width:none; border-radius:50%; object-fit:cover; box-shadow:0 18px 38px -20px rgba(20,40,36,.5)}
.card .txt{padding:38px 40px}
.card .mini{font-size:12.5px; font-weight:600; color:var(--clay); letter-spacing:.3px; margin-bottom:14px; display:flex; gap:8px; align-items:center}
.card .mini .live{margin-left:auto; color:var(--sage); display:flex; gap:6px; align-items:center}
.card .mini .live i{width:7px; height:7px; border-radius:50%; background:var(--sage)}
.card h3{font-family:var(--disp); font-weight:600; font-size:32px; letter-spacing:-.6px; margin:0 0 10px}
.card p{font-size:15.5px; line-height:1.6; color:var(--ink-70); margin:0 0 22px}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px}
.chip{font-size:12.5px; color:var(--ink-70); background:var(--paper-2); border:1px solid var(--rule); padding:5px 12px; border-radius:999px}
.more{font-size:15px; font-weight:600; color:var(--clay); text-decoration:none; display:inline-flex; gap:7px}
.more:hover{gap:11px}
/* stretched link: whole card is clickable while the real <a> stays the accessible target */
.card .more::after{content:""; position:absolute; inset:0; z-index:1}
.card:hover .more{gap:11px}

/* other / design-led work grid */
.othergrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.ocard{display:flex; flex-direction:column; text-decoration:none; background:var(--card); border:1px solid var(--rule); border-radius:18px; padding:24px 24px 22px; transition:.2s}
.ocard:hover{transform:translateY(-3px); border-color:color-mix(in srgb, var(--clay) 45%, var(--rule)); box-shadow:0 28px 56px -38px rgba(76,42,20,.5)}
.ocard .tag{font-size:11.5px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--sage); margin:0 0 12px}
.ocard h4{font-family:var(--disp); font-weight:600; font-size:21px; letter-spacing:-.4px; margin:0 0 9px; color:var(--ink)}
.ocard p.d{font-size:14px; line-height:1.55; color:var(--ink-70); margin:0 0 16px; flex:1}
.ocard .go{font-size:13.5px; font-weight:600; color:var(--clay); display:inline-flex; gap:6px; transition:gap .18s}
.ocard:hover .go{gap:10px}

/* human strip */
.human{background:var(--paper-2); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.human .in{display:grid; grid-template-columns:1fr 1.3fr; gap:48px; align-items:center; padding:70px 0}
.human blockquote{font-family:var(--disp); font-weight:500; font-size:clamp(22px,3vw,30px); line-height:1.35; letter-spacing:-.5px; margin:0; color:var(--ink)}
.human blockquote em{font-style:italic; color:var(--clay)}
.human .who{margin-top:18px; font-size:14.5px; color:var(--ink-70)}

/* contact band */
.contact{padding:66px 0; text-align:center}
.contact h2{font-family:var(--disp); font-weight:600; font-size:clamp(38px,6vw,64px); letter-spacing:-1.4px; margin:0}
.contact h2 em{font-style:italic; color:var(--clay)}
.contact p{font-size:17px; color:var(--ink-70); margin:18px auto 0; max-width:480px; line-height:1.6}
.contact .row{margin-top:30px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.hire{margin:34px auto 0; max-width:560px; font-size:14px; color:var(--ink-45); line-height:1.6; border-top:1px solid var(--rule); padding-top:22px}
.hire b{color:var(--sage)}

footer{padding:22px 0; border-top:1px solid var(--rule); margin-top:auto}
footer .row{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13.5px; color:var(--ink-45)}
footer a{color:var(--ink-70); text-decoration:none} footer a:hover{color:var(--clay)}

/* ===== interior pages: case-study + prose ===== */
.backlink{display:inline-flex; gap:7px; align-items:center; font-size:14px; font-weight:600; color:var(--ink-70); text-decoration:none; margin:0 0 30px; transition:gap .18s, color .18s}
.backlink:hover{color:var(--clay); gap:11px}

.cs-hero{padding:54px 0 30px}
.cs-hero .eg{font-size:13px; font-weight:600; letter-spacing:.5px; color:var(--sage); text-transform:uppercase; margin:0 0 16px}
.cs-hero h1{font-size:clamp(40px,6vw,68px)}
.cs-hero .sub{font-size:19px; line-height:1.6; color:var(--ink-70); max-width:620px; margin:24px 0 0}
.cs-hero .sub b{color:var(--ink); font-weight:600}
.cs-meta{display:flex; gap:36px; flex-wrap:wrap; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:22px 0; margin:38px 0 0}
.cs-meta .m{display:flex; flex-direction:column; gap:4px}
.cs-meta .m .k{font-size:11.5px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--ink-45)}
.cs-meta .m .v{font-size:15px; color:var(--ink); font-weight:500}

.hero-img{margin:46px 0 0}
.hero-img img{width:100%; border-radius:20px; display:block; box-shadow:0 40px 80px -40px rgba(20,40,36,.5); border:1px solid var(--rule)}
.hero-img figcaption,.figure figcaption{font-size:13px; color:var(--ink-45); margin-top:12px; text-align:center}

.prose{max-width:720px}
.prose h2{font-family:var(--disp); font-weight:600; font-size:clamp(26px,3.4vw,34px); letter-spacing:-.6px; line-height:1.12; margin:56px 0 18px}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--disp); font-weight:600; font-size:21px; letter-spacing:-.3px; margin:34px 0 12px}
.prose p{font-size:17.5px; line-height:1.72; color:var(--ink-70); margin:0 0 20px}
.prose p b,.prose li b{color:var(--ink); font-weight:600}
.prose ul{margin:0 0 22px; padding:0; list-style:none}
.prose ul li{position:relative; padding-left:26px; font-size:17px; line-height:1.65; color:var(--ink-70); margin-bottom:12px}
.prose ul li::before{content:''; position:absolute; left:4px; top:11px; width:8px; height:8px; border-radius:50%; background:var(--clay)}
.prose blockquote{font-family:var(--disp); font-style:italic; font-size:23px; line-height:1.4; color:var(--ink); border-left:3px solid var(--clay); margin:34px 0; padding:4px 0 4px 26px}
.prose a{color:var(--clay); font-weight:600; text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--clay) 35%,transparent)}
.prose a:hover{border-bottom-color:var(--clay)}

.metrics{display:flex; gap:30px; flex-wrap:wrap; margin:14px 0 8px}
.metric{flex:1; min-width:160px; background:var(--card); border:1px solid var(--rule); border-radius:18px; padding:26px 24px}
.metric .n{font-family:var(--disp); font-weight:600; font-size:38px; letter-spacing:-1px; color:var(--clay); line-height:1}
.metric .l{font-size:14px; color:var(--ink-70); margin-top:10px; line-height:1.45}

.figure{margin:40px 0}
.figure img{width:100%; border-radius:16px; display:block; border:1px solid var(--rule); box-shadow:0 30px 60px -42px rgba(20,40,36,.5)}
.gallery{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:40px 0}
.gallery img{width:100%; border-radius:14px; border:1px solid var(--rule); display:block}

/* --- system flow diagram (no images; for architecture/process) --- */
.flow{display:flex; flex-wrap:wrap; align-items:stretch; gap:10px; margin:36px 0}
.flow .node{flex:1 1 130px; min-width:128px; background:var(--card); border:1px solid var(--rule); border-radius:14px; padding:14px 15px; box-shadow:0 18px 40px -30px rgba(20,40,36,.5)}
.flow .node .nlab{font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--clay); margin:0 0 5px}
.flow .node .ntxt{font-size:13px; line-height:1.45; color:var(--ink-70); margin:0}
.flow .node .ntxt b{color:var(--ink); font-weight:600}
.flow .arrow{display:flex; align-items:center; justify-content:center; color:var(--ink-45); font-size:19px; flex:none; min-width:18px}
@media(max-width:680px){ .flow{flex-direction:column} .flow .arrow{transform:rotate(90deg)} }

/* --- live embed (framed iframe of a real, deployed app, with poster fallback) --- */
.embed{margin:46px 0 0}
.embed .frame{position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--rule); box-shadow:0 40px 80px -40px rgba(20,40,36,.5)}
.embed .poster{position:absolute; inset:0; z-index:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; text-align:center; padding:24px; background:linear-gradient(135deg,var(--paper-2),var(--card))}
.embed .poster .pt{font-family:var(--disp); font-weight:600; font-size:21px; color:var(--ink); letter-spacing:-.3px}
.embed .poster .ps{font-size:13px; color:var(--ink-45)}
.embed iframe{position:relative; z-index:1; width:100%; height:560px; border:0; display:block; background:transparent}
.embed figcaption{font-size:13px; color:var(--ink-45); margin-top:12px; text-align:center}
.embed figcaption a{color:var(--clay); font-weight:600; text-decoration:none}
@media(max-width:680px){ .embed iframe,.embed .poster{height:auto} .embed iframe{height:420px} }

/* --- labeled tiles grid (on-brand visual for components/pieces) --- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin:38px 0}
.tile{background:var(--card); border:1px solid var(--rule); border-radius:14px; padding:18px 18px; box-shadow:0 18px 40px -32px rgba(20,40,36,.5)}
.tile .tl{font-family:var(--disp); font-weight:600; font-size:15.5px; color:var(--ink); margin:0 0 6px; letter-spacing:-.2px}
.tile .td{font-size:13px; line-height:1.5; color:var(--ink-70); margin:0}

.next-cta{border-top:1px solid var(--rule); margin-top:18px; padding:60px 0 0}

@media(max-width:860px){
  .hero{grid-template-columns:1fr; gap:40px}
  .card{grid-template-columns:1fr}
  .human .in{grid-template-columns:1fr; gap:24px; padding:50px 0}
  .othergrid{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr}
  .cs-meta{gap:22px}
}
@media(max-width:560px){
  .othergrid{grid-template-columns:1fr}
  nav.bar .row{height:62px}
  .brand .logo{height:24px}
  .links{gap:16px}
  .links a{font-size:14px}
  .links a.hideable{display:none}
  .links a.cta{white-space:nowrap; padding:8px 14px}
}

/* === motion / flare === */
.wavebg{position:fixed; top:0; left:0; right:0; height:100vh; z-index:0; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='240'%3E%3Cg fill='none' stroke='%231a3a36' stroke-width='2.2'%3E%3Cpath d='M0,30 C80,6 160,54 240,30 C320,6 400,54 480,30'/%3E%3Cpath d='M0,90 C80,66 160,114 240,90 C320,66 400,114 480,90'/%3E%3Cpath d='M0,150 C80,126 160,174 240,150 C320,126 400,174 480,150'/%3E%3Cpath d='M0,210 C80,186 160,234 240,210 C320,186 400,234 480,210'/%3E%3C/g%3E%3C/svg%3E");
  background-size:560px 280px; background-repeat:repeat}
.squig svg path{stroke-dasharray:240; stroke-dashoffset:240}
@media (prefers-reduced-motion: no-preference){
  .wavebg{animation:driftWave 70s linear infinite}
  .squig svg path{animation:drawWave 1.2s cubic-bezier(.3,.7,.2,1) .25s forwards}
  .hero .kick,.hero h1,.hero .lede,.hero .cta{opacity:0; transform:translateY(14px); animation:riseIn .7s cubic-bezier(.2,.7,.2,1) forwards}
  .hero h1{animation-delay:.07s} .hero .lede{animation-delay:.17s} .hero .cta{animation-delay:.27s}
  .hero .photo{opacity:0; animation:risePhoto .9s ease .15s forwards}
  .photo .sun{animation:bob 6.5s ease-in-out infinite}
  /* scroll-reveal: only hide when motion is allowed (JS adds .reveal at runtime) */
  .reveal{opacity:0; transform:translateY(16px);
    transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
    transition-delay:calc(var(--d,0)*70ms)}
  .reveal.shown{opacity:1; transform:none}
}
@media (prefers-reduced-motion: reduce){ .squig svg path{stroke-dashoffset:0} }
@keyframes drawWave{to{stroke-dashoffset:0}}
@keyframes driftWave{from{background-position:0 0} to{background-position:-560px 280px}}
@keyframes riseIn{to{opacity:1; transform:none}}
@keyframes risePhoto{from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:translateY(0)}}
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)}}

/* --- cursor sun-glow (effect 4) --- */
.sunglow{position:fixed; top:0; left:0; width:520px; height:520px; margin:-260px 0 0 -260px;
  z-index:1; pointer-events:none; border-radius:50%;
  background:radial-gradient(circle, var(--gold), var(--clay) 60%, transparent 72%);
  filter:blur(70px); opacity:0; mix-blend-mode:multiply; will-change:transform,opacity}

/* --- card tilt + sheen (effect 5) --- */
.work{perspective:1100px}
.card{position:relative}
.card.tilting{transition:none}
.card .sheen{position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .3s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.5), transparent 45%);
  mix-blend-mode:soft-light}
.card.tilting .sheen{opacity:1}

/* --- cross-page View Transitions (effect 7) --- */
@view-transition{navigation:auto}
nav.bar{view-transition-name:site-nav}
footer{view-transition-name:site-footer}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
.vt-pincushion{view-transition-name:hero-pincushion}
.vt-enterprise{view-transition-name:hero-enterprise}
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}