/* Tomebuy Spreadsheet Signal Book — tomebuy.org — prefix rkj- */
:root{
  --rkj-primary:#C92910;
  --rkj-primary-hover:#A32A1E;
  --rkj-ink:#262626;
  --rkj-text:#333333;
  --rkj-text2:#666666;
  --rkj-border:#E7E3E0;
  --rkj-paper:#FAF9F8;
  --rkj-paper2:#F5F3F1;
  --rkj-white:#FFFFFF;
  --rkj-cyan:#00A6BE;
  --rkj-orange:#C45A06;
  --rkj-radius-sm:4px;
  --rkj-radius-md:8px;
  --rkj-radius-lg:12px;
  --rkj-col:760px;
  --rkj-wrap:1180px;
  --rkj-display: "Bebas Neue", "Arial Narrow", Arial, sans-serif;
  --rkj-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}
@font-face{
  font-family:"Bebas Neue";
  src:url("/assets/fonts/bebas-neue.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--rkj-font); color:var(--rkj-text);
  background:var(--rkj-white); line-height:1.55; font-size:17px;
}
img{max-width:100%; display:block}
a{color:var(--rkj-primary); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--rkj-display); font-weight:400; letter-spacing:.3px; color:var(--rkj-ink); line-height:1.12; margin:0 0 .5em}
h1{font-size:50px}
h2{font-size:34px}
h3{font-size:24px; font-family:var(--rkj-font); font-weight:700; letter-spacing:0}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em; padding-left:1.3em}
.rkj-vh{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.rkj-skip{position:absolute; left:-999px; top:0; background:var(--rkj-primary); color:#fff; padding:10px 16px; z-index:200}
.rkj-skip:focus{left:8px; top:8px}
.rkj-wrap{max-width:var(--rkj-wrap); margin:0 auto; padding:0 24px}
.rkj-col{max-width:var(--rkj-col); margin:0 auto}

/* ---- top strip: independence notice + edition date ---- */
.rkj-top{background:var(--rkj-ink); color:#CCCCCC; font-size:14px}
.rkj-top-in{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px; padding:8px 0}
.rkj-top a{color:#fff}
.rkj-top-r a{color:#ffd9d0}

/* ---- header ---- */
.rkj-head{border-bottom:1px solid var(--rkj-border); background:#fff; position:sticky; top:0; z-index:50}
.rkj-head-in{display:flex; align-items:center; gap:28px; padding:14px 0}
.rkj-brand{display:flex; align-items:center; gap:10px; flex:0 0 auto; min-height:44px; padding:6px 0}
.rkj-brand img{height:32px; width:auto}
.rkj-brand-t{font-family:var(--rkj-display); font-size:21px; color:var(--rkj-ink); white-space:nowrap}
.rkj-brand-t em{font-style:normal; color:var(--rkj-primary)}
.rkj-nav{margin-left:auto; min-width:0}
.rkj-nav ul{list-style:none; display:flex; gap:10px; margin:0; padding:0; flex-wrap:wrap}
.rkj-head-in{min-width:0}
.rkj-nav a{color:var(--rkj-ink); font-weight:600; font-size:15px; white-space:nowrap;
  display:flex; align-items:center; justify-content:center; min-height:44px; min-width:44px;
  padding:0 10px; box-sizing:border-box}
.rkj-nav a[aria-current="page"]{color:var(--rkj-primary)}

/* ---- hero (home only) ---- */
.rkj-hero{background:var(--rkj-paper); border-bottom:1px solid var(--rkj-border)}
.rkj-hero-in{padding:52px 0 40px}
.rkj-hero h1{max-width:900px}
.rkj-lede{max-width:700px; font-size:19px; color:var(--rkj-text2); margin-bottom:26px}
.rkj-search{display:flex; gap:0; max-width:720px; border:2px solid var(--rkj-ink); border-radius:999px; overflow:hidden; background:#fff}
.rkj-search input{flex:1; border:0; padding:16px 22px; font-size:17px; font:inherit; background:transparent; min-width:0}
.rkj-search input:focus{outline:none}
.rkj-search button{border:0; background:var(--rkj-primary); color:#fff; font-weight:700; font-size:16px; padding:0 30px; cursor:pointer}
.rkj-search button:hover{background:var(--rkj-primary-hover)}
.rkj-hint{color:var(--rkj-text2); font-size:14px; margin:10px 0 24px}
.rkj-strip{list-style:none; display:flex; gap:10px; flex-wrap:wrap; margin:0; padding:0}
.rkj-strip li a{display:inline-flex; align-items:center; padding:9px 16px; border:1px solid var(--rkj-border); border-radius:999px; font-size:14.5px; font-weight:600; color:var(--rkj-ink); min-height:44px; box-sizing:border-box}
.rkj-strip li a:hover{border-color:var(--rkj-primary); color:var(--rkj-primary); text-decoration:none}

/* ---- sub-page head (non-home) ---- */
.rkj-phead{background:var(--rkj-paper); border-bottom:1px solid var(--rkj-border); padding:40px 0 32px}
.rkj-kicker{color:var(--rkj-primary); font-weight:700; font-size:14px; letter-spacing:.6px; text-transform:uppercase; margin-bottom:10px}
.rkj-phead h1{max-width:820px; font-size:40px}
.rkj-phead .rkj-lede{margin-bottom:0}

/* ---- category wall ---- */
.rkj-wall{padding:40px 0}
.rkj-wall-h{margin-bottom:18px}
.rkj-wall-h h2{margin-bottom:6px}
.rkj-wall-h p{color:var(--rkj-text2); margin:0}
.rkj-tiles{list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:0; padding:0}
.rkj-tile{display:block; border:1px solid var(--rkj-border); border-radius:var(--rkj-radius-md); overflow:hidden; background:#fff}
.rkj-tile .rkj-tile-sq{position:relative; width:100%; padding-top:100%; overflow:hidden; display:block}
.rkj-tile .rkj-tile-sq img{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover}
.rkj-tile span{display:block; padding:10px 12px; font-weight:700; font-size:14.5px; color:var(--rkj-ink)}
.rkj-tile:hover{border-color:var(--rkj-primary); text-decoration:none}
.rkj-wall-foot{margin-top:16px}

/* ---- content bands ---- */
.rkj-band{padding:46px 0; border-bottom:1px solid var(--rkj-border)}
.rkj-band:last-of-type{border-bottom:0}
.rkj-band h2{margin-bottom:14px}
.rkj-fig{margin:22px 0 0}
.rkj-fig img{width:100%; height:auto; border:1px solid var(--rkj-border); border-radius:var(--rkj-radius-md)}
.rkj-fig figcaption{font-size:14px; color:var(--rkj-text2); margin-top:8px}
.rkj-next{margin-top:18px; font-weight:600; max-width:var(--rkj-col)}
.rkj-next a{margin-right:18px; display:inline}

/* ---- route list ---- */
.rkj-route{list-style:none; margin:18px 0 0; padding:0; counter-reset:rt}
.rkj-route li{counter-increment:rt; padding:12px 0 12px 42px; position:relative; border-top:1px solid var(--rkj-border)}
.rkj-route li:first-child{border-top:0}
.rkj-route li::before{content:counter(rt); position:absolute; left:0; top:10px; width:26px; height:26px; border-radius:50%; background:var(--rkj-ink); color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center}

/* ---- toc cards ---- */
.rkj-toc{list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:18px 0 0; padding:0}
.rkj-toc li a{display:block; border:1px solid var(--rkj-border); border-radius:var(--rkj-radius-md); padding:16px 18px; min-height:44px}
.rkj-toc b{display:block; color:var(--rkj-primary); font-family:var(--rkj-display); font-size:26px}
.rkj-toc span{display:block; font-weight:700; color:var(--rkj-ink); margin:2px 0 4px}
.rkj-toc small{color:var(--rkj-text2); font-size:13.5px}

/* ---- FAQ ---- */
.rkj-faq{max-width:var(--rkj-col); margin:18px 0 0}
.rkj-faq details{border-top:1px solid var(--rkj-border); padding:14px 0}
.rkj-faq details:last-child{border-bottom:1px solid var(--rkj-border)}
.rkj-faq summary{cursor:pointer; font-weight:700; color:var(--rkj-ink); list-style:none; display:flex; justify-content:space-between; gap:16px; min-height:24px}
.rkj-faq summary::-webkit-details-marker{display:none}
.rkj-faq summary::after{content:"+"; color:var(--rkj-primary); font-size:22px; line-height:1}
.rkj-faq details[open] summary::after{content:"\2212"}
.rkj-faq .rkj-a{margin-top:10px; color:var(--rkj-text)}

/* ---- tables ---- */
.rkj-table{width:100%; max-width:var(--rkj-col); border-collapse:collapse; margin:18px 0}
.rkj-table th,.rkj-table td{border-bottom:1px solid var(--rkj-border); text-align:left; padding:10px 12px; font-size:15.5px}
.rkj-table th{color:var(--rkj-text2); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.4px}

/* ---- tools ---- */
.rkj-tool{background:var(--rkj-paper); border:1px solid var(--rkj-border); border-radius:var(--rkj-radius-lg); padding:24px; margin:22px 0; max-width:var(--rkj-col)}
.rkj-tool h3{margin-bottom:10px}
.rkj-field{margin-bottom:14px}
.rkj-field label{display:block; font-weight:700; font-size:14px; margin-bottom:6px}
.rkj-field input,.rkj-field select{width:100%; padding:11px 14px; border:1px solid var(--rkj-border); border-radius:var(--rkj-radius-sm); font:inherit; min-height:44px}
.rkj-tool button{background:var(--rkj-primary); color:#fff; border:0; padding:12px 26px; border-radius:var(--rkj-radius-sm); font-weight:700; font-size:15px; cursor:pointer; min-height:44px}
.rkj-tool button:hover{background:var(--rkj-primary-hover)}
.rkj-out{margin-top:16px; padding:14px 16px; background:#fff; border:1px solid var(--rkj-border); border-radius:var(--rkj-radius-sm); font-size:15.5px; min-height:24px}
.rkj-out:empty{display:none}
.rkj-out b{color:var(--rkj-primary)}

/* ---- video / guide slots (hidden until media is supplied) ---- */
.rkj-vslot,.rkj-gslot{aspect-ratio:16/9; background:var(--rkj-paper2); border:1px dashed var(--rkj-border); border-radius:var(--rkj-radius-md)}
.rkj-vwrap{position:relative; max-width:var(--rkj-col); margin:18px 0}
.rkj-vwrap button.rkj-playbtn{position:absolute; inset:0; width:100%; height:100%; background:rgba(38,38,38,.35); border:0; color:#fff; font-weight:700; font-size:16px; cursor:pointer; border-radius:var(--rkj-radius-md)}
.rkj-vwrap iframe{width:100%; aspect-ratio:16/9; border:0; border-radius:var(--rkj-radius-md)}

/* ---- footer ---- */
.rkj-foot{background:var(--rkj-ink); color:#CCCCCC; margin-top:0}
.rkj-foot .rkj-wrap{padding:40px 24px 28px}
.rkj-fname{font-family:var(--rkj-display); color:#fff; font-size:22px; margin-bottom:10px}
.rkj-fbrand p{max-width:640px; color:#B9B9B9; font-size:14.5px}
.rkj-fbrand a{color:#ffb199}
.rkj-fcols{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:28px}
.rkj-fh{color:#fff; font-weight:700; font-size:13.5px; text-transform:uppercase; letter-spacing:.5px; margin:0 0 10px}
.rkj-fcol ul{list-style:none; margin:0; padding:0}
.rkj-fcol li{margin-bottom:8px}
.rkj-fcol a{color:#CCCCCC; font-size:14.5px; display:flex; align-items:center; min-height:44px; min-width:44px; box-sizing:border-box}
.rkj-fcol a:hover{color:#fff}

/* ---- misc content ---- */
.rkj-note{background:var(--rkj-paper); border:1px solid var(--rkj-border); border-radius:var(--rkj-radius-md); padding:16px 18px; font-size:15px; margin:18px 0; max-width:var(--rkj-col)}
.rkj-note b{color:var(--rkj-primary)}
.rkj-disclaim{font-size:14px; color:var(--rkj-text2); background:var(--rkj-paper); border:1px solid var(--rkj-border); border-radius:var(--rkj-radius-md); padding:14px 16px; max-width:var(--rkj-col); margin:18px 0}
.rkj-az{display:grid; grid-template-columns:repeat(6,1fr); gap:8px; list-style:none; margin:18px 0; padding:0}
.rkj-az a{display:block; text-align:center; border:1px solid var(--rkj-border); border-radius:var(--rkj-radius-sm); padding:10px 4px; font-weight:700; min-height:44px}

/* ---- 404 ---- */
.rkj-404{padding:80px 0; text-align:left}

@media (max-width:1024px){
  .rkj-tiles{grid-template-columns:repeat(3,1fr)}
  .rkj-fcols{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .rkj-nav ul{gap:14px; overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px}
  .rkj-toc{grid-template-columns:1fr}
  .rkj-az{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:600px){
  h1{font-size:34px}
  .rkj-phead h1{font-size:30px}
  h2{font-size:26px}
  .rkj-tiles{grid-template-columns:repeat(2,1fr)}
  .rkj-head-in{flex-wrap:wrap; gap:10px 20px}
  .rkj-nav{margin-left:0; width:100%}
  .rkj-search{flex-direction:row}
  .rkj-search button{padding:0 18px}
  .rkj-fcols{grid-template-columns:1fr 1fr; gap:20px 16px}
  .rkj-az{grid-template-columns:repeat(3,1fr)}
  .rkj-top-in{flex-direction:column; align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

@media(max-width:700px){.rkj-head-in{padding:12px 18px;gap:6px;width:100%}.rkj-nav{flex:1 0 100%;width:100%}.rkj-nav ul{flex-wrap:wrap;overflow:visible;gap:0}.rkj-nav a{min-height:44px;display:flex;align-items:center;padding:8px 10px}.rkj-head{position:relative}}
@media(max-width:700px){.rkj-brand{min-width:0;max-width:100%;flex:1 1 auto}.rkj-brand-t{white-space:normal;min-width:0;font-size:19px;line-height:1.2}.rkj-brand img{flex:0 0 auto}}
