/* KENFLICKS: shared tokens and components for every page */

/* ───────── Tokens ───────── */
:root{
  --cream:#f6f3ed; --paper:#fbfaf7; --stone:#ece7de;
  --ink:#121110; --ink-2:#5f5b55; --ink-3:#8b867e;
  --line:#ddd7cc;
  --black:#0c0c0b; --on-black:#f1eee8; --on-black-2:rgba(241,238,232,.62); --on-black-3:rgba(241,238,232,.38);
  --rec:#e1392b;
  --serif:"Noto Serif Display",Didot,"Bodoni 72",Georgia,serif;
  --sans:"Jost",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.7,.1,1);
  --gutter:max(22px,env(safe-area-inset-left));
  --content:1200px;
  --nav:72px;
}

/* ───────── Base ───────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
main{overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
::selection{background:var(--ink);color:var(--cream)}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:4px}
.wrap{width:min(var(--content),100% - 2 * var(--gutter));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:10px;z-index:200;padding:12px 16px;background:var(--ink);color:var(--cream)}
.skip:focus{left:10px}

/* ───────── Type ───────── */
.display{margin:0;font-family:var(--serif);font-weight:350;font-variation-settings:"wdth" 85;line-height:.96;letter-spacing:-.025em;text-wrap:balance}
.display em{font-style:italic;font-weight:300}
.h1{font-size:clamp(58px,9.4vw,152px)}
.h2{font-size:clamp(42px,5.8vw,92px)}
.h3{font-size:clamp(28px,2.7vw,40px);line-height:1.02}
.label{display:block;margin:0 0 18px;font-family:var(--sans);font-size:12px;line-height:1.5;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-2)}
.lead{margin:0;font-size:clamp(18px,1.45vw,21px);line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.copy{margin:0;color:var(--ink-2);text-wrap:pretty}
.cap{margin:0;font-size:12.5px;letter-spacing:.04em;color:var(--ink-3)}

/* ───────── Buttons & links ───────── */
.btn{--bg:var(--ink);--fg:var(--cream);--bd:var(--ink);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:18px 28px;border:1px solid var(--bd);border-radius:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:12.5px;line-height:1;font-weight:500;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:background .45s var(--ease),color .45s var(--ease),border-color .45s}
.btn--line{--bg:transparent;--fg:var(--ink)}
.btn--light{--bg:var(--on-black);--fg:var(--black);--bd:var(--on-black)}
.btn--ghost-light{--bg:transparent;--fg:var(--on-black);--bd:rgba(241,238,232,.45)}
.btn--sm{padding:13px 18px;font-size:11.5px}
.btn .arr{transition:transform .5s var(--ease)}
.btn:disabled{opacity:.5;cursor:progress}
@media (hover:hover){
  .btn:hover{--bg:transparent;--fg:var(--ink)}
  .btn--line:hover{--bg:var(--ink);--fg:var(--cream)}
  .btn--light:hover{--bg:transparent;--fg:var(--on-black)}
  .btn--ghost-light:hover{--bg:var(--on-black);--fg:var(--black);--bd:var(--on-black)}
  .btn:hover .arr{transform:translateX(4px)}
}
.link{position:relative;display:inline-flex;align-items:center;gap:12px;white-space:nowrap;padding-bottom:6px;font-size:12.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:right;transition:transform .6s var(--ease)}
.link:hover::after{transform:scaleX(0)}

/* ───────── Viewfinder brackets: the corner marks from the KF logo ───────── */
.vf{--vf-c:currentColor;--vf-len:22px;--vf-w:1.5px;--vf-in:14px;position:relative}
.vf::after{content:"";position:absolute;inset:var(--vf-in);z-index:3;pointer-events:none;
  background:
    linear-gradient(var(--vf-c),var(--vf-c)) top left/var(--vf-len) var(--vf-w),
    linear-gradient(var(--vf-c),var(--vf-c)) top left/var(--vf-w) var(--vf-len),
    linear-gradient(var(--vf-c),var(--vf-c)) top right/var(--vf-len) var(--vf-w),
    linear-gradient(var(--vf-c),var(--vf-c)) top right/var(--vf-w) var(--vf-len),
    linear-gradient(var(--vf-c),var(--vf-c)) bottom left/var(--vf-len) var(--vf-w),
    linear-gradient(var(--vf-c),var(--vf-c)) bottom left/var(--vf-w) var(--vf-len),
    linear-gradient(var(--vf-c),var(--vf-c)) bottom right/var(--vf-len) var(--vf-w),
    linear-gradient(var(--vf-c),var(--vf-c)) bottom right/var(--vf-w) var(--vf-len);
  background-repeat:no-repeat;transition:inset 1.1s var(--ease),opacity .8s}
.vf--light{--vf-c:rgba(255,255,255,.92)}
.js .vf.rv::after{inset:calc(var(--vf-in) - 18px);opacity:0}
.js .vf.rv.is-in::after{inset:var(--vf-in);opacity:1}

/* ───────── Nav ───────── */
.nav{--progress:0;position:sticky;top:0;z-index:60;height:var(--nav);background:rgba(246,243,237,.86);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid rgba(18,17,16,.08)}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink);transform-origin:left;transform:scaleX(var(--progress))}
.nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:14px}
.brand img{height:30px;width:auto}
.brand span{font-size:12px;font-weight:500;letter-spacing:.42em;padding-left:.42em;border-left:1px solid var(--line);padding:4px 0 4px 14px}
.nav__right{display:flex;align-items:center;gap:34px}
.nav__links{display:flex;gap:28px;margin:0;padding:0;list-style:none}
.nav__links a{font-size:11.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2);transition:color .3s}
.nav__links a:hover{color:var(--ink)}

/* ───────── Footer ───────── */
.foot{background:var(--cream);padding:clamp(64px,9vh,100px) 0 28px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.foot__top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px;padding-bottom:44px}
.foot__brand img{width:84px;height:auto;margin-bottom:18px}
.foot__brand p{margin:0;max-width:30ch}
.foot h4{margin:0 0 16px;font-size:11.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--ink)}
.foot ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.foot a:hover{color:var(--ink)}
.foot__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:22px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3)}

/* ───────── Reveal ───────── */
.js .rv{opacity:0;transform:translateY(34px);transition:opacity 1.1s var(--ease),transform 1.2s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
.js .rv.is-in{opacity:1;transform:none}

/* ───────── Responsive ───────── */
@media (max-width:980px){
  .nav__links{display:none}
  .foot__top{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}
}
@media (max-width:640px){
  :root{--nav:64px}
  .brand img{height:26px}
  .brand span{display:none}
  .nav .btn{padding:12px 14px;font-size:10.5px;letter-spacing:.2em}
}
/* Phones redraw a backdrop blur on every scroll frame; a near-solid bar looks the same and scrolls smoothly */
@media (hover:none){
  .nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(246,243,237,.97)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .js .rv{opacity:1;transform:none}
}