/* BARRY STUDIOS | Beyond the Frame — isolated experimental editorial pages.
   Nothing here styles or changes the existing homepage. */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');
:root{--ink:#1B1B19;--paper:#F4F3EF;--muted:#A6A59D;--lime:#DBF38C;--purple:#7263A5;--line:#47443D;--body:'Inter',system-ui,sans-serif;--display:'Bebas Neue','Roboto Condensed',Impact,'Arial Narrow',sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;}
*{box-sizing:border-box}html{background:var(--ink);scroll-behavior:smooth}body{margin:0;color:var(--paper);background:var(--ink);font-family:var(--body);font-size:16px}a{color:inherit}a:hover{color:var(--lime)}.wrap{max-width:1300px;margin:auto;padding:0 clamp(22px,5vw,72px)}.masthead{display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line);min-height:90px}.wordmark{font-family:var(--display);font-size:29px;letter-spacing:.04em;text-decoration:none}.masthead nav{display:flex;gap:27px;align-items:center}.masthead nav a{font:500 11px var(--mono);text-decoration:none;text-transform:uppercase;letter-spacing:.05em}.masthead nav a.active{color:var(--lime)}.eyebrow{font:500 11px/1.5 var(--mono);color:var(--lime);letter-spacing:.12em;text-transform:uppercase}.lead-hero{padding:76px 0 58px;border-bottom:1px solid var(--line)}.lead-hero h1{font:normal clamp(72px,11vw,150px)/.88 var(--display);letter-spacing:.012em;margin:20px 0 22px}.lead-hero h1 span{color:var(--lime)}.lead-hero .dek{color:var(--muted);max-width:680px;font-size:clamp(17px,2vw,22px);line-height:1.56;margin:0}.sectiontop{display:flex;justify-content:space-between;gap:16px;align-items:baseline;margin:55px 0 22px}.sectiontop h2{font:normal clamp(32px,4vw,49px)/1 var(--display);margin:0}.line{border-top:1px solid var(--line)}.feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:0;padding-bottom:45px}.feature .maincol{padding-right:clamp(22px,4vw,68px)}.feature .sidecol{border-left:1px solid var(--purple);padding-left:clamp(18px,3vw,36px)}.text-intro{font-size:clamp(16px,1.6vw,20px);line-height:1.7;max-width:750px;color:var(--paper);margin:0 0 30px}.visual{width:100%;background:linear-gradient(145deg,#35342E,#181916 58%,#34312D);border:1px solid #46443B;display:flex;align-items:stretch;justify-content:stretch;position:relative;overflow:hidden}.visual:before{content:'';position:absolute;inset:-16% 34% -30% -8%;border:1px solid #555146;border-radius:50%;transform:rotate(-22deg)}.visual:after{content:'';position:absolute;inset:14% -45% -15% 65%;border:1px solid #555146;border-radius:50%;transform:rotate(-22deg)}.visual-big{aspect-ratio:4/3}.visual-small{aspect-ratio:5/4}.visual .indicator{position:absolute;bottom:22px;left:22px;font:500 10px/1.6 var(--mono);color:var(--paper);letter-spacing:.1em}.figlabel{font:500 10px/1.55 var(--mono);letter-spacing:.08em;color:var(--lime);text-transform:uppercase;margin:12px 0}.feature h3{font:normal clamp(30px,3vw,45px)/1.05 var(--display);margin:18px 0}.subtext{color:var(--muted);font:400 15px/1.7 var(--body);margin:0 0 25px}.aside-rule{height:3px;background:var(--paper);width:100%;margin-bottom:25px}.aside-title{font:normal 29px/1.05 var(--display);margin:0 0 24px}.caption-data{font:400 12px/1.65 var(--mono);color:var(--muted)}.meta{font:500 10px var(--mono);letter-spacing:.1em;color:var(--muted)}.btn-link{display:inline-block;text-decoration:none;font:500 11px var(--mono);letter-spacing:.07em;text-transform:uppercase;padding:14px 18px;border:1px solid var(--line);color:var(--paper);margin-top:18px}.btn-link:hover{border-color:var(--lime)}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0 85px}.card{border-top:1px solid var(--line);padding-top:16px;text-decoration:none}.card strong{display:block;font:normal 30px/1.05 var(--display);margin:10px 0 6px}.card p{font:400 13px/1.5 var(--body);color:var(--muted);margin:0}.footer{border-top:1px solid var(--line);padding:25px 0 50px;display:flex;justify-content:space-between;gap:10px;font:400 10px var(--mono);color:var(--muted)}
/* Article */
.articlehead{padding:72px 0 45px;border-bottom:1px solid var(--line)}.articlehead h1{max-width:960px;font:normal clamp(60px,10vw,126px)/.9 var(--display);margin:22px 0 24px}.articlehead .deck{max-width:780px;color:var(--muted);font-size:clamp(17px,2vw,22px);line-height:1.55;margin:0 0 20px}.story{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);padding:53px 0 70px}.story .articlebody{padding-right:clamp(25px,4vw,70px)}.story .articleaside{border-left:1px solid var(--purple);padding-left:clamp(18px,3vw,36px)}.articlebody p{font-size:17px;line-height:1.85;max-width:750px;margin:0 0 28px}.articlebody h2{font:normal clamp(34px,4vw,55px)/1 var(--display);margin:55px 0 22px}.pullquote{border-left:3px solid var(--lime);padding-left:20px;margin:45px 0 45px;font:normal clamp(25px,3.5vw,39px)/1.25 var(--display)}.space{height:24px}.aside-evidence{border-top:1px solid var(--line);margin-top:26px;padding-top:23px}.aside-evidence strong{display:block;font:normal 27px var(--display);margin:10px 0}.editor-note{color:var(--muted);font:400 12px/1.75 var(--mono);border:1px solid var(--line);padding:14px;margin-top:25px}.toplink{font:500 11px var(--mono);color:var(--lime);letter-spacing:.04em;text-decoration:none}
@media(max-width:750px){.masthead{min-height:74px}.wordmark{font-size:24px}.masthead nav{gap:12px}.masthead nav a{font-size:9px}.lead-hero{padding:55px 0 42px}.lead-hero h1{font-size:clamp(62px,16vw,108px)}.feature,.story{grid-template-columns:1fr}.feature .maincol,.story .articlebody{padding-right:0}.feature .sidecol,.story .articleaside{border-left:0;border-top:1px solid var(--purple);padding:30px 0 0;margin-top:28px}.feature .sidecol .visual{max-width:440px}.card-grid{grid-template-columns:1fr;gap:25px}.articlehead{padding:55px 0 38px}.articlehead h1{font-size:clamp(55px,14.5vw,100px)}.story{padding-top:35px}.footer{flex-direction:column}.sectiontop{margin-top:35px}}
@media(max-width:375px){.masthead nav a:not(.active){display:none}.wrap{padding:0 18px}}

/* Editorial publication refinements — no rules leak into the React homepage. */
.masthead nav{flex-wrap:wrap;justify-content:flex-end}.masthead nav a{white-space:nowrap}
.masthead{min-height:72px}.lead-hero h1{font-size:clamp(70px,11vw,152px)}
.articlehead h1{font-size:clamp(62px,9vw,118px)}
.articlebody h2{font:normal clamp(30px,4vw,47px)/1.04 var(--display);letter-spacing:.018em;margin-top:2.3rem;margin-bottom:.8rem}
.articlebody h2 .lime, .sectiontop h2 .lime,.sidecol h3 .lime{color:var(--lime)}
.articlebody p{font-size:clamp(16px,1.55vw,19px);line-height:1.82;max-width:760px}
.articlebody a,.footnotes a{color:var(--lime);text-underline-offset:3px}
.figcaption{font:500 10px/1.5 var(--mono);letter-spacing:.09em;color:var(--muted);margin:11px 0 38px;text-transform:uppercase}
.editorial-art{background:#11110f;display:block;width:100%;height:auto;border:1px solid var(--line)}
.articlebody blockquote{border-left:3px solid var(--lime);padding:10px 24px;margin:36px 0;color:var(--paper);font-size:clamp(20px,2.4vw,27px);font-weight:500;line-height:1.45}
.numbers{display:flex;flex-wrap:wrap;gap:20px;padding:24px 0 28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:26px 0 38px}
.number{flex:1;min-width:110px}.number strong{display:block;font:normal clamp(32px,4vw,54px)/1 var(--display);color:var(--lime)}.number span{display:block;font:400 10px/1.5 var(--mono);color:var(--muted);margin-top:8px}
.pill-link{display:inline-flex;padding:11px 16px;border:1px solid var(--lime);font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;margin:9px 12px 9px 0}
.editorial-aside{position:sticky;top:20px;align-self:start}.editorial-aside h3{font:normal 30px/1 var(--display);margin:20px 0 12px}.aside-copy{font:400 13px/1.6 var(--body);color:var(--muted)}
.footnotes{padding:34px 0 42px;border-top:1px solid var(--line);margin-top:50px}.footnotes h2{font:normal 38px var(--display);letter-spacing:.02em}.footnotes ol{padding-left:20px}.footnotes li{font:400 13px/1.75 var(--body);color:var(--muted);margin-bottom:12px;overflow-wrap:anywhere}
.issue-chip{font:500 10px var(--mono);color:var(--lime);letter-spacing:.09em;text-transform:uppercase}
.story-nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.story-nav a{font:500 11px var(--mono);text-decoration:none;border-bottom:1px solid var(--line);padding:12px 0;color:var(--paper)}
.sourcelabel{font:500 10px var(--mono);color:var(--lime);letter-spacing:.1em;text-transform:uppercase}
@media (max-width:750px){.masthead{flex-direction:column;align-items:flex-start;padding-top:20px;padding-bottom:20px;gap:14px}.masthead nav{gap:15px}.editorial-aside{position:static}.articlebody p{font-size:16px}.numbers{gap:8px}.number{min-width:90px}.number strong{font-size:34px}.lead-hero{padding:45px 0 44px}}

/* Preserve the Monocle-like centre rule on the published case-file page. */
.story .sidecol{border-left:1px solid var(--purple);padding-left:clamp(18px,3vw,36px)}
@media(max-width:750px){.story .sidecol{border-left:0;border-top:1px solid var(--purple);padding:30px 0 0;margin-top:30px}}

/* CF004 editorial photography; keep Monocle 70/30 layout and sidebar intact. */
img[src*="cinema-popcorn-cinematic.jpg"]{aspect-ratio:4/3;object-fit:cover;object-position:58% center}
.media-quicklinks{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px}
.media-quicklinks a,.media-aside a{font:500 11px/1.6 var(--mono);letter-spacing:.04em;text-decoration:none;color:var(--lime)}
.media-aside{display:flex;flex-direction:column;gap:12px;margin:15px 0 27px}
.media-aside a{border:1px solid var(--line);padding:11px 9px}
.media-aside a:hover{border-color:var(--lime)}

/* Beyond the Frame: permanent watch / read / listen system. Article and homepage
   retain their approved visual design. Each next case file swaps in its own video
   ID, Spotify episode ID and research references; see PUBLISHING-GUIDE.txt. */
.story {position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);grid-template-areas:"article media" "article evidence";grid-template-rows:max-content 1fr;align-items:start;gap:0}
.story::after {content:"";position:absolute;top:0;bottom:0;left:70%;border-left:1px solid var(--purple);pointer-events:none}
.story .articlebody {grid-area:article;min-width:0}
.story .sidecol {border-left:0;min-width:0;padding-left:clamp(18px,3vw,36px)}
.story .media-hub {grid-area:media;padding-bottom:36px}
.story .evidence-hub {grid-area:evidence;align-self:start}
.format-rail {margin-top:26px;border-top:1px solid var(--line);display:flex;gap:22px;flex-wrap:wrap;padding-top:18px}
.format-rail a {font:500 10px/1.5 var(--mono);letter-spacing:.04em;text-decoration:none;color:var(--paper);white-space:nowrap}
.format-rail a span {color:var(--lime);padding-right:8px}
.format-rail a:hover{color:var(--lime)}
.format-kicker {font:500 10px/1.5 var(--mono);letter-spacing:.06em;color:var(--lime)}
.media-section-heading {font:normal clamp(27px,2.65vw,39px)/1.05 var(--display);letter-spacing:.012em;margin:17px 0 15px}
.media-section-heading .lime,.media-title .lime {color:var(--lime)}
.doc-thumb {display:block;position:relative;aspect-ratio:16/9;overflow:hidden;text-decoration:none;background:linear-gradient(15deg,rgba(0,0,0,.8),transparent),url('/research/assets/cinema-popcorn-cinematic.jpg') center 54%/cover; border:1px solid var(--line)}
.doc-thumb img {display:block;width:100%;height:100%;object-fit:cover}
.doc-thumb::after {content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.7));pointer-events:none}
.doc-play {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:57px;height:43px;padding-left:3px;color:white;background:rgba(190,31,32,.94);font-size:22px;border-radius:12px;z-index:2;box-shadow:0 2px 13px #0008;transition:background .2s}
.doc-thumb:hover .doc-play {background:#E62222}
.doc-overlay {position:absolute;bottom:11px;left:13px;right:13px;color:white;font:500 10px/1.4 var(--mono);letter-spacing:.04em;z-index:2;text-shadow:0 2px 10px #000}
.media-title {font:normal 23px/1.1 var(--display);margin:14px 0 4px}
.media-caption {font:400 13px/1.55 var(--body);color:var(--muted);margin:6px 0 13px}
.media-action {border:1px solid var(--line);display:flex;align-items:center;gap:11px;text-decoration:none;padding:12px 11px;font:500 10px/1.35 var(--mono);color:var(--paper);letter-spacing:.025em;transition:border-color .2s}
.media-action:hover {border-color:var(--lime)}
.media-action span:nth-child(2){flex:1}
.youtube-identifier {color:white;border-radius:5px;background:#d92121;padding:5px 8px;font-size:10px}
.spotify-identifier {color:#111;background:#1ED760;border-radius:50%;width:24px;height:24px;display:grid;place-items:center;font-size:16px;font-weight:bold}
.media-divider {margin:29px 0 24px;border-top:1px solid var(--line)}
.spotify-player {border-radius:12px;background:#252525;overflow:hidden;margin:11px 0 12px;min-height:152px}
.spotify-player iframe {border:0;display:block;width:100%;min-height:152px}
.media-reassurance {font:400 9px/1.6 var(--mono);color:var(--muted);margin:18px 0 0;letter-spacing:.025em}
.evidence-hub {border-top:1px solid var(--line);padding-top:29px}
@media(max-width:750px) {
  .story {display:flex;flex-direction:column;gap:0;padding-top:24px}
  .story::after {display:none}
  .story .media-hub {order:0;width:100%;border:0;margin:0;padding:0 0 28px}
  .story .articlebody {order:1;width:100%;padding:22px 0 0;border-top:1px solid var(--purple)}
  .story .evidence-hub {order:2;width:100%;margin:32px 0 0;border-top:1px solid var(--purple);padding:28px 0 0}
  .media-section-heading {font-size:31px}
  .doc-thumb {max-width:550px}
  .format-rail {gap:13px 18px}
  .format-rail a {font-size:9px}
  .media-reassurance {margin-top:15px}
}

/* FINAL MAGAZINE GEOMETRY: media beside the headline on desktop,
   directly after the headline and before article text on mobile. */
.article-layout{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);grid-template-areas:"headline sidebar" "article sidebar";grid-template-rows:auto 1fr;align-items:stretch;gap:0}
.article-layout .articlehead{grid-area:headline;padding:55px clamp(24px,4vw,64px) 34px 0;border-bottom:1px solid var(--line)}
.article-layout .articlehead h1{font-size:clamp(60px,7.9vw,120px)}
.article-layout .articlebody{grid-area:article;min-width:0;padding:42px clamp(24px,4vw,64px) 65px 0}
.article-layout .media-sidebar{grid-area:sidebar;min-width:0;border-left:1px solid var(--purple);padding:56px 0 48px clamp(18px,3vw,36px);align-self:stretch}
.article-layout .media-hub,.article-layout .evidence-hub{border-left:0;padding-left:0;margin-left:0}
.article-layout .media-hub{padding-bottom:30px}
.article-layout .evidence-hub{border-top:1px solid var(--line);padding-top:28px}
.article-layout .aside-title{font-size:26px}
@media(max-width:750px){
 .article-layout{display:flex;flex-direction:column}
 .article-layout .media-sidebar{display:contents}
 .article-layout .articlehead{order:0;padding:55px 0 30px;border-bottom:none}
 .article-layout .articlehead h1{font-size:clamp(55px,14.5vw,100px)}
 .article-layout .media-hub{order:1;border-top:1px solid var(--purple);padding:25px 0 34px;margin:0}
 .article-layout .articlebody{order:2;border-top:1px solid var(--line);padding:35px 0 30px}
 .article-layout .evidence-hub{order:3;border-top:1px solid var(--purple);padding:30px 0 0;margin-top:12px}
}