/* tripledoubleleague — spiral notebook stationery system */
:root{
  --paper:#FFFDF5;
  --sheet:#FFFFFF;
  --rule:#BFD7F2;
  --rule-strong:#9DBFE6;
  --margin:#E5484D;
  --tomato:#E4572E;
  --tomato-deep:#C2401C;
  --cobalt:#2457D6;
  --grass:#2FA05A;
  --grass-deep:#1E7A42;
  --sun:#FFC933;
  --ink:#1F2430;
  --ink-soft:#4A5162;
  --navy:#14213D;
  --wire:#A7AFBA;
  --wire-hi:#E3E7EC;

  --pitch:26px;
  --line:32px;
  --gutter:64px;
  --page-max:1220px;
  --side:clamp(16px,3.6vw,40px);

  --slab:"Rokkitt",Rockwell,"Roboto Slab",Georgia,serif;
  --body:"Mukta","Segoe UI",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--body);overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--slab);font-weight:700;line-height:1.08;margin:0;letter-spacing:-.005em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:3px}

.rb-skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:6px;font-weight:500;text-decoration:none}
.rb-skip:focus{top:12px}
.rb-wrap{width:100%;max-width:var(--page-max);margin-inline:auto;padding-inline:var(--side)}
.rb-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- reusable paper + binding ---------- */
.rb-ruled{
  background-color:var(--paper);
  background-image:
    linear-gradient(90deg,transparent calc(var(--gutter) - 1px),var(--margin) calc(var(--gutter) - 1px),var(--margin) calc(var(--gutter) + 1px),transparent calc(var(--gutter) + 1px)),
    repeating-linear-gradient(180deg,transparent 0 calc(var(--line) - 1px),var(--rule) calc(var(--line) - 1px) var(--line));
}
/* ring column: holes (radial gradient) on top, wire loops (rounded bars) beneath */
.rb-rings{
  position:absolute;top:18px;bottom:18px;left:-12px;width:40px;pointer-events:none;
  background:
    radial-gradient(circle at 30px 13px,var(--navy) 0 4.6px,rgba(20,33,61,.35) 5px,transparent 5.8px) 0 0/40px var(--pitch) repeat-y,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='26'%3E%3Crect x='1' y='9.5' width='30' height='7' rx='3.5' fill='%23A7AFBA'/%3E%3Crect x='4' y='10.6' width='22' height='2' rx='1' fill='%23E3E7EC'/%3E%3C/svg%3E") 0 0/40px var(--pitch) repeat-y;
}
.rb-rings--h{
  top:-12px;left:18px;right:18px;bottom:auto;width:auto;height:40px;
  background:
    radial-gradient(circle at 13px 30px,var(--navy) 0 4.6px,rgba(20,33,61,.35) 5px,transparent 5.8px) 0 0/var(--pitch) 40px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='40'%3E%3Crect x='9.5' y='1' width='7' height='30' rx='3.5' fill='%23A7AFBA'/%3E%3Crect x='10.6' y='4' width='2' height='22' rx='1' fill='%23E3E7EC'/%3E%3C/svg%3E") 0 0/var(--pitch) 40px repeat-x;
}

/* ---------- header ---------- */
.rb-top{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--rule)}
.rb-top__in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.rb-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font:700 clamp(1.05rem,2.8vw,1.5rem)/1 var(--slab);letter-spacing:-.02em;color:var(--ink)}
.rb-brand svg{width:34px;height:34px;flex:none}
.rb-nav ul{display:flex;gap:clamp(14px,2.4vw,34px)}
.rb-nav a{display:inline-block;padding:10px 2px 14px;text-decoration:none;font:500 1.0625rem/1 var(--body);color:var(--ink);background-repeat:repeat-x;background-position:0 100%;background-size:0 0}
.rb-nav a:hover{background-image:var(--wave);background-size:20px 8px;opacity:.85}
.rb-nav a[aria-current="page"]{background-image:var(--wave);background-size:20px 8px}
.rb-nav a.k-art{--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='8'%3E%3Cpath d='M0 4 Q5 0 10 4 T20 4' fill='none' stroke='%23E4572E' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.rb-nav a.k-capsule{--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='8'%3E%3Cpath d='M0 4 Q5 0 10 4 T20 4' fill='none' stroke='%232457D6' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.rb-nav a.k-casino{--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='8'%3E%3Cpath d='M0 4 Q5 0 10 4 T20 4' fill='none' stroke='%232FA05A' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.rb-nav a.k-ice{--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='8'%3E%3Cpath d='M0 4 Q5 0 10 4 T20 4' fill='none' stroke='%23E0A800' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.rb-menu{display:none;align-items:center;gap:10px;background:none;border:1.5px solid var(--ink);border-radius:8px;padding:9px 14px;font:500 1rem/1 var(--body);color:var(--ink);cursor:pointer}
.rb-menu__bars{position:relative;width:18px;height:12px}
.rb-menu__bars::before,.rb-menu__bars::after,.rb-menu__bars span{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s}
.rb-menu__bars::before{top:0}.rb-menu__bars span{top:5px}.rb-menu__bars::after{top:10px}
.rb-menu[aria-expanded="true"] .rb-menu__bars::before{transform:translateY(5px) rotate(45deg)}
.rb-menu[aria-expanded="true"] .rb-menu__bars span{opacity:0}
.rb-menu[aria-expanded="true"] .rb-menu__bars::after{transform:translateY(-5px) rotate(-45deg)}

/* ---------- home hero ---------- */
.rb-hero{position:relative;padding:calc(var(--line)*2) 0 calc(var(--line)*3)}
.rb-hero__text{padding-left:calc(var(--gutter) + 28px);max-width:62rem}
.rb-eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 .9375rem/var(--line) var(--body);color:var(--ink-soft);height:var(--line)}
.rb-eyebrow::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--margin)}
.rb-hero h1{font-size:clamp(2.9rem,7.4vw,6.1rem);line-height:calc(var(--line)*3);font-weight:700;letter-spacing:-.02em;margin-top:var(--line);transform:translateY(14px)}
.rb-hero__stand{font-size:clamp(1.125rem,1.7vw,1.375rem);line-height:var(--line);margin-top:var(--line);color:var(--ink);transform:translateY(7px)}
.rb-hero__media{margin:calc(var(--line)*2) 0 0 calc(var(--gutter) + 28px)}

/* taped photo */
.rb-photo{position:relative;padding:12px;background:var(--sheet);border:1px solid var(--rule-strong)}
.rb-photo__slot{aspect-ratio:1/1;overflow:hidden;background:var(--paper);max-width:720px}
.rb-photo__slot img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.rb-tape{position:absolute;top:-13px;width:112px;height:28px;background:rgba(255,201,51,.62);border-left:1px dashed rgba(31,36,48,.18);border-right:1px dashed rgba(31,36,48,.18)}
.rb-tape--l{left:-22px}.rb-tape--r{right:-22px}
.rb-photo--cobalt .rb-tape{background:rgba(36,87,214,.28)}
.rb-photo--grass .rb-tape{background:rgba(47,160,90,.34)}

/* ---------- notebook covers ---------- */
.rb-shelf{padding:calc(var(--line)*2.5) 0 calc(var(--line)*3)}
.rb-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);align-items:end;gap:20px 48px;margin-bottom:56px}
.rb-head h2{font-size:clamp(2rem,3.6vw,3rem)}
.rb-head p{color:var(--ink-soft)}
.rb-covers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px;align-items:end;padding-bottom:22px;border-bottom:3px solid var(--ink)}
.rb-cover{
  --lift:0px;
  position:relative;display:flex;flex-direction:column;
  min-height:calc(29rem + var(--lift));
  padding:26px 52px 26px 40px;
  background:var(--cd);color:var(--ct);
  border-radius:6px 14px 14px 6px;
  box-shadow:inset 0 0 0 1px rgba(20,33,61,.12);
}
.rb-cover:nth-child(2){--lift:24px}.rb-cover:nth-child(3){--lift:48px}.rb-cover:nth-child(4){--lift:24px}
.rb-cover::after{content:"";position:absolute;top:0;bottom:0;right:20px;width:12px;background:var(--band);border-left:1px solid rgba(0,0,0,.12);border-right:1px solid rgba(0,0,0,.12)}
.rb-plate{background:var(--sheet);color:var(--ink);border-radius:6px;padding:14px 16px 16px;margin-top:18px;box-shadow:inset 0 0 0 4px var(--sheet),inset 0 0 0 5px var(--rule)}
.rb-plate__no{display:flex;align-items:center;gap:8px;font:600 .875rem/1 var(--slab);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.rb-plate__no b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--c);color:var(--cn);font:700 1.0625rem/1 var(--slab);letter-spacing:0}
.rb-plate h3,.rb-plate h1{font-size:clamp(1.6rem,2.2vw,2rem);margin-top:10px}
.rb-cover__desc{margin-top:22px;font-size:1rem;line-height:1.6}
.rb-cover__count{margin-top:16px;font:600 .9375rem/1 var(--slab);letter-spacing:.08em;text-transform:uppercase}
.rb-cover__go{margin-top:auto;padding-top:22px;font-weight:500;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.rb-cover__go:hover{text-decoration-thickness:3px}
.rb-cover__go::before{content:"";position:absolute;inset:0;border-radius:inherit}

/* colour keys */
.k-art{--c:var(--tomato);--cd:var(--tomato-deep);--ct:#FFFFFF;--cn:#FFFFFF;--band:#7E2610}
.k-capsule{--c:var(--cobalt);--cd:var(--cobalt);--ct:#FFFFFF;--cn:#FFFFFF;--band:#122F80}
.k-casino{--c:var(--grass);--cd:var(--grass-deep);--ct:#FFFFFF;--cn:#FFFFFF;--band:#0F4627}
.k-ice{--c:var(--sun);--cd:var(--sun);--ct:var(--ink);--cn:var(--ink);--band:#1F2430}
.k-art .rb-plate__no b,.k-casino .rb-plate__no b{background:var(--cd)}

/* ---------- how the index works ---------- */
.rb-method{padding:calc(var(--line)*2) 0 calc(var(--line)*4);border-top:1px solid var(--rule)}
.rb-method__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;margin-top:64px}
.rb-leaf{
  --gutter:40px;
  position:relative;padding:calc(var(--line)*1) 24px var(--line) calc(var(--gutter) + 18px);
  border:1px solid var(--rule-strong);border-radius:4px 4px 10px 4px;
  font-size:1.0625rem;line-height:var(--line);
}
.rb-leaf__flag{position:absolute;top:-30px;left:calc(var(--gutter) + 18px);height:30px;padding:0 14px;display:flex;align-items:center;border-radius:6px 6px 0 0;background:var(--cd);color:var(--ct);font:700 .9375rem/1 var(--slab);letter-spacing:.06em;text-transform:uppercase}
.rb-leaf h3{font-size:1.5rem;line-height:var(--line);transform:translateY(6px)}
.rb-leaf p{margin-top:var(--line);transform:translateY(7px)}

/* ---------- category / info band ---------- */
.rb-band{position:relative;background:var(--cd);color:var(--ct);padding:44px 0 48px}
.rb-band .rb-rings{left:0;top:14px;bottom:14px}
.rb-band__in{display:grid;grid-template-columns:minmax(0,25rem) minmax(0,1fr);align-items:center;gap:28px 56px;padding-left:calc(var(--side) + 40px)}
.rb-band .rb-plate{margin-top:0}
.rb-band .rb-plate h1{font-size:clamp(2.1rem,4vw,3rem)}
.rb-band__lede{font-size:clamp(1.125rem,1.8vw,1.375rem);line-height:1.5;max-width:34rem}
.rb-band--slim{padding:26px 0 28px}
.rb-band--slim .rb-band__in{grid-template-columns:auto minmax(0,1fr)}
.rb-band--slim .rb-plate{padding:10px 18px 12px}
.rb-band--slim .rb-plate h1{font-size:clamp(1.8rem,3vw,2.4rem);margin-top:0}

/* ---------- notebook page (sheet with rings) ---------- */
.rb-page{padding:56px 0 88px}
.rb-sheet{position:relative;border:1px solid var(--rule-strong);border-radius:4px 10px 10px 4px;padding:var(--line) 0 calc(var(--line)*2)}
.rb-sheet .rb-rings{left:-14px}
.rb-sheet__head{padding:0 32px 0 calc(var(--gutter) + 26px);display:flex;flex-wrap:wrap;gap:4px 24px;align-items:baseline;justify-content:space-between;font-size:1rem;line-height:var(--line);color:var(--ink-soft)}
.rb-sheet__head strong{font:700 1.25rem/var(--line) var(--slab);color:var(--ink)}
.rb-photo-wrap{padding:var(--line) 32px 0 calc(var(--gutter) + 26px)}

/* entries */
.rb-entries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--line)}
.rb-entry{position:relative;padding:var(--line) 28px var(--line) calc(var(--gutter) + 26px);border-bottom:2px dotted var(--rule-strong)}
.rb-entry:nth-child(even){padding-left:96px;border-left:2px dotted var(--rule-strong)}
.rb-entries--solo{grid-template-columns:minmax(0,1fr)}
.rb-entries--solo .rb-entry{max-width:52rem}
.rb-label{position:absolute;top:calc(var(--line) + 14px);left:8px;width:48px;height:30px;display:grid;place-items:center;background:var(--cd);color:var(--ct);font:700 1rem/1 var(--slab);letter-spacing:.04em;border-left:1px dashed rgba(255,255,255,.45);border-right:1px dashed rgba(255,255,255,.45)}
.k-ice .rb-label{border-color:rgba(31,36,48,.3)}
.rb-entry:nth-child(even) .rb-label{left:28px}
.rb-paper{background:var(--paper);padding:14px 18px 18px;border-radius:4px;box-shadow:0 0 0 1px rgba(157,191,230,.55)}
.rb-entry h2{font-size:clamp(1.6rem,2.4vw,2.05rem)}
.rb-loc{display:flex;align-items:center;gap:8px;margin-top:6px;font-weight:500;color:var(--ink-soft)}
.rb-loc::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--cd)}
.rb-paper p:not(.rb-loc){margin-top:14px}
.rb-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.rb-tags li{border:1.5px solid var(--cd);border-radius:999px;padding:3px 12px 2px;font-size:.875rem;font-weight:500;line-height:1.5;color:var(--ink);background:var(--sheet)}

/* prose (about / legal) */
.rb-prose{max-width:44rem;margin-left:calc(var(--gutter) + 26px);margin-right:24px;margin-top:var(--line);background:var(--paper);padding:26px 30px 30px;border-radius:4px;box-shadow:0 0 0 1px rgba(157,191,230,.55)}
.rb-prose h2{font-size:1.625rem;margin-top:34px}
.rb-prose h2:first-child{margin-top:0}
.rb-prose p,.rb-prose ul{margin-top:12px}
.rb-prose ul{padding-left:1.2em;list-style:disc}
.rb-prose li+li{margin-top:6px}
.rb-prose a{color:var(--cobalt);text-underline-offset:3px}
.rb-prose .rb-mail{display:inline-block;margin-top:8px;font:700 1.375rem/1.3 var(--slab);color:var(--ink);text-decoration-color:var(--cobalt);text-decoration-thickness:2px;word-break:break-word}
.rb-updated{margin-top:28px;font-size:.9375rem;color:var(--ink-soft)}

/* ---------- footer ---------- */
.rb-foot{position:relative;background:var(--navy);color:var(--paper);margin-top:30px;padding:72px 0 30px}
.rb-foot .rb-rings--h{top:-14px}
.rb-foot__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:40px}
.rb-foot__name{display:flex;align-items:center;gap:12px;font:700 clamp(1.05rem,2.8vw,1.5rem)/1 var(--slab);letter-spacing:-.02em}
.rb-foot__name svg{width:32px;height:32px;flex:none}
.rb-foot p{margin-top:14px;max-width:26rem;color:#D9DEE8}
.rb-foot h2{font:600 .9375rem/1 var(--slab);letter-spacing:.14em;text-transform:uppercase;color:var(--sun)}
.rb-foot ul{margin-top:16px;display:grid;gap:10px}
.rb-foot a{text-decoration:none;color:var(--paper)}
.rb-foot a:hover{text-decoration:underline;text-underline-offset:4px}
.rb-foot__end{margin-top:52px;padding-top:20px;border-top:1px solid rgba(255,253,245,.18);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:.9375rem;color:#C9CFDB}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .rb-covers{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 28px}
  .rb-cover:nth-child(3){--lift:0px}
  .rb-method__grid{grid-template-columns:minmax(0,1fr);gap:58px;max-width:40rem}
  .rb-band__in{grid-template-columns:minmax(0,1fr)}
  .rb-entries{grid-template-columns:minmax(0,1fr)}
  .rb-entry:nth-child(even){padding-left:calc(var(--gutter) + 26px);border-left:0}
  .rb-entry:nth-child(even) .rb-label{left:8px}
}
@media (max-width:820px){
  .rb-menu{display:inline-flex}
  .rb-nav{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--rule);display:none}
  .rb-nav.is-open{display:block}
  .rb-nav ul{flex-direction:column;gap:0;padding:6px var(--side) 16px}
  .rb-nav li+li{border-top:1px solid var(--rule)}
  .rb-nav a{display:inline-block;padding:14px 2px 16px;font-size:1.125rem}
  .rb-head{grid-template-columns:minmax(0,1fr)}
  .rb-foot__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rb-foot__about{grid-column:1/-1}
}
@media (max-width:640px){
  :root{--pitch:18px;--gutter:40px}
  .rb-rings{width:28px;left:-8px;background-size:28px var(--pitch),28px var(--pitch);
    background-image:
      radial-gradient(circle at 21px 9px,var(--navy) 0 3.4px,rgba(20,33,61,.35) 3.8px,transparent 4.4px),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='18'%3E%3Crect x='1' y='6.5' width='21' height='5' rx='2.5' fill='%23A7AFBA'/%3E%3Crect x='3' y='7.3' width='15' height='1.5' rx='.75' fill='%23E3E7EC'/%3E%3C/svg%3E")}
  .rb-rings--h{width:auto;height:28px;left:12px;right:12px;top:-10px;background-size:var(--pitch) 28px,var(--pitch) 28px;
    background-image:
      radial-gradient(circle at 9px 21px,var(--navy) 0 3.4px,rgba(20,33,61,.35) 3.8px,transparent 4.4px),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='28'%3E%3Crect x='6.5' y='1' width='5' height='21' rx='2.5' fill='%23A7AFBA'/%3E%3Crect x='7.3' y='3' width='1.5' height='15' rx='.75' fill='%23E3E7EC'/%3E%3C/svg%3E")}
  .rb-foot .rb-rings--h{top:-10px}
  .rb-top__in{min-height:66px}
  .rb-brand{font-size:1.05rem}
  .rb-hero__text{padding-left:calc(var(--gutter) + 14px)}
  .rb-hero h1{line-height:calc(var(--line)*2);transform:translateY(9px)}
  .rb-hero__media{margin-left:0}
  .rb-tape{width:76px;height:24px;top:-11px}
  .rb-tape--l{left:-8px}.rb-tape--r{right:-8px}
  .rb-covers{grid-template-columns:minmax(0,1fr);gap:26px;border-bottom:0;padding-bottom:0}
  .rb-cover{--lift:0px!important;min-height:0;padding:22px 48px 24px 34px}
  .rb-cover::after{right:16px;width:10px}
  .rb-leaf{padding-left:calc(var(--gutter) + 14px);padding-right:18px}
  .rb-leaf__flag{left:calc(var(--gutter) + 14px)}
  .rb-band__in{padding-left:calc(var(--side) + 22px)}
  .rb-band--slim .rb-band__in{grid-template-columns:minmax(0,1fr)}
  .rb-page{padding:40px 0 64px}
  .rb-sheet .rb-rings{left:-9px}
  .rb-sheet__head,.rb-photo-wrap{padding-left:calc(var(--gutter) + 14px);padding-right:14px}
  .rb-entry,.rb-entry:nth-child(even){padding:calc(var(--line) + 38px) 12px var(--line) calc(var(--gutter) + 12px)}
  .rb-label,.rb-entry:nth-child(even) .rb-label{top:var(--line);left:calc(var(--gutter) + 12px)}
  .rb-paper{padding:12px 14px 16px}
  .rb-prose{margin-left:calc(var(--gutter) + 12px);margin-right:12px;padding:20px 18px 24px}
  .rb-foot__grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}