/* =========================================================================
   ROC STATEMENT — black Ray Gun / Carson editorial base.
   Adapted directly from the approved composition: tight overlapping lines,
   mixed fonts inline, multiply colour-blocks, hard scale jumps, rotated repeat.
   Scoped to .roc-paper so it never touches the dark WebGL surfaces.
   ========================================================================= */
.roc-paper{
  --paper:#090909; --ink:#f3efe7; --pink:#ff5aa9; --acid:#caff00; --rgred:#ff4a35; --rgblue:#1d4fff; --cyan:#18dbe6; --muted:#77736e;
  --st-sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --st-black:"Arial Black","Helvetica Neue",Arial,sans-serif;
  --st-cond:"Arial Narrow","Helvetica Neue Condensed",Impact,sans-serif;
  --st-serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --st-mono:"IBM Plex Mono","Courier New",monospace;
  background:radial-gradient(circle at 18% 2%,rgba(255,255,255,.055),transparent 22%),linear-gradient(180deg,#090909,#111)!important;color:var(--ink);
}
.roc-paper ::selection{color:#090909;background:var(--acid)}
.roc-paper .rd-page-standard{background:var(--paper)!important;color:var(--ink)!important;max-width:none!important;margin:0!important;padding:0!important}

/* film grain over the black */
.roc-paper::before,.roc-paper::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9998}
.roc-paper::before{opacity:.06;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}
.roc-paper::after{display:none}

/* nav/footer stay light on black */
.roc-paper .rd-links a span{color:var(--ink)!important}
.roc-paper .rd-links a i{color:var(--rgred)!important}
.roc-paper .rd-links a.on span{color:var(--rgred)!important}
.roc-paper .rd-links a.rd-nav-labs span{color:var(--rgblue)!important}
.roc-paper .rd-tag{color:rgba(242,238,230,.7)!important}

/* ---- the statement block ---- */
.roc-statement{position:relative;min-height:100vh;padding:clamp(40px,6vw,94px) clamp(18px,3.2vw,54px);overflow:hidden}
.st-grid{position:relative;min-height:760px;max-width:1500px;margin:auto}
.st-index{position:absolute;top:0;left:0;width:min(58vw,300px);font:700 clamp(11px,1vw,15px)/1.2 var(--st-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink)}
.st-index b{color:var(--rgred);font-weight:700}

.st-copy{position:absolute;z-index:4;top:11%;left:6%;width:min(86%,1300px);margin:0;
  font:700 clamp(32px,4.4vw,72px)/.72 var(--st-sans);letter-spacing:-.05em;color:var(--ink)}
.st-copy .quiet{font:italic 400 1.05em/.7 var(--st-serif);letter-spacing:-.05em}
.st-copy .wide{display:inline-block;font-family:var(--st-cond);font-weight:900;letter-spacing:.13em;transform:scaleX(1.22);transform-origin:left center}
.st-copy .block{display:inline;padding:0 .1em .05em;background:var(--pink);color:var(--paper);font-family:var(--st-black);font-weight:900;line-height:.7;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.st-copy .block-acid{background:var(--acid)}
.st-copy .block-blue{background:var(--rgblue);color:var(--paper);mix-blend-mode:normal}
.st-copy .inkblock{display:inline;padding:0 .09em .05em;color:var(--paper);background:var(--ink);font-family:var(--st-mono);font-size:.7em;letter-spacing:-.06em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.st-copy .drop{display:inline-block;margin-top:.1em;font:900 2.15em/.5 var(--st-black);letter-spacing:-.1em;transform:scaleX(.88);transform-origin:left center}
.st-copy .repeat{display:block;margin-left:20%;max-width:900px;color:var(--rgred);font:italic 900 1.25em/.6 var(--st-serif);letter-spacing:-.1em;transform:rotate(-1.3deg)}

/* second movement — the studio facts, broken column, editable body */
.st-body{position:relative;z-index:4;max-width:none;margin:clamp(60px,10vh,120px) 0 0;padding:0 clamp(18px,3.2vw,54px)}
.st-body-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,44px)}
.st-body .st-lead{grid-column:1 / span 7;font:900 clamp(30px,4.6vw,72px)/.9 var(--st-black);letter-spacing:-.04em;margin:0}
.st-body .st-lead em{font-family:var(--st-serif);font-style:italic;font-weight:900;color:var(--rgred)}
.st-body .st-text{grid-column:8 / span 5;font:400 clamp(14px,1.1vw,16px)/1.62 var(--st-mono);color:var(--ink);align-self:end}
.st-body .st-text p{margin:0 0 1.1em}
.st-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(22px,4vw,52px);margin:clamp(50px,8vh,110px) 0 0}
.st-cards h3{font:900 13px/1 var(--st-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--paper);background:var(--ink);display:inline-block;padding:5px 8px;margin:0 0 12px}
.st-cards p{margin:0;font:400 14px/1.55 var(--st-sans);color:var(--ink)}
.st-meta{margin:clamp(50px,8vh,110px) 0 0;padding:0 clamp(18px,3.2vw,54px) 40px;font:700 12px/1.6 var(--st-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.st-meta a{color:var(--rgblue);border-bottom:2px solid var(--rgblue)}
.st-clients{margin-top:8px;opacity:.9}

@media (max-width:900px){
  .st-grid{min-height:720px}
  .st-index{width:210px}
  .st-copy{top:14%;left:1%;width:98%;font-size:clamp(26px,7.4vw,52px);line-height:.76}
  .st-copy .drop{font-size:1.7em}
  .st-body .st-lead,.st-body .st-text{grid-column:1 / -1}
  .st-body .st-text{align-self:start}
}
@media (max-width:560px){
  .st-copy{top:16%;left:0;width:100%;font-size:8.2vw;line-height:.8}
  .st-copy .repeat{margin-left:6%;font-size:1.05em}
}

/* =========================================================================
   BLACK STATEMENT — carried across the whole editorial site.
   Everything below is scoped to .roc-paper; statement-system.css provides the final overrides.
   ========================================================================= */
.roc-paper .rd-archive,
.roc-paper .rd-doc,
.roc-paper .rd-page-standard{background:var(--paper)!important;color:var(--ink)!important}
.roc-paper a{color:var(--ink)}

/* ---- Section heroes (archive / news) ---- */
.roc-paper .rd-archive-hero{position:relative;max-width:1500px;margin:0 auto;padding:clamp(70px,12vh,150px) clamp(18px,3.2vw,54px) 30px}
.roc-paper .rd-eyebrow{font-family:var(--st-mono)!important;font-weight:700!important;font-size:clamp(11px,1vw,14px)!important;
  letter-spacing:.28em!important;text-transform:uppercase;color:var(--rgred)!important;transform:rotate(-2deg);display:inline-block;margin:0 0 14px!important}
.roc-paper .rd-archive-hero h1{font-family:var(--st-black)!important;font-weight:900!important;color:var(--ink)!important;
  font-size:clamp(58px,13vw,210px)!important;line-height:.78!important;letter-spacing:-.05em!important;margin:0}
.roc-paper .rd-archive-hero h1 em{font-family:var(--st-serif)!important;font-style:italic;color:var(--rgred)!important}

/* search field on paper */
.roc-paper .rd-archive-search{max-width:1500px;margin:26px auto 0;padding:0 clamp(18px,3.2vw,54px)}
.roc-paper .rd-archive-search label{font-family:var(--st-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--rgred)}
.roc-paper .rd-archive-search input{background:transparent!important;border:0;border-bottom:2px solid var(--ink);color:var(--ink)!important;caret-color:var(--acid);
  font-family:var(--st-serif)!important;font-style:italic;font-size:clamp(20px,2.4vw,34px);padding:8px 0;width:100%;outline:none;-webkit-text-fill-color:var(--ink)}
.roc-paper .rd-archive-search input::placeholder{color:rgba(10,10,10,.4)}

/* ---- Work index rows ---- */
.roc-paper .rd-work-index{max-width:1500px;margin:20px auto 0;padding:0 clamp(18px,3.2vw,54px)}
.roc-paper .rd-work-row{border-top:2px solid var(--ink)}
.roc-paper .rd-work-row:last-child{border-bottom:2px solid var(--ink)}
.roc-paper .rd-work-row a{display:grid;grid-template-columns:56px 1fr auto auto;align-items:baseline;gap:clamp(14px,3vw,40px);
  padding:clamp(16px,2.4vw,30px) 0;text-decoration:none;color:var(--ink)}
.roc-paper .rd-num{font-family:var(--st-mono);font-weight:700;font-size:13px;color:var(--rgred)}
.roc-paper .rd-title-row{font-family:var(--st-black)!important;font-weight:900;font-size:clamp(26px,4.4vw,64px);line-height:.9;letter-spacing:-.03em}
.roc-paper .rd-work-row:nth-child(even) .rd-title-row{font-family:var(--st-serif)!important;font-style:italic;font-weight:900}
.roc-paper .rd-meta-row{font-family:var(--st-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,10,10,.6);white-space:nowrap}
.roc-paper .rd-open{font-family:var(--st-mono);color:var(--rgblue)}
.roc-paper .rd-work-row a:hover .rd-title-row{background:var(--pink);color:var(--paper);box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 .06em}
.roc-paper .rd-work-row a:hover .rd-open{color:var(--rgred)}

/* ---- News index rows ---- */
.roc-paper .rd-news-index{max-width:1500px;margin:20px auto 0;padding:0 clamp(18px,3.2vw,54px)}
.roc-paper .rd-news-row{border-top:2px solid var(--ink)}
.roc-paper .rd-news-row:last-child{border-bottom:2px solid var(--ink)}
.roc-paper .rd-news-row a{display:grid;grid-template-columns:110px 1fr;gap:6px clamp(14px,3vw,40px);padding:clamp(16px,2.2vw,28px) 0;text-decoration:none;color:var(--ink)}
.roc-paper .rd-news-row span{font-family:var(--st-mono);font-size:12px;letter-spacing:.1em;color:var(--rgred)}
.roc-paper .rd-news-row strong{grid-column:2;font-family:var(--st-black)!important;font-weight:900;font-size:clamp(22px,3.4vw,46px);line-height:.96;letter-spacing:-.02em}
.roc-paper .rd-news-row em{grid-column:2;font-family:var(--st-serif);font-style:italic;color:rgba(10,10,10,.65);font-size:clamp(14px,1.4vw,18px)}
.roc-paper .rd-news-row a:hover strong{color:var(--rgred)}

/* pagination */
.roc-paper .page-numbers{display:inline-block;margin:30px 8px 0 0;font-family:var(--st-mono);font-size:13px;color:var(--ink);text-decoration:none}
.roc-paper .page-numbers.current{color:var(--paper);background:var(--ink);padding:2px 8px}
.roc-paper nav.rd-work-index + .page-numbers{margin-top:40px}

/* ---- Case study ---- */
.roc-paper .rd-doc-top a{font-family:var(--st-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--rgred)}
.roc-paper .rd-kicker{font-family:var(--st-mono)!important;font-weight:700;letter-spacing:.24em;color:var(--rgred)!important;transform:rotate(-2deg);display:inline-block}
.roc-paper .rd-hero-title{font-family:var(--st-black)!important;font-weight:900!important;font-size:clamp(44px,9vw,150px)!important;line-height:.82!important;letter-spacing:-.04em!important}
.roc-paper .rd-hero-deck{font-family:var(--st-serif)!important;font-style:italic;color:var(--ink)}
.roc-paper .rd-ledger{border-block:2px solid var(--ink);padding:16px 0}
.roc-paper .rd-l-k{font-family:var(--st-mono)!important;letter-spacing:.2em;text-transform:uppercase;color:var(--rgred)!important}
.roc-paper .rd-l-v{font-family:var(--st-sans)!important;color:var(--ink)!important}
.roc-paper .rd-doc-body{max-width:1200px;margin:0 auto;padding:0 clamp(18px,3.2vw,54px)}
.roc-paper .rd-lead{font-family:var(--st-serif)!important;font-style:italic!important;font-weight:900!important;
  font-size:clamp(26px,4vw,56px)!important;line-height:.98!important;color:var(--rgred)!important;max-width:20ch;margin:0 0 .6em}
.roc-paper .rd-prose{font-family:var(--st-sans)!important;color:var(--ink)!important;font-size:clamp(15px,1.15vw,18px);line-height:1.66;max-width:66ch}
.roc-paper .rd-prose h2,.roc-paper .rd-prose h3{font-family:var(--st-black)!important;letter-spacing:-.02em}
.roc-paper .rd-tags span{font-family:var(--st-mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  border:1.5px solid var(--ink);padding:5px 9px;display:inline-block;margin:0 6px 8px 0;transform:rotate(-1.5deg)}
.roc-paper .rd-tags span:nth-child(even){transform:rotate(2deg)}
.roc-paper .rd-pager{border-top:2px solid var(--ink);margin-top:60px;padding-top:24px}
.roc-paper .rd-p-l{font-family:var(--st-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--rgred)}
.roc-paper .rd-p-t{font-family:var(--st-black)!important;font-weight:900;letter-spacing:-.02em}
.roc-paper .rd-related .rd-eyebrow{color:var(--rgred)!important}
.roc-paper .rd-related-all{font-family:var(--st-mono);color:var(--rgblue);border-bottom:2px solid var(--rgblue)}

/* Elementor-built case bodies are their own (often dark) design — frame them so the
   transition from paper reads intentional rather than broken. */
.roc-paper .rd-doc-elementor{margin:30px 0}

/* ---- Contact form on paper ---- */
.roc-paper .rd-contact-form-shell{max-width:760px;margin:clamp(30px,6vh,70px) auto 0;padding:0 clamp(18px,3.2vw,54px)}
.roc-paper .rd-contact-form label{display:block;margin:0 0 22px;font-family:var(--st-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--rgred)}
.roc-paper .rd-contact-form input,.roc-paper .rd-contact-form textarea{display:block;width:100%;margin-top:8px;background:transparent;border:0;border-bottom:2px solid var(--ink);
  color:var(--ink);font-family:var(--st-serif);font-size:clamp(16px,1.6vw,22px);padding:8px 0;outline:none}
.roc-paper .rd-contact-form input:focus,.roc-paper .rd-contact-form textarea:focus{border-color:var(--rgred)}
.roc-paper .rd-contact-form button{margin-top:14px;background:var(--pink);color:var(--ink);border:0;font-family:var(--st-black);font-weight:900;
  font-size:clamp(20px,2.4vw,34px);padding:12px 22px;cursor:pointer;transform:scaleX(.94);transform-origin:left}
.roc-paper .rd-contact-form button:hover{background:var(--acid)}
.roc-paper .rd-empty{font-family:var(--st-mono);color:rgba(10,10,10,.6);padding:0 clamp(18px,3.2vw,54px)}

/* Contact / standard content on paper */
.roc-paper .rd-standard-content{max-width:1500px;margin:clamp(24px,4vh,50px) auto 0;padding:0 clamp(18px,3.2vw,54px);
  font-family:var(--st-sans);color:var(--ink);font-size:clamp(15px,1.15vw,18px);line-height:1.6}
.roc-paper .rd-contact-intro{font-family:var(--st-serif)!important;font-style:italic;font-weight:900;
  font-size:clamp(24px,3.4vw,48px)!important;line-height:1.02;max-width:22ch;color:var(--ink)}

/* ---- Chromatic aberration (replaces the old glitch); more colour on hover ---- */
@keyframes rgAberrate{
  0%,100%{text-shadow:-3px 0 rgba(255,0,140,.7), 3px 0 rgba(0,240,255,.7)}
  25%{text-shadow:-5px 1px rgba(255,0,140,.85), 4px -1px rgba(0,240,255,.85), 2px 2px rgba(202,255,0,.5)}
  50%{text-shadow:2px 0 rgba(255,0,140,.65), -4px 0 rgba(0,240,255,.65), -2px 1px rgba(61,123,255,.5)}
  75%{text-shadow:-4px -1px rgba(255,0,140,.85), 5px 1px rgba(0,240,255,.85)}
}
.roc-paper .rd-news-row a:hover strong,
.roc-paper .rd-related-card:hover .rd-rc-title,
.roc-paper .rd-pager a:hover .rd-p-t,
.roc-paper .rd-archive-hero h1:hover{animation:rgAberrate 2.4s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.roc-paper [class]{animation:none!important}}

/* =========================================================================
   REFERENCE PRIMITIVES (from roc-statement-system) — reusable word treatments
   ========================================================================= */
.roc-paper .word-block{display:inline;padding:0 .1em .05em;color:#090909;background:var(--pink);font-family:var(--st-black);font-weight:900;line-height:.68;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.roc-paper .word-paper{display:inline;padding:0 .09em .05em;color:#090909;background:var(--ink);font-family:var(--st-mono);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.roc-paper .word-acid{display:inline;padding:0 .08em .04em;color:#090909;background:var(--acid);font-weight:900;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.roc-paper .serif{font-family:var(--st-serif);font-style:italic;font-weight:900}
.roc-paper .wide{display:inline-block;font-family:var(--st-cond);font-weight:900;letter-spacing:.13em;transform:scaleX(1.22);transform-origin:left center}
.roc-paper .outline{color:transparent;-webkit-text-stroke:1.2px var(--ink)}
.roc-paper .hot{color:var(--rgred)}.roc-paper .pink{color:var(--pink)}.roc-paper .acid{color:var(--acid)}.roc-paper .blue{color:var(--rgblue)}

/* ---- Statement headline block for Work / News heroes ---- */
.roc-paper .rd-statement{position:relative;z-index:4;max-width:min(94%,1360px);margin:clamp(50px,9vh,110px) 0 clamp(30px,6vh,60px);
  font:700 clamp(30px,4vw,64px)/.7 var(--st-sans);letter-spacing:-.065em;color:var(--ink)}
.roc-paper .rs-head{display:block;margin-bottom:.06em;font:900 2.2em/.44 var(--st-black);letter-spacing:-.1em;transform:scaleX(.84);transform-origin:left center}
.roc-paper .rs-head .serif{font-size:.96em}
.roc-paper .rs-line2{display:block;margin-left:11%}
.roc-paper .rd-statement .word-acid,.roc-paper .rd-statement .word-block{line-height:.9}

/* =========================================================================
   WORK INDEX — a scattered "field" of varied treatments, not a tidy list.
   ========================================================================= */
.roc-paper .rd-work-index{max-width:1500px;margin:10px auto 0;padding:0 clamp(18px,3.2vw,54px)}
.roc-paper .rd-work-row{border-top:1px solid rgba(243,239,231,.16)}
.roc-paper .rd-work-row:last-child{border-bottom:1px solid rgba(243,239,231,.16)}
.roc-paper .rd-work-row a{display:grid;grid-template-columns:60px 1fr auto;grid-template-rows:auto auto;
  column-gap:clamp(16px,3vw,40px);align-items:start;padding:clamp(20px,3vw,44px) 0;text-decoration:none;color:var(--ink)}
.roc-paper .rd-num{grid-column:1;grid-row:1;font-family:var(--st-mono);font-weight:900;font-size:13px;color:var(--rgred);letter-spacing:.1em;padding-top:.4em}
.roc-paper .rd-open{grid-column:3;grid-row:1/3;align-self:center;font-family:var(--st-mono);color:var(--rgblue);font-size:20px}
.roc-paper .rd-title-row{grid-column:2;grid-row:1;letter-spacing:-.05em;line-height:.82;font-family:var(--st-black);font-weight:900;
  font-size:clamp(30px,5.6vw,88px);color:var(--ink);transition:transform .18s ease}
/* client / year mono, directly beneath the title */
.roc-paper .rd-meta-row{grid-column:2;grid-row:2;margin-top:.5em;font-family:var(--st-mono)!important;font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* cycle four Ray Gun treatments down the field */
.roc-paper .rd-work-row:nth-child(4n+2) .rd-title-row{font-family:var(--st-serif);font-style:italic;color:var(--acid);transform:rotate(-1deg)}
.roc-paper .rd-work-row:nth-child(4n+3) .rd-title-row{font-family:var(--st-cond);letter-spacing:.04em;color:#090909;background:var(--pink);padding:.02em .12em .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone;transform:scaleX(1.06);transform-origin:left}
.roc-paper .rd-work-row:nth-child(4n) .rd-title-row{color:transparent;-webkit-text-stroke:1.2px var(--ink)}
/* chromatic-aberration on hover */
.roc-paper .rd-work-row a:hover .rd-title-row{animation:rgAberrate 2.2s ease-in-out infinite;transform:translateX(6px)}
.roc-paper .rd-work-row:nth-child(4n+3) a:hover .rd-title-row{transform:scaleX(1.06) translateX(6px)}
.roc-paper .rd-work-row a:hover .rd-open{color:var(--acid)}

/* =========================================================================
   NEWS INDEX — same field energy
   ========================================================================= */
.roc-paper .rd-news-index{max-width:1500px;margin:10px auto 0;padding:0 clamp(18px,3.2vw,54px)}
.roc-paper .rd-news-row{border-top:1px solid rgba(243,239,231,.16)}
.roc-paper .rd-news-row:last-child{border-bottom:1px solid rgba(243,239,231,.16)}
.roc-paper .rd-news-row a{display:grid;grid-template-columns:1fr;gap:6px;padding:clamp(18px,2.6vw,36px) 0;text-decoration:none;color:var(--ink)}
.roc-paper .rd-news-row span{font-family:var(--st-mono);font-weight:900;font-size:11px;letter-spacing:.13em;color:var(--rgred)}
.roc-paper .rd-news-row strong{font-family:var(--st-black);font-weight:900;font-size:clamp(26px,4.4vw,68px);line-height:.78;letter-spacing:-.05em}
.roc-paper .rd-news-row:nth-child(3n+2) strong{font-family:var(--st-serif);font-style:italic;color:var(--acid);transform:rotate(-.8deg);display:inline-block}
.roc-paper .rd-news-row:nth-child(3n) strong{color:transparent;-webkit-text-stroke:1.2px var(--ink)}
.roc-paper .rd-news-row em{font-family:var(--st-serif);font-style:italic;color:var(--muted);font-size:clamp(14px,1.4vw,18px);max-width:60ch}
.roc-paper .rd-news-row a:hover strong{animation:rgAberrate 2.2s ease-in-out infinite}
