/* Living Index Graphite layer for the pages outside the film grid (Studio, Info, Systems, Music, Paintings, Press...).
   Same header, type and colours as li/style.css; each page keeps its own layout underneath. */
@font-face{font-family:"IBM Plex Mono";src:url("../assets/fonts/plex-mono-regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../assets/fonts/plex-mono-medium.ttf") format("truetype");font-weight:500;font-display:swap}
html.li-dark:not(.tone-light):not(.tone-glacier),html.li-dark:not(.tone-light):not(.tone-glacier) body.li-dark,html.li-dark:not(.tone-light):not(.tone-glacier) body.li-dark *{
  --paper:#1A1A18!important;--ink:#EDEAE2!important;--muted:#8E8C85!important;--line:#34332F!important;--reserve:#262624!important;
  --label-ink:#8E8C85!important;--accent:#C9624F!important;--grey:#8E8C85;--rule:#34332F;--red:#C9624F;
  --art-ink:#EDEAE2!important;--art-line:#34332F!important;--art-muted:#8E8C85!important;--art-rust:#C9624F!important}
html.li-dark:not(.tone-light):not(.tone-glacier){color-scheme:dark}
html.li-dark:not(.tone-light):not(.tone-glacier),html.li-dark:not(.tone-light):not(.tone-glacier) body.li-dark{background:#1A1A18!important;color:#EDEAE2}
html:not(.tone-light):not(.tone-glacier) body.li-dark{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='173' height='173'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.87' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='173' height='173' filter='url(%23g)' opacity='.12'/%3E%3C/svg%3E")!important;-webkit-font-smoothing:antialiased}
html:not(.tone-light):not(.tone-glacier) body.li-dark::before,html:not(.tone-light):not(.tone-glacier) body.li-dark::after{background-color:transparent!important}
/* every themed page: shared header and type; li-dark adds Graphite, li-light keeps paper (The Path) */
body.li-page{--li-ink:#161616;--li-grey:#777771;--li-red:#AD4C43}
html:not(.tone-light):not(.tone-glacier) body.li-dark{--li-ink:#EDEAE2;--li-grey:#8E8C85;--li-red:#C9624F}
/* header: identical to the grid pages */
body.li-page header.li-header{position:relative;display:flex;align-items:center;justify-content:space-between;padding:26px var(--li-m,40px) 0;gap:30px;margin:0;border:0;background:none;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
body.li-page .li-header .mark{font-weight:700;font-size:25px;letter-spacing:-.045em;color:var(--li-ink);text-decoration:none}
body.li-page .li-header .right{display:flex;align-items:center;gap:34px}
body.li-page .li-header nav{display:flex;gap:28px;font-size:12px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;position:static;margin:0}
body.li-page .li-header nav a{color:var(--li-grey);text-decoration:none;border:0;padding:0;font-size:12px}
body.li-page .li-header nav a.on{color:var(--li-ink)}
body.li-page .li-header nav a::after,body.li-page .li-header nav a::before{display:none!important}
body.li-page .li-header .path.code-beacon{position:relative;top:auto;right:auto;display:grid;place-items:center;width:52px;height:44px;margin:-10px -6px -10px 0;color:var(--li-ink)}
html:not(.tone-light):not(.tone-glacier) body.li-dark .li-header .code-beacon .cb-ghost{opacity:.35}
@media(max-width:700px){body.li-page{--li-m:18px}
 body.li-page header.li-header{padding-top:18px;flex-wrap:wrap;gap:10px 0}
 body.li-page .li-header .mark{font-size:21px}
 body.li-page .li-header .right{display:contents}
 body.li-page .li-header .path{order:2}
 body.li-page .li-header nav{order:3;flex-basis:100%;gap:22px;font-size:11px}}
/* type: Helvetica for text, Plex Mono for labels */
body.li-page{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
body.li-page :is(.mono,[class*="label"],[class*="kicker"],.filters a,.studio-filters a){font-family:"IBM Plex Mono",monospace}
body.li-page a{color:inherit}
body.li-page img[src*="logo"],body.li-page .client-logo,body.li-page [class*="client"] svg{filter:none}
body.li-page ::selection{background:var(--li-red);color:var(--paper,#1A1A18)}

/* line the header up with the grid pages: 40px sides everywhere */
html body.li-page{padding-left:40px!important;padding-right:40px!important;margin:0!important}
body.li-page header.li-header{padding-left:0;padding-right:0}
@media(max-width:700px){html body.li-page{padding-left:18px!important;padding-right:18px!important}}
/* Info: logos and award marks were drawn dark for paper */
html:not(.tone-light):not(.tone-glacier) body.li-dark .info-layout img[src$=".svg"],html:not(.tone-light):not(.tone-glacier) body.li-dark img[src*="brand-symbols"],html:not(.tone-light):not(.tone-glacier) body.li-dark img[src*="award-icons"],html:not(.tone-light):not(.tone-glacier) body.li-dark img[src*="recognition"]{filter:invert(.92)}
body.li-page .info-photo{filter:none}
/* Studio filters: the same filter row as the grid pages */
body.li-page :is(.studio-filters,.studio-nav,.studio-tabs) a,body.li-page .studio-layout nav a{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important;font-size:12px!important;font-weight:500!important;letter-spacing:.03em!important;text-transform:uppercase;color:var(--li-grey)}
body.li-page :is(.studio-filters,.studio-nav,.studio-tabs) a[aria-current],body.li-page .studio-layout nav a[aria-current]{color:var(--li-ink);border-bottom:1px solid var(--li-red)!important;box-shadow:none}
body.li-page .studio-image-nav a{font-family:"IBM Plex Mono",monospace!important;font-size:12px!important;letter-spacing:.06em!important;color:var(--li-red)!important;display:inline-flex;align-items:center;gap:8px}
body.li-page .studio-image-nav svg{width:14px;height:14px}
/* match the grid pages' type exactly (Studio sub menu, Systems) */
html body.li-page .studio-nav{display:flex;gap:26px}
html body.li-page.li-page.li-page.li-page .studio-layout .studio-nav a{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important;font-size:12px!important;font-weight:500!important;letter-spacing:.03em!important;text-transform:uppercase!important;color:var(--li-grey)!important;padding:6px 0!important;border-bottom:1px solid transparent!important;text-decoration:none!important;box-shadow:none!important;background:none!important}
html body.li-page.li-page.li-page.li-page .studio-layout .studio-nav a[aria-current]{color:var(--li-ink)!important;border-bottom-color:var(--li-red)!important}
html body.li-page.li-page.li-page.li-page .studio-layout .studio-nav a::before,html body.li-page.li-page.li-page.li-page .studio-layout .studio-nav a::after{display:none!important}
/* Systems: kicker and section heads in mono, titles and numbers in bold Helvetica like SUPERMODEL on the grid */
html body.li-page.code-art-page .art-kicker,html body.li-page.code-art-page .art-kicker > span:first-child,html body.li-page.code-art-page [class*="art-meta"] span:first-child,html body.li-page.code-art-page .art-stats h2,html body.li-page.code-art-page section h2:not(.art-intro-title){font-family:"IBM Plex Mono",monospace!important;font-size:11px!important;font-weight:400!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:var(--li-grey)!important}
html body.li-page.code-art-page .art-title{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important;font-weight:700!important;letter-spacing:-.05em!important;text-transform:uppercase;line-height:.95!important}
html body.li-page.code-art-page .art-title .art-sub{text-transform:none;letter-spacing:0!important;line-height:1.7!important}
html body.li-page.code-art-page dd{font-weight:700!important;letter-spacing:-.04em!important}
html body.li-page .studio-content h1:not(.sr-only){font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important;font-weight:700!important;letter-spacing:-.05em!important;text-transform:uppercase!important;line-height:.95!important}

.li-header .tone{width:28px;height:28px;padding:5px;border:0;background:none;color:var(--li-grey);cursor:pointer;opacity:.7;transition:opacity .2s,color .2s}
.li-header .tone svg{display:block;width:16px;height:16px;fill:currentColor}
.li-header .tone:hover,.li-header .tone:focus-visible{opacity:1;color:var(--li-ink)}
/* Glacier blue on the other pages */
html.tone-glacier body.li-page:not(.li-light),html.tone-glacier body.li-page:not(.li-light) *{--paper:#BDD5DE!important;--ink:#15292F!important;--muted:#49616A!important;--line:#94B0BA!important;--reserve:#A9C4CE!important;--label-ink:#49616A!important;--accent:#9C3F36!important;--li-ink:#15292F;--li-grey:#49616A;--li-red:#9C3F36}
html.tone-glacier,html.tone-glacier body.li-page:not(.li-light){background-color:#BDD5DE!important;color:#15292F}
@media(max-width:700px){body.li-page .li-header .tone{order:2;margin-left:auto;margin-right:8px}}
html body.li-page{padding-top:0!important}

/* Music platforms as pastel chips (Spotify green, Bandcamp blue, SoundCloud orange); dark text reads on every background */
html body.li-page .music-platforms{justify-content:flex-start;gap:8px;font-family:"IBM Plex Mono",monospace!important}
html body.li-page .music-platforms a{font:500 11px/1 "IBM Plex Mono",monospace!important;letter-spacing:.06em;text-transform:uppercase;color:#161616!important;padding:7px 10px 6px!important;border-radius:2px;text-decoration:none!important;transition:filter .2s,transform .2s}
html body.li-page .music-platforms a[href*="spotify"]{background:#B9DDBE}
html body.li-page .music-platforms a[href*="bandcamp"]{background:#B7D0E4}
html body.li-page .music-platforms a[href*="soundcloud"]{background:#F3C8A6}
html body.li-page .music-platforms a:hover,html body.li-page .music-platforms a:focus-visible{filter:brightness(1.06);transform:translateY(-1px)}
html body.li-page .music-platforms .external-arrow{margin-left:6px;opacity:.6}
html body.li-page .music-platforms-top{margin:14px 0 34px}
/* Info: no frame line on the photo; Instagram and Spotify icons follow the text colour (white on Graphite) */
html body.li-page .info-photo{border:0!important;outline:0!important}
html body.li-page .info-content .social{color:var(--li-ink)!important}
/* Info recognition marks: drawn in the text colour (white on Graphite) */
html body.li-page .award-mark{color:var(--li-ink)!important;opacity:.9}
html body.li-page .award-mark .award-fill,html body.li-page .award-mark .award-soft{fill:currentColor!important}