/* kendallprojects Journal: the studio look (black, white, smoke; Bebas headlines, every second word leans) */
:root{
  --k-black:#000;--k-coal:#0E0E0F;--k-char:#1A1B1C;--k-smoke-dk:#2C2C2C;--k-smoke:#8C8C8C;--k-smoke-lt:#C9C8C8;
  --k-white:#FAF8F8;--k-soft:#ECEAEA;--k-line:rgba(255,255,255,.14);--k-smoke-hl:#ADADAD;--u-gold:#C8A862;
  --k-font:"Archivo","Helvetica Neue",Arial,sans-serif;--u-title:"Bebas Neue","Oswald",Impact,sans-serif;
  --edge:clamp(18px,4.4vw,72px);--padL:max(var(--edge),env(safe-area-inset-left,0px));--padR:max(var(--edge),env(safe-area-inset-right,0px));
  --top:88px;color-scheme:dark
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--k-black);color:var(--k-soft);font-family:var(--k-font);font-weight:300;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--k-white);color:var(--k-black)}

/* type */
.k-label{font-family:var(--k-font);font-stretch:75%;font-weight:500;font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;color:var(--k-smoke);text-decoration:none}
a.k-label:hover{color:var(--k-white)}
.k-h{font-family:var(--u-title);font-weight:400;text-transform:uppercase;line-height:.9;letter-spacing:-.025em;margin:0;color:var(--k-smoke-hl);text-wrap:balance}
.k-h .it,.it{color:var(--k-white);display:inline-block;transform:skewX(-11.5deg);transform-origin:50% 62%;margin:0 .07em 0 .03em}
.k-p{font-size:1.05rem;color:var(--k-smoke-lt);max-width:56ch;margin:0;font-weight:300;text-wrap:pretty}
.k-btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--k-font);font-stretch:75%;font-weight:500;font-size:.8rem;letter-spacing:.32em;text-transform:uppercase;text-decoration:none;color:var(--k-black);background:var(--k-white);border:0;border-radius:2px;padding:16px 28px;box-shadow:1px 1px 0 var(--k-smoke),2px 2px 0 var(--k-smoke),3px 3px 0 var(--k-smoke),4px 4px 0 var(--k-smoke);transition:transform .15s,box-shadow .15s}
.k-btn:hover{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--k-smoke)}

/* header (same as the home page) */
.k-top{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);z-index:60;display:flex;align-items:center;gap:30px;height:var(--top);padding-left:var(--padL);padding-right:var(--padR);background:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,0));transition:background .3s}
.k-top.solid{background:rgba(0,0,0,.92);box-shadow:0 1px 0 var(--k-line)}
.brand{display:flex;align-items:center;gap:16px;flex:none}
.k-logo{flex:none;display:block;width:clamp(140px,13vw,190px)}
.k-logo img{width:100%;height:auto}
.home-link{font-family:var(--k-font);font-stretch:75%;font-weight:500;font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--k-smoke-lt);text-decoration:none;padding:7px 0 7px 16px;border-left:1px solid var(--k-line)}
.home-link:hover{color:var(--k-white)}
.k-nav{display:flex;gap:34px;flex:1;min-width:0;justify-content:center}
.k-nav a{font-family:var(--k-font);font-stretch:75%;font-weight:400;font-size:.74rem;letter-spacing:.36em;text-transform:uppercase;text-decoration:none;color:var(--k-smoke-lt);padding-block:8px;border-bottom:1px solid transparent;white-space:nowrap}
.k-nav a:hover,.k-nav a[aria-current="page"]{color:var(--k-white);border-bottom-color:var(--k-white)}
.k-nav a.ue-link{color:var(--u-gold)}
.k-nav a.ue-link:hover{border-bottom-color:var(--u-gold)}
.k-nav .nav-cta{display:none}
.k-top .k-btn{padding:11px 18px;font-size:.7rem}
.menu-btn{display:none;background:none;border:1px solid rgba(255,255,255,.3);border-radius:2px;padding:10px 11px;margin-left:auto;cursor:pointer}
@media (max-width:1080px){
  .k-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:rgba(0,0,0,.97);padding:6px var(--padR) 18px var(--padL)}
  .k-nav.open{display:flex}
  .k-nav a{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .k-nav .nav-cta{display:block;color:var(--k-white)}
  .k-top .k-btn{margin-left:auto}
  .menu-btn{display:block;margin-left:0}
}
@media (max-width:640px){.k-top .k-btn{display:none}.menu-btn{margin-left:auto}.home-link{display:none}}

/* smoke images: black-and-white at rest, color on hover (always color on touch screens) */
.smoke{position:relative;display:block;overflow:hidden;background:var(--k-char)}
.smoke img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(.82);transition:filter .7s,transform 1s cubic-bezier(.2,.7,.2,1)}
.smoke:hover img,a:hover .smoke img,a:focus-visible .smoke img{filter:none}
@media (hover:none){.smoke img{filter:none}}

/* post */
main{padding-top:var(--top)}
.jp-hero .smoke{height:min(68vh,56.25vw);min-height:220px}
.jp-hero .smoke::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000 0%,rgba(0,0,0,0) 45%);pointer-events:none}
.jp-head{max-width:1040px;margin:-9vh auto 0;padding:0 var(--padR) 0 var(--padL);position:relative;z-index:2;display:grid;gap:18px}
.jp-crumbs{display:flex;flex-wrap:wrap;gap:6px 22px}
.jp-head h1{font-size:clamp(2.6rem,6.4vw,5.6rem)}
.jp-meta{margin:0;font-family:var(--k-font);font-stretch:75%;font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--k-smoke)}
.jp-meta a{color:var(--k-white)}
.jp-body{max-width:calc(68ch + var(--padL) + var(--padR));margin:clamp(34px,6vh,64px) auto 0;padding:0 var(--padR) 0 var(--padL);font-size:clamp(1.04rem,1.15vw,1.16rem);line-height:1.78;color:var(--k-soft)}
.jp-body::after{content:"";display:block;clear:both}
.jp-body p{margin:0 0 1.25em}
.jp-body strong{font-weight:600;color:var(--k-white)}
.jp-body a{color:var(--k-white);text-decoration:underline;text-decoration-color:var(--k-smoke);text-underline-offset:3px}
.jp-body a:hover{text-decoration-color:var(--k-white)}
.jp-body h2,.jp-body h3{font-family:var(--u-title);font-weight:400;text-transform:uppercase;letter-spacing:-.01em;line-height:.95;color:var(--k-white);margin:1.7em 0 .55em;text-wrap:balance}
.jp-body h2{font-size:clamp(2rem,3.4vw,2.8rem)}
.jp-body h3{font-size:clamp(1.55rem,2.4vw,2rem);color:var(--k-smoke-hl)}
.jp-body ul,.jp-body ol{margin:0 0 1.4em;padding:0;list-style:none;display:grid;gap:.6em}
.jp-body li{position:relative;padding-left:1.7em}
.jp-body ul>li::before{content:"";position:absolute;left:0;top:.82em;width:.95em;height:1px;background:var(--k-smoke)}
.jp-body ol{counter-reset:n}
.jp-body ol>li::before{counter-increment:n;content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.1em;font-family:var(--u-title);font-size:1.05em;color:var(--k-smoke)}
.jp-body blockquote{margin:1.6em 0;padding:0 0 0 1.2em;border-left:1px solid var(--k-white);font-size:1.15em;color:var(--k-white)}
.jp-body hr{border:0;border-top:1px solid var(--k-line);margin:2.4em 0}
.jp-fig{margin:2.2em calc(-1 * min(9vw,140px));}
.jp-fig img{width:100%;height:auto;background:var(--k-char)}
.jp-fig figcaption{margin-top:10px;font-size:.82rem;color:var(--k-smoke)}
.jp-fig.half{margin:.4em 0 1.4em}
@media (min-width:900px){
  .jp-fig.half{width:44%}
  .jp-fig.half.r{float:right;margin:.4em calc(-1 * min(7vw,110px)) 1.2em 2em}
  .jp-fig.half.l{float:left;margin:.4em 2em 1.2em calc(-1 * min(7vw,110px))}
}
@media (max-width:899px){.jp-fig{margin-left:0;margin-right:0}}
.jp-share{max-width:calc(68ch + var(--padL) + var(--padR));margin:28px auto 0;padding:22px var(--padR) 0 var(--padL);display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;border-top:1px solid var(--k-line)}
.jp-share a,.jp-share button{font-family:var(--k-font);font-stretch:75%;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--k-smoke-lt);text-decoration:none;background:none;border:0;padding:4px 0;cursor:pointer}
.jp-share a:hover,.jp-share button:hover{color:var(--k-white)}

/* cards and grids */
.jgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,40px)}
.jc{display:grid;gap:12px;text-decoration:none;color:var(--k-soft);align-content:start}
.jc[hidden]{display:none}
.jc .smoke{aspect-ratio:3/2}
.jc-txt{display:grid;gap:8px}
.jc h3{margin:0;font-family:var(--u-title);font-weight:400;font-size:clamp(1.45rem,1.9vw,1.85rem);line-height:.98;letter-spacing:-.01em;text-transform:uppercase;color:var(--k-white);text-wrap:balance}
.jc-meta{font-family:var(--k-font);font-stretch:75%;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--k-smoke)}
.jc-ex{color:var(--k-smoke-lt);font-size:1rem;max-width:56ch}
.jc.big{grid-column:1/-1;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(22px,3vw,48px);align-items:end}
.jc.big .smoke{aspect-ratio:16/9}
.jc.big h3{font-size:clamp(2.2rem,4vw,3.8rem)}
@media (max-width:1000px){.jgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.jc.big{grid-template-columns:1fr}}
@media (max-width:600px){.jgrid{grid-template-columns:1fr}}

/* journal index */
.ji-head{padding:clamp(40px,9vh,110px) var(--padR) clamp(26px,5vh,48px) var(--padL);display:grid;gap:18px;max-width:1440px;margin:0 auto}
.ji-head h1{font-size:clamp(3rem,9vw,8rem)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{font-family:var(--k-font);font-stretch:75%;font-weight:400;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;background:transparent;border:1px solid rgba(255,255,255,.22);color:var(--k-smoke-lt);padding:9px 14px;border-radius:999px;cursor:pointer}
.chip:hover{border-color:var(--k-white);color:var(--k-white)}
.chip[aria-pressed="true"]{background:var(--k-white);color:var(--k-black);border-color:var(--k-white)}
.ji-list{padding:0 var(--padR) 0 var(--padL);max-width:1440px;margin:0 auto}

/* more, call to action, footer */
.jp-more{max-width:1440px;margin:clamp(60px,12vh,130px) auto 0;padding:0 var(--padR) 0 var(--padL);display:grid;gap:22px}
.jp-all{justify-self:start;font-family:var(--k-font);font-stretch:75%;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--k-white);text-decoration:none;border-bottom:1px solid var(--k-white);padding-bottom:4px}
.jp-cta{max-width:1440px;margin:clamp(70px,14vh,150px) auto 0;padding:clamp(40px,8vh,80px) var(--padR) 0 var(--padL);border-top:1px solid var(--k-line);display:grid;gap:18px;justify-items:start}
.jp-cta h2{font-size:clamp(2.8rem,7vw,6rem)}
.k-foot{display:grid;gap:14px;padding:22px var(--padR) calc(28px + env(safe-area-inset-bottom,0px)) var(--padL);border-top:1px solid var(--k-line);margin:clamp(60px,10vh,110px) auto 0;max-width:1440px}
.k-foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 30px}
.k-foot .k-logo{width:200px}
.k-foot nav{display:flex;flex-wrap:wrap;gap:8px 26px}
.k-foot nav a{font-family:var(--k-font);font-stretch:75%;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;color:var(--k-smoke-lt)}
.k-foot nav a:hover{color:var(--k-white)}
.k-foot small{font-size:.74rem;color:var(--k-smoke)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}