/* jaykitamura.com · same family and colours as breakthelocks.com. Plain CSS, no build step. */

@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/Inter-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/Inter-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/Inter-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --black:#0a0a0a; --ink2:#141414; --dline:#262626;
  --paper:#f4f2ee; --line:#e4e1db; --text:#0a0a0a; --muted:#5e5e5e; --faint:#8d8d8d;
  --accent:#ff4f1a; --accent-dk:#e03e0b; --accent-lt:#ff7a47;
  --fh:Montserrat,"Helvetica Neue",Arial,sans-serif;
  --fb:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r:22px; --ease:cubic-bezier(.2,.7,.2,1); --pad:clamp(20px,4.4vw,56px); --head:74px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--black);color:var(--text);font:400 17px/1.65 var(--fb);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
p{margin:0 0 1em}
h1,h2,h3{margin:0;font-family:var(--fh);font-weight:700}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.skip{position:absolute;left:-9999px;top:8px;background:#fff;color:#000;padding:10px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
main{background:var(--black);padding-bottom:12px}

/* type */
.eyebrow{display:flex;align-items:center;gap:10px;font:600 12px/1.2 var(--fh);letter-spacing:.16em;text-transform:uppercase;margin:0 0 20px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.h1{font:800 clamp(48px,7.2vw,104px)/.95 var(--fh);letter-spacing:-.04em;margin:0 0 22px}
.h2{font:700 clamp(34px,4.9vw,62px)/1.03 var(--fh);letter-spacing:-.03em;margin:0 0 22px}
.lede{font-size:clamp(18px,1.6vw,20.5px);line-height:1.6;max-width:640px}
.pull{font:600 clamp(20px,2vw,24px)/1.4 var(--fh);letter-spacing:-.01em;margin:0 0 22px}
.prose p{max-width:660px}
.meta{font:600 13.5px/1.5 var(--fh);color:var(--muted);margin:16px 0 0}
.meta a{color:inherit}

/* layout */
.container{max-width:1240px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.sec{padding:clamp(76px,10vw,140px) 0;position:relative}
.dark{background:var(--black);color:#f2f2f2}
.dark .lede{color:#cfcfcf}
.light{background:#fff}
.paper{background:var(--paper)}
.sec-head{max-width:760px;margin:0 0 clamp(36px,5vw,64px)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,96px);align-items:center}
.photo{border-radius:var(--r);overflow:hidden;background:#111}
.photo img{width:100%;height:100%;object-fit:cover}

/* header */
.sitehead{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:28px;background:rgba(10,10,10,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;padding:0 var(--pad);height:var(--head)}
.logo{display:block;flex:0 0 auto;line-height:0}
.logo img{height:50px;width:auto}
.logo-foot img{height:60px}
.nav{display:flex;gap:28px;margin-left:auto}
.nav a{font:600 14px/1 var(--fh);text-decoration:none;opacity:.78;transition:opacity .2s,color .2s;white-space:nowrap}
.nav a:hover{opacity:1;color:var(--accent-lt)}
.menubtn{display:none;background:none;border:0;width:42px;height:42px;cursor:pointer;position:relative}
.menubtn span{position:absolute;left:10px;right:10px;height:2px;background:#fff;border-radius:2px;transition:.25s}
.menubtn span:first-child{top:16px}.menubtn span:last-child{top:24px}
.menubtn[aria-expanded=true] span:first-child{top:20px;transform:rotate(45deg)}
.menubtn[aria-expanded=true] span:last-child{top:20px;transform:rotate(-45deg)}

/* buttons & forms */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;
  background:var(--accent);color:#fff;font:700 15.5px/1 var(--fh);padding:18px 30px;border-radius:999px;transition:background .2s,transform .2s var(--ease),box-shadow .2s}
.btn:hover{background:var(--accent-dk);transform:translateY(-1px)}
.btn.black{background:var(--black);color:#fff}.btn.black:hover{background:#2a2a2a;box-shadow:none}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn.ghost:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px currentColor}
.btn.sm{padding:12px 22px;font-size:14px}
.btn-lg{padding:20px 34px;font-size:16px}
.btn-block{width:100%}
.btn .arr{width:18px;height:18px;transition:transform .25s}
.btn:hover .arr{transform:translateX(3px)}
.btn:disabled{opacity:.6;cursor:default;transform:none}
.btn.loading{color:transparent!important;position:relative}
.btn.loading .arr{opacity:0}
.btn.loading::before{content:"";position:absolute;width:20px;height:20px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.textlink{display:inline-flex;align-items:center;gap:8px;font:700 15px/1 var(--fh);text-decoration:none;color:var(--text);border-bottom:2px solid var(--accent);padding-bottom:6px}
.textlink .arr{width:17px;height:17px;transition:transform .25s}
.textlink:hover .arr{transform:translateX(3px)}

.input{width:100%;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:15px 17px;font-size:16.5px;color:var(--text);transition:border-color .2s,box-shadow .2s}
.input:focus{outline:0;border-color:var(--black);box-shadow:0 0 0 4px rgba(10,10,10,.08)}
.input.bad{border-color:#c2410c}
textarea.input{resize:vertical;min-height:140px;line-height:1.55}
.field{display:block;margin:0 0 14px;border:0;padding:0;min-width:0}
.field>span,.field legend{display:block;font:600 13px/1 var(--fh);margin:0 0 9px;padding:0}
.field em{font-style:normal;font-weight:500;color:var(--faint)}
.field .err{display:block;font-size:13px;color:#b3370a;margin-top:6px}
.fine{font-size:13px;color:var(--faint);margin:14px 0 0}
.fine a{color:inherit}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
.fade-up{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.fade-up.in{opacity:1;transform:none}

/* ------------------------------------------------------------------ hero
   Same as breakthelocks.com: a full-bleed photo card, words bottom left. */
@keyframes kenburns{from{transform:scale(1.07)}to{transform:scale(1)}}
.hero{position:relative;margin:12px;border-radius:var(--r);overflow:hidden;min-height:min(900px,calc(100svh - var(--head) - 24px));display:flex;align-items:flex-end;color:#fff;background:#000}
.hero picture,.hero-bg{position:absolute;inset:0;width:100%;height:100%}
.hero-bg{object-fit:cover;object-position:72% 30%;animation:kenburns 16s var(--ease) both}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.55) 38%,rgba(0,0,0,0) 62%),linear-gradient(0deg,rgba(0,0,0,.6) 0%,transparent 42%)}
.hero-in{position:relative;z-index:2;width:100%;padding:clamp(40px,6vw,88px) clamp(22px,5vw,76px)}
.hero-in>*{max-width:600px}
.hero .h1{max-width:9ch}
.hero-sub{font:700 clamp(20px,2.4vw,30px)/1.2 var(--fh);letter-spacing:-.015em;margin:0 0 18px;max-width:22ch!important}
.hero-sub::before{content:"";display:block;width:56px;height:4px;background:var(--accent);border-radius:4px;margin-bottom:18px}
.hero .lede{color:rgba(255,255,255,.84);margin-bottom:32px;max-width:560px}
.hero-meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin:22px 0 0;font:600 13.5px/1.2 var(--fh);color:rgba(255,255,255,.8)}
.hero-meta span{display:flex;align-items:center;gap:8px}
.hero-meta span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* ----------------------------------------------------------------- books */
.books{padding-top:clamp(70px,9vw,120px)}
.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bookcard{display:flex;flex-direction:column;background:#141414;border:1px solid #242424;border-radius:var(--r);padding:clamp(22px,2.4vw,32px)}
.cover{position:relative;height:clamp(300px,30vw,400px);display:flex;align-items:flex-end;justify-content:center;margin:0 0 28px;padding:28px 0 26px;border-radius:16px;
  background:radial-gradient(60% 70% at 50% 55%,rgba(255,79,26,.18),rgba(255,79,26,0) 70%),#0a0a0a}
.cover::after{content:"";position:absolute;left:18%;right:18%;bottom:20px;height:18px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.85),transparent);z-index:0}
.cover img{position:relative;z-index:1;max-height:100%;max-width:86%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 30px 30px rgba(0,0,0,.55));transition:transform .5s var(--ease)}
.bookcard:hover .cover img{transform:translateY(-6px) rotate(-.5deg)}
.badge{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;font:800 11.5px/1 var(--fh);letter-spacing:.1em;text-transform:uppercase;padding:9px 13px;border-radius:999px;box-shadow:0 10px 24px -10px rgba(255,79,26,.8)}
.bookcard h3{font:800 clamp(23px,2.1vw,28px)/1.1 var(--fh);letter-spacing:-.02em;color:#fff;margin:0 0 10px}
.bookcard .sub{font:600 15px/1.45 var(--fh);color:var(--accent-lt);margin:0 0 14px}
.bookcard .txt{font-size:15.5px;color:#bdbdbd;margin:0 0 14px}
.bookcard .formats{font:600 13px/1.5 var(--fh);color:#8d8d8d;margin:0 0 16px}
.bookcard .formats a{display:inline-flex;align-items:center;gap:5px;color:var(--accent-lt);text-decoration:none;border-bottom:1px solid rgba(255,122,71,.45);margin-left:4px}
.bookcard .formats a:hover{border-color:var(--accent-lt)}
.bookcard .cta-row{margin-top:auto;padding-top:6px}
.bookcard .btn{padding:15px 22px;font-size:14.5px}
.bookcard .btn .arr{width:16px;height:16px}

/* ------------------------------------------------------------------ show */
.show{margin:12px;border-radius:var(--r);overflow:hidden;color:#fff;background:#141414}
.show-img{aspect-ratio:21/9;overflow:hidden;background:#000}
.show-img picture,.show-img img{width:100%;height:100%}
.show-img img{object-fit:cover;object-position:50% 38%}
.show-in{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,80px);align-items:start;padding:clamp(40px,5.5vw,76px) clamp(22px,5vw,76px) clamp(48px,6vw,84px)}
.show-in .eyebrow{color:var(--accent-lt)}
.show .h2{margin:0}
.show .lede{color:rgba(255,255,255,.84);margin-bottom:26px}

/* ----------------------------------------------------------------- about */
.bio{align-items:start;grid-template-columns:1.1fr .9fr}
.photo.jay{aspect-ratio:1/1;position:sticky;top:100px}
.bio .prose p{color:#2c2c2c}
.bio .prose p.pull{color:var(--text);font-weight:600;font-size:clamp(18px,1.6vw,20.5px);line-height:1.5}
.mission{margin:30px 0 0;padding:26px 28px;background:var(--black);color:#fff;border-radius:var(--r);max-width:660px;border-left:4px solid var(--accent)}
.mission span{display:block;font:700 12px/1 var(--fh);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.mission p{font:700 clamp(19px,1.8vw,23px)/1.35 var(--fh);letter-spacing:-.01em;margin:0}

/* ------------------------------------------------------- break the locks */
.btl{position:relative;margin:12px;border-radius:var(--r);overflow:hidden;color:#fff;background:#000}
.btl picture,.btl-bg{position:absolute;inset:0;width:100%;height:100%}
.btl-bg{object-fit:cover;object-position:68% 50%}
.btl::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.15) 85%)}
.btl-in{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:clamp(80px,11vw,150px) clamp(22px,5vw,76px)}
.btl-in>*{max-width:620px}
.btl-logo{width:clamp(220px,24vw,300px);height:auto;margin:0 0 30px}
.btl .lede{color:rgba(255,255,255,.84);margin-bottom:28px}
.btl .meta{color:rgba(255,255,255,.7)}
.btl .meta a{color:var(--accent-lt)}

/* ------------------------------------------------------------------ work */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px)}
.way .photo{aspect-ratio:4/5;margin:0 0 22px}
.way .photo img{transition:transform .8s var(--ease)}
.way:hover .photo img{transform:scale(1.03)}
.way h3{font:800 clamp(22px,2vw,27px)/1.15 var(--fh);letter-spacing:-.02em;margin:0 0 10px}
.way p{color:var(--muted);margin:0 0 18px}

/* --------------------------------------------------------------- inquire */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,6vw,96px);align-items:start}
.assure{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
.assure li{display:flex;align-items:center;gap:10px;font:600 15px/1.3 var(--fh)}
.assure svg{color:var(--accent-dk);flex:0 0 auto}
.cform{background:#fff;border-radius:var(--r);padding:clamp(24px,3.4vw,40px);box-shadow:0 30px 60px -40px rgba(0,0,0,.25)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.two:has(>[hidden]){grid-template-columns:1fr}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;font:600 14px/1 var(--fh);padding:12px 16px;border-radius:999px;border:1.5px solid var(--line);transition:.2s;background:#fff}
.chip:hover span{border-color:#bdb7ab}
.chip input:checked+span{background:var(--black);color:#fff;border-color:var(--black)}
.chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
.types{margin-bottom:20px}
.formmsg{padding:14px 16px;border-radius:12px;font-size:15px;margin-bottom:16px}
.formmsg.ok{background:#0a0a0a;color:#fff;border-left:4px solid var(--accent)}
.formmsg.bad{background:#fff3ec;color:#8f2d07;border:1px solid #f6c7ad}

/* ---------------------------------------------------------------- footer */
.sitefoot{background:var(--black);color:#bdbdbd;padding:56px 0 48px}
.sitefoot-in{display:grid;grid-template-columns:auto 1fr;gap:18px 40px;align-items:start}
.sitefoot .tag{margin:16px 0 0;font:600 14px/1.4 var(--fh);color:var(--accent-lt)}
.sitefoot nav{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:flex-end;font:600 14px/1 var(--fh)}
.sitefoot nav a{color:#fff;text-decoration:none;opacity:.78}
.sitefoot nav a:hover{opacity:1}
.sitefoot .fine{grid-column:1/-1;margin:14px 0 0;padding-top:22px;border-top:1px solid #222;color:#7d7d7d}
.social{display:flex;gap:14px;margin:16px 0 0}
.social a{color:#fff;opacity:.8}

/* ---------------------------------------------------------- simple pages */
.simple{max-width:760px;margin:12px auto 0;padding:clamp(60px,9vw,120px) var(--pad);background:#fff;border-radius:var(--r)}
.simple h1{font:800 clamp(38px,5vw,60px)/1.02 var(--fh);letter-spacing:-.03em;margin:0 0 24px}
.simple h2{font:700 22px/1.25 var(--fh);margin:36px 0 10px}
.simple p,.simple li{color:#2e2e2e}
.notfound{margin:12px;border-radius:var(--r);background:radial-gradient(100% 80% at 50% 30%,#2a120a,#050505 70%);color:#fff;text-align:center;min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px var(--pad)}
.notfound .h2{max-width:14ch}
.notfound p{color:#cfcfcf;max-width:520px}

/* ------------------------------------------------------------ responsive */
@media (max-width:1080px){
  .menubtn{display:block}
  .sitehead{gap:14px;backdrop-filter:none;-webkit-backdrop-filter:none;background:#0a0a0a}
  .sitehead .btn.sm{margin-left:auto}
  .nav{position:fixed;top:var(--head);left:0;right:0;flex-direction:column;gap:0;background:#0a0a0a;box-shadow:0 30px 40px rgba(0,0,0,.5);padding:10px var(--pad) 24px;
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:.25s var(--ease);margin:0}
  .nav.open{transform:none;opacity:1;pointer-events:auto}
  .nav a{font-size:18px;padding:16px 0;border-bottom:1px solid #222}
  .shelf{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .cover{height:clamp(300px,70vw,420px)}
}
@media (max-width:900px){
  .split,.bio,.contact{grid-template-columns:1fr}
  .photo.jay{position:relative;top:0;max-width:440px}
  .ways{grid-template-columns:1fr;max-width:560px}
  .way .photo{aspect-ratio:16/11}
  .sitefoot-in{grid-template-columns:1fr}
  .sitefoot nav{justify-content:flex-start}
  .btl::after{background:linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.7) 55%,rgba(0,0,0,.35) 100%)}
  .show-in{grid-template-columns:1fr;gap:18px}
  .show-img{aspect-ratio:16/10}
}
@media (min-width:761px) and (max-width:1100px){
  .hero-bg{object-position:86% 30%}
  .hero-in>*,.hero .lede{max-width:min(480px,45vw)}
}
@media (max-width:760px){
  /* phone: Jay on top, the words underneath so they never cover his face */
  .hero{flex-direction:column;align-items:stretch;min-height:0!important}
  .hero picture{position:relative;display:block;height:min(66svh,540px);overflow:hidden}
  .hero-bg{object-position:50% 14%}
  .hero::after{display:none}
  .hero picture::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000 0%,rgba(0,0,0,.75) 22%,rgba(0,0,0,0) 48%)}
  .hero-in{margin-top:-120px;padding-top:0;z-index:3}
  .hero .h1{max-width:none}
}
@media (max-width:640px){
  :root{--head:64px}
  body{font-size:16.5px}
  .sitehead .logo img{height:40px}
  .sitehead .btn.sm{padding:10px 16px;font-size:13px}
  .hero,.show,.btl{margin:8px;border-radius:18px}
  main{padding-bottom:8px}
  .cta-row .btn{width:100%}
  .bookcard .cta-row .btn{width:auto;flex:1}
  .two{grid-template-columns:1fr}
  .show-img{aspect-ratio:1/1}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal,.fade-up{opacity:1;transform:none}
}