/* kakobuyhub.org · Kakobuy Spreadsheet Help Index
   Motif: a library card catalogue. Each content block is an index card with a ruled top edge,
   a call number (the official help article number) and a "filed under" slip.
   Official palette: CTA #ff5000 (dark ink on it, never white), hover #e5152c, dark surface #333333. */
:root {
  --cx-ink: #1f1b16;
  --cx-ink-2: #4a4238;
  --cx-paper: #f4efe4;
  --cx-card: #fffdf8;
  --cx-line: #d9cfbd;
  --cx-rule: #ff5000;
  --cx-cta: #ff5000;
  --cx-hover: #e5152c;
  --cx-dark: #333333;
  --cx-link: #8f2a07;
  --cx-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --cx-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cx-mono: "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cx-paper); color: var(--cx-ink); font: 17px/1.62 var(--cx-sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cx-link); text-underline-offset: 2px; }
a:hover { color: var(--cx-ink); }
:focus-visible { outline: 3px solid var(--cx-ink); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--cx-serif); line-height: 1.2; color: var(--cx-ink); }
h1 { font-size: clamp(30px, 4.2vw, 46px); margin: 6px 0 14px; letter-spacing: -0.01em; }
h2 { font-size: clamp(23px, 2.6vw, 30px); margin: 4px 0 14px; }
h3 { font-size: 20px; margin: 22px 0 8px; }
p { margin: 0 0 14px; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 6px; }
.cx-skip { position: absolute; left: -999px; top: 0; background: var(--cx-ink); color: #fff; padding: 12px 16px; z-index: 9; }
.cx-skip:focus { left: 8px; }

/* ---- header */
.cx-top { background: var(--cx-card); border-top: 4px solid var(--cx-rule); border-bottom: 1px solid var(--cx-line); }
.cx-bar { max-width: 1240px; margin: 0 auto; padding: 6px 20px; display: flex; align-items: center; gap: 18px; justify-content: space-between; }
.cx-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--cx-ink); white-space: nowrap; }
.cx-brand span { font-family: var(--cx-serif); font-size: 17px; }
.cx-brand b { font-weight: 700; }
.cx-nav ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 2px; flex-wrap: nowrap; }
.cx-nav li { margin: 0; }
.cx-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; text-decoration: none; color: var(--cx-ink); font-size: 15px; border-bottom: 3px solid transparent; white-space: nowrap; }
.cx-nav a:hover { border-bottom-color: var(--cx-line); }
.cx-nav a[aria-current="page"] { border-bottom-color: var(--cx-rule); font-weight: 600; }

/* ---- page heads */
.cx-col { max-width: 800px; margin: 0 auto; padding: 0 24px; }
.cx-hero { padding: 40px 0 26px; }
.cx-pagehead { padding: 18px 0 18px; }
.cx-lede { font-size: 19px; color: var(--cx-ink-2); max-width: 70ch; }
.cx-crumbs { font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--cx-ink-2); }
.cx-crumbs a, .cx-crumbs span[aria-current] { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }

/* ---- search (hero centrepiece) */
.cx-search { margin: 18px 0 10px; background: var(--cx-card); border: 1px solid var(--cx-line); border-top: 4px solid var(--cx-rule); padding: 16px 18px 18px; }
.cx-search label { display: block; font-weight: 600; margin-bottom: 8px; }
.cx-search-row { display: flex; gap: 10px; }
.cx-search input { flex: 1; min-width: 0; min-height: 52px; font-size: 17px; padding: 0 14px; border: 2px solid var(--cx-ink); background: #fff; color: var(--cx-ink); }
.cx-search button { min-height: 52px; padding: 0 26px; font-size: 17px; font-weight: 700; border: 2px solid var(--cx-ink); background: var(--cx-cta); color: var(--cx-ink); cursor: pointer; }
.cx-search button:hover { background: var(--cx-ink); color: #fff; }
.cx-sub { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 6px 0 0; font-size: 15px; }
.cx-sub a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- category wall */
.cx-wallsec { max-width: 1200px; margin: 0 auto 40px; padding: 0 20px; }
.cx-wallsec .cx-col { padding: 0 4px; margin: 0 0 14px; max-width: none; }
.cx-wall { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.cx-wall li { margin: 0; min-width: 0; }
.cx-tile { display: flex; flex-direction: column; height: 100%; background: var(--cx-card); border: 1px solid var(--cx-line); border-top: 3px solid var(--cx-rule); text-decoration: none; color: var(--cx-ink); }
.cx-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.cx-tile-lab { font-weight: 700; padding: 8px 10px 0; line-height: 1.3; }
.cx-tile-kind { font-size: 13px; color: var(--cx-ink-2); padding: 2px 10px 0; }
.cx-tile-note { font-size: 13.5px; color: var(--cx-ink-2); padding: 6px 10px 10px; line-height: 1.4; border-top: 1px dashed var(--cx-line); margin-top: 8px; }
.cx-tile:hover { border-color: var(--cx-ink); }

/* ---- index cards (content sections) */
.cx-sec { max-width: 1200px; margin: 0 auto 34px; background: var(--cx-card); border: 1px solid var(--cx-line); border-top: 4px solid var(--cx-rule); position: relative; }
.cx-sec::after { content: ""; position: absolute; left: 50%; bottom: 10px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--cx-paper); border: 1px solid var(--cx-line); }
.cx-row { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 36px; align-items: stretch; padding: 30px 32px 38px; }
.cx-row > * { min-width: 0; }
.cx-row--flip .cx-text { order: 2; }
.cx-row--flip .cx-fig { order: 1; }
.cx-sec--wide { padding: 30px 0 38px; }
.cx-sec--wide .cx-fig { max-width: 800px; margin: 8px auto 18px; }
.cx-call { display: inline-block; font: 600 13px/1 var(--cx-mono); letter-spacing: .04em; padding: 6px 8px; border: 1px dashed var(--cx-ink-2); color: var(--cx-ink-2); margin-bottom: 6px; }
.cx-filed { margin: 18px 0 0; padding-top: 10px; border-top: 1px dashed var(--cx-line); font-size: 15px; color: var(--cx-ink-2); }
.cx-filed span { color: var(--cx-ink-2); }
.cx-fig { margin: 0; background: #efe8da; border: 1px solid var(--cx-line); display: flex; flex-direction: column; }
.cx-fig img { width: 100%; height: auto; }
.cx-fig figcaption { font-size: 14.5px; line-height: 1.45; color: var(--cx-ink-2); padding: 10px 12px 12px; margin-top: auto; background: var(--cx-card); border-top: 1px solid var(--cx-line); }

/* ---- links to official articles (also used inside tables: 44px targets) */
a.cx-hid { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font: 600 15px/1.2 var(--cx-mono); white-space: nowrap; }
.cx-table a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }

/* ---- tables */
.cx-tablewrap { overflow-x: auto; margin: 4px 0 18px; border: 1px solid var(--cx-line); background: #fff; }
.cx-table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.cx-table caption { text-align: left; font-weight: 700; padding: 10px 12px; background: var(--cx-paper); }
.cx-table th, .cx-table td { text-align: left; vertical-align: top; padding: 6px 12px; border-top: 1px solid var(--cx-line); }
.cx-table thead th { background: #f0e9db; font-size: 14px; }
.cx-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- status chips */
.cx-st { display: inline-block; font-size: 13px; font-weight: 700; padding: 3px 8px; border: 1px solid; white-space: nowrap; }
.cx-st--one { color: #24502f; background: #e3efe1; border-color: #9cc2a0; }
.cx-st--two { color: #7d260a; background: #fde4d6; border-color: #eba585; }
.cx-st--none { color: #3a3a3a; background: #ece8e0; border-color: #a9a294; border-style: dashed; }
.cx-st--hidden { color: #46336e; background: #ebe5f5; border-color: #b5a6d6; }

/* ---- question drawer (signature) */
.cx-drawer { max-width: 1200px; margin: 0 auto 34px; background: var(--cx-card); border: 1px solid var(--cx-line); border-top: 4px solid var(--cx-rule); padding: 30px 32px 34px; }
.cx-drawer .cx-intro { max-width: 760px; }
.cx-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.cx-filters button { min-height: 44px; padding: 0 14px; font: 600 15px var(--cx-sans); background: #fff; color: var(--cx-ink); border: 1px solid var(--cx-ink-2); cursor: pointer; }
.cx-filters button[aria-pressed="true"] { background: var(--cx-ink); color: #fff; border-color: var(--cx-ink); }
.cx-find { display: flex; gap: 10px; align-items: center; margin: 6px 0 14px; flex-wrap: wrap; }
.cx-find label { font-weight: 600; }
.cx-find input { min-height: 46px; min-width: 0; flex: 1 1 260px; font-size: 16px; padding: 0 12px; border: 2px solid var(--cx-ink); }
.cx-count { font-size: 15px; color: var(--cx-ink-2); margin: 0 0 10px; }
.cx-qlist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cx-q { margin: 0; min-width: 0; background: #fff; border: 1px solid var(--cx-line); border-left: 4px solid var(--cx-rule); padding: 12px 14px; }
.cx-q[hidden] { display: none; }
.cx-q-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.cx-q-q { font-weight: 700; margin: 0 0 4px; }
.cx-q-stage { font-size: 13px; color: var(--cx-ink-2); }
.cx-q-a { margin: 6px 0 4px; font-size: 15.5px; }
.cx-q-ref { font-size: 14px; margin: 0; display: flex; flex-wrap: wrap; gap: 0 10px; align-items: center; }
.cx-q-ref a.cx-more { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- small lists of linked cards on the home page */
.cx-picks { list-style: none; padding: 0; margin: 0 0 12px; }
.cx-picks li { border-bottom: 1px dashed var(--cx-line); padding: 4px 0; margin: 0; }
.cx-picks a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- footer */
.cx-foot { background: var(--cx-dark); color: #f2eee6; margin-top: 50px; }
.cx-foot-in { max-width: 1200px; margin: 0 auto; padding: 34px 24px 40px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 36px; }
.cx-foot a { color: #ffd2b8; }
.cx-foot-name { font-family: var(--cx-serif); font-size: 20px; color: #fff; }
.cx-foot-links { list-style: none; padding: 0; margin: 0; }
.cx-foot-links a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 1180px) {
  .cx-bar { flex-wrap: wrap; justify-content: center; }
  .cx-nav ul { flex-wrap: wrap; justify-content: center; }
  .cx-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cx-row { grid-template-columns: minmax(0, 1fr); padding: 22px 18px 34px; gap: 18px; }
  .cx-row--flip .cx-text { order: 1; }
  .cx-row--flip .cx-fig { order: 2; }
  .cx-drawer { padding: 22px 18px; }
  .cx-qlist { grid-template-columns: minmax(0, 1fr); }
  .cx-foot-in { grid-template-columns: minmax(0, 1fr); }
  .cx-sec, .cx-drawer { margin-left: 10px; margin-right: 10px; }
}
@media (max-width: 520px) {
  body { font-size: 16.5px; }
  .cx-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-search-row { flex-direction: column; }
  .cx-col { padding: 0 16px; }
  .cx-brand span { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media (prefers-color-scheme: dark) {
  :root { --cx-ink: #f3ede2; --cx-ink-2: #cfc5b5; --cx-paper: #1b1814; --cx-card: #24201b; --cx-line: #4a4236; --cx-link: #ffb48a; }
  .cx-fig { background: #2c2721; }
  .cx-search input, .cx-find input, .cx-tablewrap, .cx-q, .cx-filters button { background: #15120f; color: var(--cx-ink); }
  .cx-search button { color: #1f1b16; }
  .cx-search button:hover { background: #f3ede2; color: #1f1b16; }
  .cx-table thead th, .cx-table caption { background: #2c2721; }
  .cx-filters button[aria-pressed="true"] { background: #f3ede2; color: #1f1b16; }
  .cx-st--one { color: #cfe8d2; background: #203626; }
  .cx-st--two { color: #ffd3bf; background: #4a2112; }
  .cx-st--none { color: #e6e1d8; background: #33302b; }
  .cx-st--hidden { color: #e0d6f6; background: #2f2742; }
}

/* October 15: a reading-room index, with compact commerce and separate question search. */
.hi-wrap{max-width:1160px;margin-inline:auto;padding-inline:24px}.hi-kicker{font:600 12px/1.5 var(--cx-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--cx-ink-2)}.hi-mast{max-width:1280px;margin:auto;text-align:center;padding:54px 24px 0}.hi-mast h1{font-size:clamp(38px,4.4vw,64px);font-weight:500;line-height:1.08;letter-spacing:-.035em}.hi-lede{font-size:19px;color:var(--cx-ink-2)}.hi-panorama{width:100%;margin:28px auto 0;border:1px solid var(--cx-line)}.hi-entry{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding-top:28px;padding-bottom:28px}.hi-entry .cx-search{padding:0;border:0;background:none;margin:8px 0 10px}.hi-entry p:last-child{font-size:14px;color:var(--cx-ink-2)}.hi-entry a{display:inline-flex;align-items:center;min-height:44px}.hi-entry .cx-search button{padding-inline:16px}.hi-heading{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:20px}.hi-heading h2{margin:0}.hi-heading>a,.hi-reading-head>a,.hi-basics a{min-height:44px;display:inline-flex;align-items:center}.hi-categories{padding-block:32px 46px;border-top:1px solid var(--cx-line)}.hi-mini{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.hi-mini .cx-tile{display:flex;flex-direction:row;align-items:center;border-top:1px solid var(--cx-line);gap:10px;padding:8px}.hi-mini .cx-tile img{width:66px;height:66px;object-fit:cover;flex-shrink:0}.hi-mini .cx-tile-lab{font-size:15px;padding:0}.hi-mini li{margin:0}.hi-more{display:flex;flex-wrap:wrap;gap:0 20px;margin:12px 0}.hi-more .cx-tile{border:0;display:inline-flex;min-height:44px;justify-content:center;background:none}.hi-more .cx-tile-lab{font-size:14px;font-weight:500;padding:0;text-decoration:underline}.hi-note{font-size:13px;color:var(--cx-ink-2)}.hi-reading{display:grid;grid-template-columns:1fr 1.8fr;gap:60px;padding-block:48px 58px;border-top:4px solid var(--cx-rule)}.hi-reading-head h2{font-size:36px}.hi-reading-head p{font-size:16px}.hi-reading ol{list-style:none;padding:0;margin:0}.hi-reading li{margin:0;border-top:1px solid var(--cx-line)}.hi-reading li:last-child{border-bottom:1px solid var(--cx-line)}.hi-reading li a{display:flex;gap:18px;padding:18px 0;text-decoration:none;color:var(--cx-ink)}.hi-reading li a:hover h3{text-decoration:underline}.hi-reading li span{font:600 14px var(--cx-mono);color:var(--cx-link);padding-top:4px}.hi-reading h3{font-size:22px;margin:0 0 5px}.hi-reading li p{font-size:15px;margin:0;color:var(--cx-ink-2)}.hi-reading li b{margin-left:auto}.hi-basics{background:var(--cx-card);border-block:1px solid var(--cx-line);padding:42px 0}.hi-basics>.hi-wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px}.hi-basics p{font-size:16px}.hi-footpaths{display:flex;flex-wrap:wrap;gap:0 24px;padding-block:20px}.hi-footpaths a{min-height:44px;display:inline-flex;align-items:center;font-size:14px}.cx-foot{margin-top:24px}.cx-sec::after{display:none}.cx-row{align-items:start}.cx-fig{align-self:start}.cx-col{max-width:860px}.cx-sec--wide>.cx-fig{max-width:1040px}.cx-pagehead{padding:30px 0}.cx-pagehead h1{font-size:clamp(34px,4vw,50px)}.cx-tablewrap{max-width:100%}.cx-table{min-width:550px}.cx-sec{border-top-width:2px}.hi-practical{margin-block:36px;padding-block:26px;border-left:4px solid var(--cx-rule);background:var(--cx-card)}.hi-practical p{max-width:85ch}.hi-practical>a{min-height:44px;display:inline-flex;align-items:center}.hi-full{display:flex;align-items:center;min-height:44px}.cx-fig figcaption>a{display:inline-flex;align-items:center;min-height:44px}.hi-guide-intro{padding-block:30px;border-top:3px solid var(--cx-rule)}.hi-guide-intro>a{min-height:44px;display:inline-flex;align-items:center}.hi-guide-intro nav ol{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;padding:20px 0;gap:8px}.hi-guide-intro nav a{display:flex;align-items:center;min-height:55px;padding:10px;border:1px solid var(--cx-line);text-decoration:none;font-size:14px;background:var(--cx-card)}.hi-guide-step{padding-top:32px;padding-bottom:40px;border-top:1px solid var(--cx-line)}.hi-guide-step header{display:flex;gap:24px;max-width:860px;margin:0 auto 24px}.hi-guide-step header>span{font:500 48px var(--cx-serif);color:var(--cx-link)}.hi-guide-step header a{min-height:44px;display:inline-flex;align-items:center}.hi-guide-fig{margin:20px 0;background:#fff;border:1px solid var(--cx-line)}.hi-guide-fig>a{display:flex;align-items:center;min-height:44px}.hi-guide-fig img{width:100%;height:auto}.hi-guide-fig figcaption{background:var(--cx-card);padding:14px 18px;font-size:15px}.hi-guide-fig figcaption a{display:inline-flex;align-items:center;min-height:44px}.hi-reset,.hi-menu{font:600 15px var(--cx-sans);min-height:44px;padding:8px 16px;background:var(--cx-card);color:var(--cx-ink);border:1px solid var(--cx-ink-2);cursor:pointer}.hi-reset{margin:0 0 12px}.hi-menu{display:none}.cx-brand span{white-space:normal}.cx-bar{gap:12px}.cx-nav a{padding-inline:8px;font-size:14px}.cx-search button{color:#1f1b16}.cx-search button:hover{color:var(--cx-paper)}
@media(max-width:1100px){.hi-mini{grid-template-columns:repeat(2,1fr)}.hi-reading{gap:30px}.cx-bar{justify-content:space-between}.hi-menu{display:block}.cx-nav{display:none;flex-basis:100%}.cx-nav.hi-open{display:block}.cx-nav ul{justify-content:flex-start}.cx-nav a{min-width:44px}.hi-entry .cx-search-row{flex-wrap:wrap}.hi-entry .cx-search input{flex-basis:200px}.hi-entry .cx-search button{flex-grow:1}.hi-guide-intro nav ol{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.hi-wrap{padding-inline:18px}.hi-mast{padding:34px 18px 0}.hi-mast h1{font-size:39px}.hi-lede{font-size:17px}.hi-panorama{margin-top:22px}.hi-entry{grid-template-columns:1fr;gap:22px}.hi-entry>div+div{border-top:1px solid var(--cx-line);padding-top:22px}.hi-entry .cx-search-row{flex-direction:row;flex-wrap:nowrap;gap:6px}.hi-entry .cx-search input{width:0;flex:1;font-size:16px;padding-inline:10px}.hi-entry .cx-search button{font-size:14px;padding-inline:10px;flex:0 auto}.hi-heading{display:block}.hi-mini{gap:8px}.hi-mini .cx-tile{gap:7px;padding:6px}.hi-mini .cx-tile img{width:48px;height:48px}.hi-mini .cx-tile-lab{font-size:13px}.hi-more{gap:0 15px}.hi-reading{grid-template-columns:1fr;gap:24px;padding-block:30px}.hi-reading-head h2{font-size:31px}.hi-reading-head h2 br{display:none}.hi-basics>.hi-wrap{grid-template-columns:1fr;gap:24px}.hi-guide-step header{gap:12px}.hi-guide-step header>span{font-size:34px}.hi-guide-step h2{font-size:27px}.hi-guide-intro nav a{font-size:13px}.hi-guide-fig figcaption{padding:12px;font-size:14px}.cx-brand img{width:76px;height:auto}.cx-brand span{font-size:14px;max-width:135px}.cx-bar{padding-inline:12px}.hi-menu{padding-inline:12px}.cx-foot-in{padding-inline:18px}}
@media(prefers-color-scheme:dark){.hi-panorama{opacity:.94}.hi-guide-fig{background:#fff}.cx-search button:hover{background:#f3ede2;color:#1f1b16}.cx-skip{color:#1f1b16}.hi-mini .cx-tile{background:var(--cx-card)}}

.cx-table{min-width:0;overflow-wrap:anywhere}.cx-table th,.cx-table td{min-width:95px}.cx-tablewrap{scrollbar-width:thin}@media(max-width:650px){.cx-table{min-width:500px}}