/* ===== Design pieces for the new look (brief 06). Use these on Studio pages; old class names are mapped onto them in
   the "Update 87" section at the end, so pages written before keep working and look the same as new ones.
   - Page header   .nl-head (h1 + .lead): Fraunces 40px (32px on phones), one soft line under it.
   - Section       .nl-sect (h2 + content): 24px heading, 40px above, no rule.
   - Panel         .nl-panel: mist #F3F0EA, 18px radius, no border, no left-border cards. (.note, .sh-set, .memb, .bk-group...)
   - Field         .nl-field (label + input/select/textarea): full width of its column, 44px high, 16px text, 12px radius.
   - Button row    .nl-btns: capsule buttons in a row with 10px gaps; primary red, .quiet white with a light line.
   - List row      .nl-row: picture or icon, words, and an action at the end; rows separated by a light line.
   - Empty state   .nl-empty: a soft panel with one line and, if useful, one button.
   - Tabs          .nl-tabs: capsule chips, the current one dark (also .tabs, .seg).
   Brand: paper #FEFDFB, ink #1C1B18, mist #F3F0EA, lines #E7E2D9, soft text #5F5B54, CreatED red #C4472A. ===== */
/* CreatED Studio: brand book colours and type. Paper, Slate, Correction orange-red, ink. */
:root{--ink:#1C1B18;--paper:#F3EEE4;--mist:#EAE4D8;--line:#CFC7B9;--slate:#3A4A58;--red:#C4472A;--red-dark:#A93A21;--soft:#6E665B}
*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;font:17px/1.55 "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);padding-top:env(safe-area-inset-top,0)}
a{color:var(--slate)}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--slate);outline-offset:2px}
.frame{max-width:1080px;margin:16px auto 0;border:1px solid var(--ink);border-bottom:0;min-height:calc(100vh - 16px)}
@media(max-width:700px){.frame{margin:0;border-left:0;border-right:0}}
header.top{border-bottom:1px solid var(--ink)}
header.top .bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 28px}
.mark{font:400 1.6rem/1 "Fraunces",Georgia,serif;font-variation-settings:"SOFT" 100,"opsz" 48;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.mark:hover{color:var(--ink)}
header.top nav{display:flex;flex-wrap:wrap;gap:0 24px;padding:0 28px;border-top:1px solid var(--line)}
header.top nav a{text-decoration:none;color:var(--ink);padding:11px 0 9px;border-bottom:2px solid transparent;font-size:.98rem}
header.top nav a[aria-current=page]{border-bottom-color:var(--red)}
header.top nav a:hover{border-bottom-color:var(--slate);color:var(--ink)}
.menubtn,.only-mobile{display:none}
/* Menu groups: the group name opens its first page; its pages show as a second row */
header.top .ng{display:flex}
header.top .ngi{display:none}
header.top nav a.ngl[aria-current=true]{border-bottom-color:var(--red)}
header.top nav.subnav{gap:0 22px;background:#EEE8DC}
header.top nav.subnav a{font-size:.92rem;padding:9px 0 7px}
@media(max-width:820px){
  header.top .bar{padding:12px 18px}
  .mark{font-size:1.45rem}
  header.top .who{display:none}
  .menubtn{display:inline-block;padding:9px 16px}
  header.top nav{display:none;flex-direction:column;gap:0;padding:0 18px 14px}
  header.top nav.open{display:flex}
  header.top nav a{padding:15px 2px;border-bottom:1px solid var(--line);font-size:1.12rem}
  header.top nav a[aria-current=page]{border-bottom:1px solid var(--line);color:var(--red);font-weight:500}
  .only-mobile{display:block;margin-top:14px;width:100%}
  header.top .ng{display:block}
  header.top nav a.ngl{display:block;font:400 .76rem/1.3 "IBM Plex Mono",monospace;color:var(--soft);padding:20px 2px 6px;border-bottom:0}
  header.top nav a.ngl[aria-current=true]{color:var(--soft);font-weight:400;border-bottom:0}
  header.top .ngi{display:block}
  header.top .ngi a{display:block;padding-left:14px}
  header.top nav.subnav{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:0 20px;padding:0 18px;white-space:nowrap}
  header.top nav.subnav a{padding:10px 0 8px;font-size:.95rem;border-bottom:2px solid transparent}
  header.top nav.subnav a[aria-current=page]{border-bottom:2px solid var(--red);color:var(--ink);font-weight:400}
}
main{padding:34px 28px 96px}
@media(max-width:700px){main{padding:26px 18px 80px}header.top{padding:14px 18px}}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:400;font-variation-settings:"SOFT" 100,"opsz" 72;letter-spacing:-.012em}
h1{font-size:clamp(2rem,5.4vw,3.3rem);line-height:1.06;margin:0 0 12px;max-width:20ch}
h2{font-size:1.55rem;line-height:1.2;margin:40px 0 10px;padding-top:18px;border-top:1px solid var(--ink)}
h3{font-size:1.2rem;margin:22px 0 6px}
.lead{font-size:1.12rem;max-width:58ch;color:var(--soft);margin:0 0 22px}
p{max-width:66ch}
.small{font-size:.88rem;color:var(--soft)}
.mono{font-family:"IBM Plex Mono",monospace;font-size:.85rem}
button,.btn{font:inherit;display:inline-block;padding:10px 18px;border:1px solid var(--red);border-radius:0;background:var(--red);color:var(--paper);cursor:pointer;text-decoration:none;line-height:1.3}
button:hover,.btn:hover{background:var(--red-dark);border-color:var(--red-dark);color:var(--paper)}
button.quiet,.btn.quiet{background:transparent;color:var(--ink);border-color:var(--ink)}
button.quiet:hover,.btn.quiet:hover{background:var(--mist);color:var(--ink);border-color:var(--ink)}
button.danger{background:transparent;color:var(--red);border-color:var(--red)}
button.danger:hover{background:var(--red);color:var(--paper)}
button[disabled]{opacity:.55;cursor:default}
label{display:block;font-size:.92rem;font-weight:500;margin:0 0 4px}
input[type=text],input[type=email],input[type=date],input[type=number],select,textarea{font:inherit;width:100%;padding:10px 12px;border:1px solid var(--ink);border-radius:0;background:#F8F4EC;color:var(--ink)}
textarea{min-height:90px}
.hint{display:block;font-size:.82rem;color:var(--soft);margin-top:3px}
.field{margin:0 0 16px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 22px}
@media(max-width:700px){.grid2,.grid3{grid-template-columns:minmax(0,1fr)}}
.note{background:var(--mist);padding:12px 16px;margin:16px 0;border-left:4px solid var(--slate);max-width:70ch}
.note.warn{border-left-color:var(--red)}
.msg{min-height:1.5em;margin:10px 0}
.msg.err{color:var(--red)}
.links{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.links li{border-bottom:1px solid var(--line)}
.links a{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:14px 4px;text-decoration:none;color:var(--ink)}
.links a:hover{background:var(--mist);color:var(--ink)}
.links a b{font:400 1.2rem "Fraunces",Georgia,serif}
.links a span{color:var(--soft);font-size:.92rem;text-align:right}
.strip{background:var(--ink);color:var(--paper);padding:22px 26px;margin:38px 0 0}
.strip a{color:var(--paper)}
.strip h2{border:0;padding:0;margin:0 0 6px;font-size:1.4rem}
.strip p{margin:0 0 12px;color:#D5D9DC}
.chip{display:inline-block;font:400 .75rem "IBM Plex Mono",monospace;padding:2px 8px;border:1px solid var(--slate);color:var(--slate);margin:0 6px 4px 0;background:transparent}
.chip.red{border-color:var(--red);color:var(--red)}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.tabs button{background:transparent;color:var(--ink);border-color:var(--line)}
.tabs button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
table.list{border-collapse:collapse;width:100%}
table.list td,table.list th{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:middle}
table.list th{font:400 .8rem "IBM Plex Mono",monospace;color:var(--soft)}
table.list img{width:64px;height:64px;object-fit:cover;display:block;background:var(--mist)}
table.list .ph{width:64px;height:64px;background:var(--mist);border:1px dashed var(--line)}
table.list a{color:var(--ink);font-weight:500}
.portfolio{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:26px 22px;margin-top:10px}
.portfolio figure{margin:0}
.portfolio a.pic{display:block;background:var(--mist);border:1px solid var(--line);aspect-ratio:1/1;overflow:hidden}
.portfolio img{width:100%;height:100%;object-fit:contain;display:block}
.portfolio figcaption{padding-top:8px;font-size:.92rem}
.portfolio figcaption b{display:block;font:400 1.1rem "Fraunces",Georgia,serif}
.portfolio figcaption span{color:var(--soft);font-size:.85rem}
.portfolio figure.new a.pic{outline:3px solid var(--red);outline-offset:2px}
.dropzone{border:1px dashed var(--ink);padding:26px;text-align:center;background:#F8F4EC;margin:0 0 18px}
.preview{max-width:100%;max-height:420px;display:block;margin:0 auto 14px;border:1px solid var(--line)}
.workimg{max-width:100%;max-height:82vh;display:block;border:1px solid var(--line);background:var(--mist)}
.snap{border:1px solid var(--line);padding:12px 16px;margin:10px 0;background:#F8F4EC}
.snap b{font:400 1.05rem "Fraunces",Georgia,serif}
.empty{border:1px dashed var(--line);padding:30px 24px;text-align:center;color:var(--soft);margin:14px 0}
@media print{header.top,#studio-bar,button,.tabs{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- phone-friendly lists ---- */
@media(max-width:700px){
  .links a{flex-direction:column;gap:2px;padding:14px 2px}
  .links a span{text-align:left;max-width:none!important}
  h2{margin-top:32px}
  .tabs button{flex:1 1 auto}
}
/* ---- dashboard: your own work up front ---- */
.hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:26px;align-items:end;margin:6px 0 10px}
@media(max-width:820px){.hero{grid-template-columns:minmax(0,1fr)}}
.hero a.pic{display:block;background:var(--mist);border:1px solid var(--line)}
.hero img{display:block;width:100%;height:auto;max-height:82vh;object-fit:contain}
.hero .cap b{display:block;font:400 1.5rem/1.2 "Fraunces",Georgia,serif;margin:0 0 4px}
.hero .cap .small{margin:0 0 14px}
.recent{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;margin:14px 0 4px}
.recent a{display:block;aspect-ratio:1/1;background:var(--mist);border:1px solid var(--line);overflow:hidden}
.recent img{width:100%;height:100%;object-fit:contain;display:block}
.next{border:1px solid var(--ink);border-left-width:6px;border-left-color:var(--red);padding:16px 20px;margin:20px 0;background:#F8F4EC}
.next b{display:block;font:400 1.25rem "Fraunces",Georgia,serif;margin-bottom:4px}
.next p{margin:0 0 12px}
.bigadd{display:block;text-align:center;border:1px dashed var(--ink);padding:44px 20px;background:#F8F4EC;text-decoration:none;color:var(--ink);margin:10px 0 20px}
.bigadd b{display:block;font:400 1.6rem "Fraunces",Georgia,serif}
.bigadd:hover{background:var(--mist);color:var(--ink)}
/* ---- step by step ---- */
.art{background:var(--mist);border:1px solid var(--line);margin:0 0 18px;text-align:center}
.art img{display:block;margin:0 auto;max-width:100%;max-height:68vh;object-fit:contain}
.art .ph{padding:40px 12px;color:var(--soft)}
.stepcard{max-width:640px}
.stepcard h2{border:0;padding:0;margin:4px 0 6px;font-size:1.7rem}
.stepcard h2:focus{outline:none}
.dots{display:flex;gap:6px;margin:0 0 6px;flex-wrap:wrap}
.dots i{width:22px;height:5px;background:var(--line);display:block}
.dots i.done{background:var(--slate)}
.dots i.now{background:var(--red)}
.stepnav{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 4px}
.stepnav .spacer{flex:1}
.choices{display:grid;gap:10px;margin:8px 0}
.choice,.chip-btn{font:inherit;text-align:left;background:#F8F4EC;color:var(--ink);border:1px solid var(--ink);padding:14px 16px;cursor:pointer;line-height:1.3;border-radius:0}
.choice:hover,.chip-btn:hover{background:var(--mist);color:var(--ink);border-color:var(--ink)}
.choice[aria-pressed=true],.chip-btn[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.choice small{display:block;color:var(--soft);font-size:.85rem;margin-top:2px}
.choice[aria-pressed=true] small{color:#D5D9DC}
.chipset{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.chip-btn{padding:10px 14px}
.bigin{font-size:1.2rem;padding:14px}
.entry{display:grid;grid-template-columns:90px minmax(0,1.6fr) minmax(0,1fr) auto;gap:8px;margin:0 0 8px;align-items:start}
@media(max-width:700px){.entry{grid-template-columns:90px minmax(0,1fr)}.entry input:nth-child(3){grid-column:1 / 3}.entry button{grid-column:1 / 3}}
.versions{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.versions li{border-bottom:1px solid var(--line);padding:12px 2px}
.versions b{font-weight:500}
.versions .small{display:block;margin:2px 0 8px}
.sheet{display:none}
@media print{
  body.printing header.top,body.printing main>*:not(.sheet){display:none!important}
  body.printing .sheet{display:block;padding:0;color:#000}
  body.printing .frame{border:0;margin:0}
  .sheet h1{font-size:26pt;max-width:none}
  .sheet h3{font-size:12pt;border-bottom:1px solid #000;padding-bottom:2pt;margin:16pt 0 6pt}
  .sheet p,.sheet td{font-size:11pt;max-width:none}
}
textarea.big{min-height:180px;font-size:1.05rem;line-height:1.55}
.cli{border-bottom:1px solid var(--line);padding:14px 2px}
.cli b{font:400 1.2rem "Fraunces",Georgia,serif}
.cli .row{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;justify-content:space-between}
@media(max-width:820px){.detailgrid{display:flex;flex-direction:column}.detailgrid .imgcol{order:-1}}
.detailgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 26px}

.worklist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.worklist li{border-bottom:1px solid var(--line)}
.worklist a{display:flex;gap:14px;align-items:center;padding:10px 4px;text-decoration:none;color:var(--ink)}
.worklist a:hover{background:var(--mist);color:var(--ink)}
.worklist img,.worklist .ph{width:72px;height:72px;flex:none;object-fit:cover;background:var(--mist);border:1px solid var(--line);display:block}
.worklist .ph{border-style:dashed}
.worklist .wt{display:flex;flex-direction:column;min-width:0}
.worklist .wt b{font:400 1.15rem "Fraunces",Georgia,serif;overflow-wrap:anywhere}

/* ---- portfolio: every picture in its own proportions, nothing cropped ---- */
.masonry{column-width:360px;column-gap:28px;margin-top:10px}
.masonry figure{break-inside:avoid;margin:0 0 28px}
.masonry a.pic{display:block;background:var(--mist);border:1px solid var(--line)}
.masonry img{display:block;width:100%;height:auto}
.masonry figure.new a.pic{outline:3px solid var(--red);outline-offset:2px}
.masonry figcaption{padding-top:8px;font-size:.92rem}
.masonry figcaption b{display:block;font:400 1.15rem "Fraunces",Georgia,serif}
.masonry figcaption span{color:var(--soft);font-size:.85rem}
/* ---- a work's life ---- */
.workgrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:0 36px;align-items:start}
@media(max-width:900px){.workgrid{grid-template-columns:minmax(0,1fr)}}
.stages{display:flex;flex-wrap:wrap;border:1px solid var(--ink);margin:14px 0 6px}
.stages button{flex:1 1 110px;background:#F8F4EC;color:var(--ink);border:0;border-right:1px solid var(--ink);border-radius:0;padding:12px 6px;text-align:center}
.stages button:last-child{border-right:0}
.stages button.past{background:var(--mist)}
.stages button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.stages button:hover{background:var(--mist);color:var(--ink)}
.stages button[aria-pressed=true]:hover{background:var(--ink);color:var(--paper)}
@media(max-width:520px){.stages button{flex:1 1 50%;border-bottom:1px solid var(--ink)}}
.tl h3{margin:26px 0 4px;font-size:1.25rem}
.entry-card{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:16px;border-bottom:1px solid var(--line);padding:14px 0}
.entry-card.noimg{grid-template-columns:minmax(0,1fr)}
@media(max-width:700px){.entry-card{grid-template-columns:minmax(0,1fr)}}
.entry-card img{display:block;width:100%;height:auto;border:1px solid var(--line);background:var(--mist)}
.entry-card p{margin:0 0 8px}
.entry-card .btns{display:flex;flex-wrap:wrap;gap:8px}
.entry-card .btns button,.entry-card .btns a{padding:7px 12px;font-size:.88rem}
.finishbox{border:1px solid var(--ink);border-left:6px solid var(--red);background:#F8F4EC;padding:16px 18px;margin:14px 0}
.finishbox h3{margin:0 0 6px}
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin:10px 0}
.picks button{padding:0;border:1px solid var(--ink);background:var(--mist);aspect-ratio:1/1;overflow:hidden;border-radius:0}
.picks button[aria-pressed=true]{outline:4px solid var(--red);outline-offset:1px}
.picks img{width:100%;height:100%;object-fit:contain;display:block}
/* ---- print editions ---- */
.numgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:6px;margin:12px 0}
.numgrid button{padding:11px 0;background:#F8F4EC;color:var(--ink);border:1px solid var(--ink);border-radius:0;font-variant-numeric:tabular-nums}
.numgrid button:hover{background:var(--mist);color:var(--ink)}
.numgrid button.sold{background:var(--slate);color:var(--paper);border-color:var(--slate)}
.numgrid button[aria-pressed=true]{outline:3px solid var(--red);outline-offset:1px}
.ed{border:1px solid var(--line);background:#F8F4EC;padding:14px 16px;margin:12px 0}
.ed table{width:100%;border-collapse:collapse;margin-top:8px}
.ed td,.ed th{text-align:left;border-bottom:1px solid var(--line);padding:6px 4px;font-size:.92rem}
.ed th{font:400 .78rem "IBM Plex Mono",monospace;color:var(--soft)}

/* ---- footer ---- */
footer.foot{border-top:1px solid var(--ink);padding:20px 28px 40px;margin-top:10px}
footer.foot nav{display:flex;flex-wrap:wrap;gap:6px 22px;margin-bottom:8px}
footer.foot a{color:var(--ink)}
footer.foot p{margin:0;max-width:70ch}
@media(max-width:700px){footer.foot{padding:18px 18px 40px}}
/* ---- find or add a client ---- */
.cp{position:relative}
.cp ul{position:absolute;z-index:30;left:0;right:0;margin:2px 0 0;padding:0;list-style:none;background:#F8F4EC;border:1px solid var(--ink);max-height:300px;overflow:auto}
.cp li{padding:13px 14px;cursor:pointer;border-bottom:1px solid var(--line);line-height:1.3}
.cp li small{display:block;color:var(--soft);font-size:.82rem}
.cp li[aria-selected=true]{background:var(--ink);color:var(--paper)}
.cp li[aria-selected=true] small{color:#D5D9DC}
.cp li.add{font-weight:500;color:var(--red)}
.cp li.add[aria-selected=true]{color:var(--paper)}
.cp .cp-new{border:1px solid var(--ink);border-left:6px solid var(--red);background:#F8F4EC;padding:14px 16px;margin-top:8px}
/* ---- portfolio filters ---- */
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:0 0 14px}
.filters .wide{grid-column:span 2}
@media(max-width:520px){.filters{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.filters label{font-size:.8rem;margin:0 0 2px;color:var(--soft)}
.showing{font-size:.9rem;color:var(--soft);margin:0 0 14px}
/* ---- where it appears ---- */
.checks{border:1px solid var(--line);background:#F8F4EC;padding:6px 14px;margin:0}
.checks label{display:flex;gap:12px;align-items:flex-start;font-weight:400;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.checks label:last-child{border-bottom:0}
.checks input{width:22px;height:22px;margin:2px 0 0;flex:none;accent-color:var(--red)}
.checks small{display:block;color:var(--soft);font-size:.84rem}

[hidden]{display:none!important}
.bignum{font:400 2rem/1.1 "Fraunces",Georgia,serif;margin:6px 0 2px}
.welcome{border:1px solid var(--ink);border-bottom:0;padding:18px 20px 20px;margin:0 0 26px}
.welcome h2{margin-top:0;border-top:0;padding-top:0}
/* Events */
.evlist{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line)}
.evlist li{border-bottom:1px solid var(--line)}
.evlist a{display:flex;gap:16px;align-items:center;padding:12px 4px;text-decoration:none;color:var(--ink)}
.evlist a:hover{background:var(--mist);color:var(--ink)}
.evlist img,.evnopic{width:84px;height:64px;object-fit:cover;flex:none;background:var(--mist);display:block}
.evlist b{display:block;font:400 1.2rem/1.25 "Fraunces",Georgia,serif}
.evlist .small{display:block}
.evstate{color:var(--slate)}
.evphotos{list-style:none;margin:10px 0 18px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.evphotos img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--mist)}
.evphotos input{width:100%;box-sizing:border-box;margin:6px 0 4px;font-size:.9rem}
.evadd{max-width:560px}
@media (max-width:560px){.evphotos{grid-template-columns:repeat(2,1fr)}}
/* Collections */
.colgrid{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:22px}
.colgrid a{display:block;text-decoration:none;color:var(--ink)}
.colgrid b{display:block;font:400 1.2rem/1.25 "Fraunces",Georgia,serif;margin:8px 0 0}
.colcov{display:grid;aspect-ratio:1;background:var(--mist);gap:2px;overflow:hidden}
.colcov.n2,.colcov.n3,.colcov.n4{grid-template-columns:1fr 1fr}
.colcov.n3 img:first-child{grid-row:span 2}
.colcov img{width:100%;height:100%;object-fit:cover;display:block;min-height:0}
.colgrid a:hover b{color:var(--red)}
.colworks{list-style:none;margin:18px 0 26px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:26px 22px}
.colworks .pic{display:block;background:var(--mist)}
.colworks img{display:block;width:100%;height:auto;max-height:340px;object-fit:contain}
.colworks b{display:block;font:400 1.15rem/1.25 "Fraunces",Georgia,serif;margin:8px 0 2px}
.colworks .small{display:block;margin-bottom:6px}
@media (max-width:560px){.colgrid,.colworks{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
/* Showcase details on a work */
.scbox{border:1px solid var(--ink);border-bottom:0;padding:14px 16px 6px;margin:0 0 18px;max-width:620px}
.scbox h3{margin:0 0 4px}
.tagpick{display:flex;flex-wrap:wrap;gap:8px}
.tagpick label{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ink);padding:6px 10px;cursor:pointer;font-size:.92rem;background:#F8F4EC}
.tagpick input{accent-color:var(--ink)}
.tagpick label:has(input:checked){background:var(--ink);color:var(--paper)}
/* Level testing */
.lvbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 28px;background:var(--ink);color:var(--paper);font-size:.92rem}
.lvbar b{color:var(--paper)}
.lvbar button{color:var(--paper);border-color:var(--paper);background:transparent;padding:5px 10px}
.lvbar button:hover{background:var(--paper);color:var(--ink)}
.lvcards .choice b{font:400 1.25rem/1.2 "Fraunces",Georgia,serif}
@media(max-width:820px){.lvbar{padding:8px 18px}}

/* Courses */
.clist{list-style:none;padding:0;margin:10px 0 0}
.clist>li{display:grid;grid-template-columns:minmax(0,280px) 1fr;gap:22px;border-top:1px solid var(--ink);padding:22px 0}
.clist .cthumb{display:block;aspect-ratio:16/9;background:var(--mist);overflow:hidden;text-decoration:none}
.clist .cthumb img{width:100%;height:100%;object-fit:cover;display:block}
.clist .cthumb span{display:flex;height:100%;align-items:center;justify-content:center;font:400 1.3rem/1.2 "Fraunces",Georgia,serif;color:var(--ink);padding:12px;text-align:center}
.clist h2{border:0;padding:0;margin:0 0 6px}
.clist h2 a{color:var(--ink);text-decoration:none}
@media (max-width:640px){.clist>li{grid-template-columns:1fr;gap:12px}}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;letter-spacing:.02em}
.chero{display:block;width:100%;max-height:360px;object-fit:cover;margin:4px 0 18px}
.cbar{height:4px;background:var(--line);margin:8px 0 22px;max-width:420px}
.cbar span{display:block;height:100%;background:var(--red)}
.llist{list-style:none;padding:0;margin:0;border-top:1px solid var(--ink)}
.llist li>a,.llist li>div{display:grid;grid-template-columns:4.6em 64px 1fr auto;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.llist li>a:hover .ltitle{color:var(--red)}
.llist img,.llist .lph{width:64px;height:44px;object-fit:cover;background:var(--mist);display:block}
.llist .lday{font-size:.82rem;color:var(--soft)}
.llist .lstate{color:var(--soft);text-align:right}
.llist li.done .lstate{color:var(--slate)}
.llist li.locked{opacity:.55}
@media (max-width:520px){.llist li>a,.llist li>div{grid-template-columns:3.8em 48px 1fr;gap:10px}.llist img,.llist .lph{width:48px;height:36px}.llist .lstate{grid-column:3;text-align:left;margin-top:-6px}}
.lkicker{color:var(--soft);margin:0 0 4px}
.vid{position:relative;aspect-ratio:16/9;background:var(--ink);margin:6px 0 22px}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.limg{display:block;max-width:100%;height:auto;margin:6px 0 22px}
.ltext{max-width:68ch}
.ltext h2{font-size:1.3rem}
.ltext h3{font-size:1.1rem;margin:24px 0 6px}
.dl{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.dl a{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.dl a:hover b{color:var(--red)}
.ldraw{margin-top:26px}
.ldone{margin:26px 0 8px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.lnav{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--ink);padding:14px 0;margin-top:18px}
.ltext .lpic{margin:22px 0}
.ltext .lpic img{display:block;max-width:100%;max-height:85vh;width:auto;height:auto}
.ltext .lpic figcaption{font-size:.9rem;color:var(--soft);margin-top:8px}

/* The way across to the Showcase, always in the top bar */
header.top .bar .toshow{margin-left:auto;font-size:.95rem;color:var(--ink);text-decoration:none;border:1px solid var(--ink);padding:7px 11px;white-space:nowrap}
header.top .bar .toshow::after{content:"\00a0\2192"}
header.top .bar .toshow:hover{background:var(--ink);color:var(--paper)}
header.top .bar .mark{white-space:nowrap}
@media (max-width:420px){header.top .bar{gap:8px}header.top .bar .mark{font-size:1.22rem}header.top .bar .toshow{padding:7px 8px;font-size:.88rem}header.top .bar .menubtn{padding-left:12px;padding-right:12px}}
@media (max-width:360px){header.top .bar .toshow::after{content:""}}

/* Messages */
.badge{display:inline-block;min-width:1.35em;padding:1px 5px;margin-left:6px;background:var(--red);color:var(--paper);font:500 .72rem/1.35 "IBM Plex Mono",monospace;text-align:center;vertical-align:2px}
.badge.dot{min-width:0;width:8px;height:8px;padding:0;border-radius:50%;margin-left:6px;vertical-align:1px}
.mlist{list-style:none;padding:0;margin:0;border-top:1px solid var(--ink)}
.mlist a{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.mlist img,.mlist .mph{width:56px;height:56px;object-fit:cover;background:var(--mist);display:block}
.mlist .mwho{font-weight:500}
.mlist .mabout{font-size:.88rem;color:var(--soft)}
.mlist .mlast{font-size:.92rem;color:var(--soft);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.mlist .mwhen{font-size:.8rem;color:var(--soft);text-align:right;white-space:nowrap}
.mlist li.unread .mwho::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-left:8px;vertical-align:1px}
.mlist li.unread .mlast{color:var(--ink)}
.mtabs{display:flex;gap:0;margin:6px 0 16px}
.mtabs a{font:400 .82rem/1 "IBM Plex Mono",monospace;padding:8px 12px;border:1px solid var(--ink);color:var(--ink);text-decoration:none}
.mtabs a+a{border-left:0}
.mtabs a[aria-current]{background:var(--ink);color:var(--paper)}
.mhead{display:flex;gap:14px;align-items:center;border-bottom:1px solid var(--ink);padding-bottom:14px;margin-bottom:6px}
.mhead img{width:64px;height:64px;object-fit:cover;display:block}
.mhead h1{font-size:1.5rem;margin:0}
.mthread{display:flex;flex-direction:column;gap:10px;padding:16px 0}
.mmsg{max-width:82%;padding:10px 14px;background:#fff;border:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere}
.mmsg.mine{align-self:flex-end;background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mmsg .mt{display:block;font:400 .72rem/1.3 "IBM Plex Mono",monospace;opacity:.7;margin-top:6px}
.mmsg.system{align-self:center;background:transparent;border:0;font-size:.88rem;color:var(--soft);text-align:center;padding:4px}
.mcompose textarea{width:100%;box-sizing:border-box;min-height:96px}
.mtools{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.mtips{background:#fff;border-left:3px solid var(--red);padding:12px 16px;margin:12px 0}
.mtips ul{margin:6px 0 0;padding-left:20px}
.mcard{border:1px solid var(--ink);padding:12px 16px;margin:10px 0}
@media (max-width:520px){.mlist a{grid-template-columns:48px 1fr;gap:12px}.mlist img,.mlist .mph{width:48px;height:48px}.mlist .mwhen{grid-column:2;text-align:left}.mmsg{max-width:92%}}
header.top .bar .menubtn{white-space:nowrap}

/* An artwork's details, in sections that open and close */
details.fold{border-top:1px solid var(--ink);margin:0}
details.fold:last-of-type{border-bottom:1px solid var(--ink);margin-bottom:18px}
details.fold>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:14px 0}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary .ft{font:400 1.18rem/1.3 "Fraunces",Georgia,serif}
details.fold>summary .ft::before{content:"+";display:inline-block;width:1.2em;font-family:"IBM Plex Mono",monospace}
details.fold[open]>summary .ft::before{content:"\2212"}
details.fold>summary .fs{font-size:.88rem;color:var(--soft);flex:1 1 12em}
details.fold[open]>summary .fs{display:none}
details.fold>summary:hover .ft{color:var(--red)}
details.fold>.fb{padding:2px 0 14px}

/* The CreatED Studio logo in the top bar */
header.top .bar .mark{display:block;line-height:0}
header.top .bar .mark .logo{display:block;height:34px;width:auto}
@media (max-width:420px){header.top .bar .mark .logo{height:27px}}

/* Selling, inside the Showcase box on a work */
.sellbox{border-top:1px solid var(--line);margin-top:16px;padding-top:12px}
.sellbox h3{margin:0 0 8px}
.sellbox .chk{display:flex;gap:10px;align-items:flex-start;margin:8px 0}
.sellbox .chk small{display:block;color:var(--soft);font-size:.86rem}

/* Teaching */
.rolebox{border-top:1px solid var(--ink);padding:18px 0 10px;margin-top:10px}
.rolebox h2{border:0;padding:0;margin:0 0 6px}
.pill{display:inline-block;font:400 .78rem/1 "IBM Plex Mono",monospace;padding:4px 8px;background:var(--ink);color:var(--paper);vertical-align:middle;margin-left:6px}
.pill.quiet{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.limitnote{color:var(--red);font-size:.9rem}

/* Join */
.jn{max-width:980px}
.jn-int{display:inline-flex;margin:4px 0 16px}
.jn-int button{background:transparent;color:var(--ink);border:1px solid var(--ink);padding:8px 16px}
.jn-int button+button{border-left:0}
.jn-int button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.jn-levels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.jn-lv{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;background:#F8F4EC;color:var(--ink);border:1px solid var(--line);padding:16px 16px 18px;font:inherit;cursor:pointer;min-height:100%}
.jn-lv:hover{border-color:var(--ink)}
.jn-lv[aria-pressed="true"]{border:2px solid var(--ink);padding:15px 15px 17px;background:#fff}
.jn-is{font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 14;font-size:1.2rem;line-height:1.2}
.jn-name{font-size:.95rem}
.jn-price{font-family:"Fraunces",Georgia,serif;font-size:1.5rem}
.jn-food{font-style:italic;color:var(--slate);font-size:.9rem}
.jn-adds{color:var(--soft);font-size:.9rem;line-height:1.45}
.jn-note{margin:16px 0 18px;max-width:46em}
.jn-form{max-width:460px}
@media (max-width:820px){.jn-levels{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.jn-levels{grid-template-columns:minmax(0,1fr)}}
/* Membership on Account */
.memb{border:1px solid var(--ink);padding:14px 18px;max-width:560px}
.memb b.lvname{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:1.5rem}

/* Works in progress as a wall of cards, like the portfolio */
.wipwall{column-width:300px}
.wipwall a.pic.nopic{background:#FBF8F2;border:1px solid var(--line);border-top:3px solid var(--ink);text-decoration:none;color:var(--ink)}
.wipwall .sketch{display:block;padding:18px 18px 22px;min-height:150px}
.wipwall .sketch b{display:block;font:400 1.35rem/1.2 "Fraunces",Georgia,serif;margin-bottom:10px}
.wipwall .sketch span{display:block;font-size:.95rem;line-height:1.55;color:var(--slate);white-space:pre-line}
.wipwall .sketch .soft{color:var(--soft);font-style:italic}
.wipwall a.pic.nopic:hover{border-color:var(--ink)}
.wipwall a.pic.nopic + figcaption b{display:none}

.spamtip{border-left:3px solid var(--red);background:#FBF8F2;padding:10px 14px;font-size:.95rem;line-height:1.5;max-width:440px}

/* Young creatives */
.youngbar{background:#E8EEF2;border-bottom:1px solid var(--slate);padding:9px 28px;font-size:.92rem;color:var(--ink)}
.youngbar.parent{background:var(--slate);color:var(--paper)}
.youngbar.parent b{color:var(--paper)}
.youngbar button{margin-left:10px}
.youngbar.parent button{color:var(--paper);border-color:var(--paper)}
@media (max-width:700px){.youngbar{padding:9px 18px}}
.kids{list-style:none;padding:0;margin:14px 0 26px}
.kid{border:1px solid var(--ink);padding:14px 18px;margin:0 0 12px;background:#FBF8F2}
.kid-h b{font:400 1.4rem "Fraunces",Georgia,serif}
.famcode{font:500 1.3rem "IBM Plex Mono",monospace;letter-spacing:.12em;background:var(--ink);color:var(--paper);padding:2px 8px;margin:0 4px}
.safety ul{padding-left:18px}.safety li{margin:6px 0;line-height:1.5}
/* Ask for help and feedback */
.askworks{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:8px 0 18px}
.askw{display:block;border:1px solid var(--line);padding:6px;cursor:pointer;background:#fff;font-size:.88rem}
.askw.on{border:2px solid var(--ink);padding:5px}
.askw input{position:absolute;opacity:0}
.askw img,.askw .ph{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--mist);margin-bottom:6px}
.fbk{border-top:1px solid var(--ink);padding:16px 0 10px}
.fbk h2{border:0;padding:0;margin:4px 0 6px}
.fbq{font-style:italic;color:var(--slate)}
.fbworks{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:12px 0}
.fbw{display:block;color:var(--ink);text-decoration:none;font-size:.9rem}
.fbw img,.fbw .ph{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--mist);margin-bottom:6px}
.fbw span{display:block;color:var(--slate);margin-top:4px;white-space:pre-line}
.tutorbox textarea{width:100%;box-sizing:border-box}
.reqcard{border:1px solid var(--line);background:#fff;padding:14px 16px;margin:10px 0}
.reqcard .fbworks img{aspect-ratio:auto;max-height:260px;object-fit:contain;background:#F3EEE4}

/* Do you want to sell this piece? */
.sellq{border:2px solid var(--ink);background:#FBF8F2;padding:16px 18px 10px;margin:14px 0 18px;max-width:560px}
.sellq.on{border-color:var(--red)}
.sellq.sold{border:1px solid var(--line);padding:12px 16px}
.sellt{font:400 1.35rem/1.2 "Fraunces",Georgia,serif;margin:0 0 12px}
.sellrow{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin-bottom:10px}
.sellp span:first-child{display:block;font-size:.85rem;color:var(--soft);margin-bottom:4px}
.sellin{display:flex}
.sellin select{width:auto;border-right:0}
.sellin input{width:9em;font-size:1.15rem}
.sellshow{display:flex;gap:8px;align-items:center;padding-bottom:10px}
.sellhint{margin:6px 0 14px}
.chip.forsale{background:var(--red);color:var(--paper);border-color:var(--red)}

/* Signing up for your child */
.jn-family{border-top:1px solid var(--ink);margin-top:34px;padding-top:22px;max-width:720px}
.jn-family h2{border:0;padding:0;margin:0 0 10px}
.jn-family h3{margin:18px 0 6px}
.jn-family p,.jn-family li{line-height:1.6}
.jn-safe,.jn-steps{padding-left:20px}
.jn-safe li,.jn-steps li{margin:6px 0}
.checks small a{color:inherit}
.sellq.agree .ag-points{padding-left:20px}.sellq.agree .ag-points li{margin:6px 0;line-height:1.5;font-size:.95rem}

/* UX round 1 */
@media (max-width:700px){header.top nav.subnav{gap:0 16px;padding-right:28px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}header.top nav.subnav a{font-size:.9rem}}
input[type=file]{font-size:1rem}
input[type=file]::file-selector-button{font:500 1rem "IBM Plex Sans",system-ui,sans-serif;background:var(--ink);color:var(--paper);border:0;padding:12px 18px;margin-right:12px;cursor:pointer}

/* Orders */
.ordcard{border-top:1px solid var(--ink);padding:16px 0 10px;max-width:640px}
.ordcard h2{border:0;padding:0;margin:4px 0 8px}
.ordtrack{list-style:none;display:flex;gap:0;padding:0;margin:8px 0 10px}
.ordtrack li{flex:1;text-align:center;font-size:.85rem;padding:8px 4px;border:1px solid var(--line);color:var(--soft)}
.ordtrack li+li{border-left:0}
.ordtrack li.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pubask{display:block;border:1px solid var(--red);padding:10px 12px;margin-top:6px;background:#fff}
.pubask .chk{display:flex;gap:8px;margin:8px 0}

/* Ask the tutor */
.aitutor{border:1px solid var(--ink);background:#FBF8F2;padding:16px 18px 6px;margin:16px 0 20px;max-width:640px}
.aitutor h2{border:0;padding:0;margin:0 0 4px}
.aithread{max-height:420px;overflow-y:auto;margin:10px 0}
.aimsg{padding:10px 12px;margin:8px 0;line-height:1.55;font-size:.97rem}
.aimsg p{margin:.3em 0}
.aimsg.user{background:#EEE8DC;margin-left:18%}
.aimsg.assistant{background:#fff;border-left:3px solid var(--red);margin-right:6%}
.aiwho{display:block;font:500 .78rem "IBM Plex Mono",monospace;color:var(--red);margin-bottom:2px}
.sr{position:absolute;left:-9999px}

.aichars{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin:0 0 12px}
.aichar{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;background:#fff;color:var(--ink);border:1px solid var(--line);padding:8px;font:inherit;cursor:pointer}
.aichar[aria-checked="true"]{border:2px solid var(--red);padding:7px}
.aichar img,.aiav{width:44px;height:44px;object-fit:cover;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font:400 1.2rem "Fraunces",Georgia,serif}
.aichar b{font-size:.9rem}
.aichar span{font-size:.78rem;color:var(--soft);line-height:1.3}
.aichar .aiav{color:var(--paper);font:400 1.25rem "Fraunces",Georgia,serif;line-height:1}

/* Foundation Ready */
.fd-sell{max-width:760px}.fd-kick{font:500 .8rem "IBM Plex Mono",monospace;color:var(--red);margin:0}
.fd-steps-list{padding-left:20px}.fd-steps-list li{margin:10px 0;line-height:1.55}
.fd-price{font-size:1.1rem}.fd-price b{font:400 1.8rem "Fraunces",Georgia,serif}
.fd-count{margin:-4px 0 14px;color:var(--soft)}.fd-count b{font:400 1.6rem "Fraunces",Georgia,serif;color:var(--red)}
.fd-nav{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-wrap:wrap;gap:6px}
.fd-nav button{display:flex;align-items:center;gap:8px;background:#fff;color:var(--ink);border:1px solid var(--line);padding:8px 12px;font:inherit;font-size:.92rem;cursor:pointer}
.fd-nav button span{display:inline-flex;width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;background:var(--mist);font-size:.8rem}
.fd-nav button.done span{background:var(--ink);color:var(--paper)}
.fd-nav button[aria-current="step"]{border:2px solid var(--red);padding:7px 11px}
.fd-body h2{margin-top:6px}
.fd-course{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.fd-tally{color:var(--soft)}.fd-tally b{color:var(--ink);font:400 1.4rem "Fraunces",Georgia,serif}
.fd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:10px 0 16px}
.fd-pick{display:block;border:1px solid var(--line);background:#fff;padding:6px;cursor:pointer;font-size:.88rem;position:relative}
.fd-pick.on{border:2px solid var(--red);padding:5px}.fd-pick input{position:absolute;opacity:0}
.fd-pick img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--mist);margin-bottom:6px}
.fd-pick small{display:block;color:var(--soft)}
.fd-review{border-top:1px solid var(--ink);padding:12px 0;max-width:680px}
.fd-pages{list-style:none;padding:0;margin:10px 0}
.fd-pg{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:12px;align-items:start;border-top:1px solid var(--line);padding:12px 0}
.fd-pg img,.fd-pg .ph{width:96px;height:96px;object-fit:cover;background:var(--mist)}
.fd-pgt b{display:block}.fd-pgt small{display:block;color:var(--soft);margin-bottom:6px}.fd-pgt textarea{width:100%;box-sizing:border-box}
.fd-move{display:flex;flex-direction:column;gap:4px}.fd-move button{padding:6px 10px}
.fd-checks{list-style:none;padding:0}.fd-checks li{padding:6px 0;color:var(--soft)}.fd-checks li.ok{color:var(--ink)}
.fd-link{word-break:break-all;background:#fff;border:1px solid var(--line);padding:10px 12px}
.fd-next{margin-top:24px}
@media (max-width:560px){.fd-pg{grid-template-columns:72px minmax(0,1fr)}.fd-pg img,.fd-pg .ph{width:72px;height:72px}.fd-move{grid-column:2;flex-direction:row}}
.kid-fd{border-top:1px solid var(--line);margin:10px 0;padding-top:10px}.kid-fd .chk{display:flex;gap:8px;align-items:flex-start;font-size:.92rem;line-height:1.5}

/* Projects and applications */
.pw-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:10px 0 20px}
.pw-card{display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--ink);color:var(--ink);text-decoration:none}
.pw-card.own{border-top-color:var(--red)}.pw-card b{font:400 1.4rem/1.15 "Fraunces",Georgia,serif}.pw-card span{color:var(--soft);font-size:.92rem;line-height:1.45}
.pw-k{font:500 .78rem "IBM Plex Mono",monospace;color:var(--red)!important}.pw-m{margin-top:auto;color:var(--ink)!important;font-weight:500}
.pw-guide{display:flex;align-items:center;gap:10px;margin:0 0 12px}.pw-av{width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--paper);display:inline-flex;align-items:center;justify-content:center;font:400 1.1rem "Fraunces",Georgia,serif}
.pw-crit{padding-left:18px;color:var(--soft);font-size:.93rem}.pw-crit li{margin:4px 0}.pw-crit b{color:var(--ink)}
.pw-ack{border:2px solid var(--red);background:#fff;padding:12px 16px;margin:12px 0;max-width:640px}.pw-ack .chk{display:flex;gap:8px;margin:8px 0}
.fd-pg2{border-top:1px solid var(--line);padding:14px 0}.fd-pg2>b{display:block;margin-top:8px}.fd-pg2>small{display:block;color:var(--soft)}
.pg-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.pg-imgs{display:flex;gap:6px;flex-wrap:wrap}
.pg-imgs>img,.pg-imgs .ph{width:110px;height:110px;object-fit:cover;background:var(--mist)}.pg-ex{position:relative}.pg-ex img{width:70px;height:70px;object-fit:cover;display:block}
.pg-x{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;padding:0;font-size:.85rem;line-height:1;background:var(--ink);color:var(--paper);border:0}
.pg-opts{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:8px 0}.pg-opts label{font-size:.85rem;display:flex;flex-direction:column;gap:3px}.pg-opts select{width:auto}
.pg-picker{border:1px dashed var(--line);padding:10px;margin:6px 0 10px;background:#FBF8F2}
.pw-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin:4px 0 10px}.pw-pick button{background:#fff;border:1px solid var(--line);padding:4px;color:var(--ink);font-size:.75rem;text-align:left}
.pw-pick img{display:block;width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:3px}.pw-pick button:hover{border-color:var(--red)}
.fd-pg2 textarea{width:100%;box-sizing:border-box}
.pw-ver{border-top:1px solid var(--line);padding-top:8px}.pw-vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.pw-vp{display:block;border:1px solid var(--line);background:#fff;padding:4px;font-size:.78rem;position:relative;cursor:pointer}.pw-vp.on{border:2px solid var(--red);padding:3px}.pw-vp input{position:absolute;opacity:0}.pw-vp img{display:block;width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:3px}
.pw-over{color:var(--red)!important;font-weight:500}
@media (max-width:560px){.pg-imgs>img,.pg-imgs .ph{width:84px;height:84px}.pg-ex img{width:56px;height:56px}}
.kid-mods{list-style:none;padding:0;margin:6px 0}.kid-mods li{padding:8px 0;border-top:1px solid var(--line)}.kid-mods .chk{display:flex;gap:8px;margin-top:4px}

/* Job CV */
.jc-bar{display:flex;gap:4px;margin:6px 0 4px;max-width:520px}.jc-bar span{flex:1;height:5px;background:var(--line)}.jc-bar .done{background:var(--ink)}.jc-bar .on{background:var(--red)}
.jc-chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.jc-chip{background:#fff;color:var(--ink);border:1px solid var(--line);padding:9px 14px;font:inherit;font-size:.93rem;cursor:pointer}
.jc-chip[aria-checked=true],.jc-chip[aria-pressed=true]{border:2px solid var(--red);padding:8px 13px;font-weight:500}
.jc-part{border-top:1px solid var(--line);padding:12px 0}.jc-sugg{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.jc-s{background:#EEE8DC;border:0;color:var(--ink);padding:7px 11px;font:inherit;font-size:.88rem;text-align:left;cursor:pointer}.jc-s:hover{background:#E3DACB}
.jc-part input,.jc-b{width:100%;box-sizing:border-box}.jc-card{background:#fff;border:1px solid var(--line);padding:12px 14px;line-height:1.55}
.jc-warn{color:var(--red)!important}.jc-exp{border-top:1px solid var(--ink);padding:12px 0 6px;margin-top:10px}.jc-eh{display:flex;justify-content:space-between;align-items:center}
.jc-verbs{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 8px}.vb{background:#EEE8DC;border:0;color:var(--ink);padding:4px 9px;font:inherit;font-size:.8rem;cursor:pointer}
.jc-b{margin:4px 0}.jc-q{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr) auto;gap:6px;margin:4px 0}.jc-add{display:flex;gap:6px;max-width:420px}
.jc-nav{margin-top:22px}.jc-style{display:flex;gap:6px;margin:6px 0 12px}.jc-style button{background:#fff;color:var(--ink);border:1px solid var(--line);padding:8px 16px;font:inherit}.jc-style button[aria-checked=true]{border:2px solid var(--red);padding:7px 15px}
.cvwrap{background:#E8E2D6;padding:16px;overflow-x:auto}.cvp{background:#fff;max-width:600px;margin:0 auto;padding:30px 34px;font-size:.84rem;line-height:1.45;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.cvp h3{font:400 1.7rem/1.1 "Fraunces",Georgia,serif;margin:0}.cvc{color:var(--soft);font-size:.78rem;margin:4px 0}.cvrule{border-top:1px solid var(--ink);margin:8px 0 10px}.cvprof{margin:6px 0 4px}
.cvs h4{font:600 .7rem "IBM Plex Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin:12px 0 4px}.cvs ul{margin:2px 0;padding-left:16px}.cvs p{margin:2px 0}
.cvt{display:flex;justify-content:space-between;gap:8px}.cvt span,.cvo,.cvq span{color:var(--soft);font-size:.78rem}.cvq{display:flex;justify-content:space-between}.cve{margin-bottom:6px}
.cvp.creative{display:grid;grid-template-columns:34% 66%;padding:0}.cvband{background:var(--ink);color:var(--paper);padding:26px 18px}.cvband h3{color:var(--paper)}.cvband .cvc{color:#D9D2C4}.cvband .cvs h4{color:#F0B4A4}.cvband li,.cvband p{color:var(--paper)}.cvmain{padding:26px 22px}

/* Your art world */
.aw-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:center}
.aw-quote{font:italic 400 1.15rem/1.45 "Fraunces",Georgia,serif;color:var(--ink);max-width:30em}.aw-quote span{display:block;font:500 .75rem "IBM Plex Mono",monospace;font-style:normal;color:var(--soft);margin-top:6px;letter-spacing:.06em;text-transform:uppercase}
.aw-fig{margin:0;text-align:center}.aw-map{width:100%;max-width:300px;height:auto}.aw-key{list-style:none;padding:0;margin:8px auto 0;max-width:300px;text-align:left;font-size:.88rem}.aw-key li{display:flex;gap:8px;padding:3px 0;border-top:1px solid var(--line)}.aw-key b{min-width:2.2em;text-align:right}
.aw-week{border:1px solid var(--ink);background:#FBF8F2;padding:16px 20px;margin:24px 0}.aw-week h2{border:0;padding:0;margin:0 0 6px}
.aw-reply{background:#fff;border-left:3px solid var(--red);padding:12px 14px;margin:10px 0}.aw-tasks{list-style:none;padding:0;margin:8px 0}.aw-tasks li{border-top:1px solid var(--line);padding:9px 0}.aw-tasks .chk{display:flex;gap:10px;align-items:flex-start}
.aw-target{display:inline-block;background:#EEE8DC;font-size:.8rem;padding:1px 7px;margin-left:4px}
.aw-tbl{border-collapse:collapse;width:100%;max-width:520px;font-size:.92rem}.aw-tbl td,.aw-tbl th{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}.aw-tbl th{color:var(--soft);font-weight:500;font-size:.82rem}.aw-tbl .up{color:#2E7D4F;font-weight:600}
.aw-bal{display:flex;max-width:520px;height:32px;font-size:.82rem}.aw-bal span{display:flex;align-items:center;padding:0 10px;background:var(--ink);color:var(--paper);white-space:nowrap;overflow:hidden}.aw-bal .bz{background:#B4B8B9;color:var(--ink)}
@media (max-width:720px){.aw-head{grid-template-columns:minmax(0,1fr)}}

.aw-sell{max-width:980px}.aw-sellgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center}
.aw-bigmap{margin:0}.aw-bigmap svg{width:100%;height:auto}
.aw-lessons{padding-left:22px}.aw-lessons li{margin:10px 0;line-height:1.5}.aw-lessons b{display:block;font:400 1.15rem "Fraunces",Georgia,serif}.aw-lessons span{color:var(--soft)}
.aw-inc{padding-left:20px}.aw-inc li{margin:6px 0}
@media (max-width:760px){.aw-sellgrid{grid-template-columns:minmax(0,1fr)}}

/* Get your work in */
.pw-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 6px;max-width:640px}
.pw-counts div{background:#fff;border:1px solid var(--line);border-top:3px solid var(--ink);padding:10px 12px}
.pw-counts b{display:block;font:400 2rem/1.1 "Fraunces",Georgia,serif}.pw-counts span{font-size:.85rem;color:var(--soft)}
.pw-have{padding-left:20px}.pw-have li{margin:4px 0}
.ba-bar{height:8px;background:var(--mist);max-width:520px;margin:4px 0 10px}.ba-bar span{display:block;height:100%;width:0;background:var(--red);transition:width .3s}
/* Readiness for each course, and coursework */
.pw-ready{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:12px 0 18px}
.pw-rc{background:#fff;border:1px solid var(--line);border-top:3px solid var(--ink);padding:12px 14px;font-size:.92rem}
.pw-rc.warn{border-top-color:var(--red)}.pw-rc b{display:block;font:400 1.15rem/1.25 "Fraunces",Georgia,serif;margin-bottom:4px}
.pw-rc .days{font:400 1.8rem "Fraunces",Georgia,serif;color:var(--red)}.pw-rc p{margin:4px 0}.pw-rc .late{color:var(--red)}
.pw-todo{border-top:1px solid var(--line);padding:10px 0}.pw-todo .grid3{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:8px}
@media (max-width:640px){.pw-todo .grid3{grid-template-columns:1fr 1fr}.pw-counts{grid-template-columns:1fr 1fr 1fr}}
.pw-late{color:var(--red);font-size:.88rem;margin:4px 0 0}

/* Course testers */
.ctest{display:inline-block;font:500 .75rem "IBM Plex Mono",monospace;background:var(--red);color:var(--paper);padding:3px 7px;margin-bottom:4px}
.ltest{border:1px solid var(--red);background:#fff;padding:14px 16px 6px;margin:22px 0}.ltest h2{border:0;padding:0;margin:0 0 4px}.ltest textarea{width:100%;box-sizing:border-box}

/* Put Studio on your home screen */
.appcard{position:relative;border:2px solid var(--ink);background:#FBF8F2;padding:16px 18px 8px;margin:4px 0 22px;max-width:640px}
.appcard h2{border:0;padding:0;margin:0 0 6px;font-size:1.3rem}
.appx{position:absolute;top:6px;right:8px;background:transparent;color:var(--soft);border:0;font-size:1.5rem;line-height:1;padding:4px 8px;cursor:pointer}
.apphow{padding-left:20px;margin:8px 0}.apphow li{margin:5px 0;line-height:1.5}
.appshare{display:inline-block;border:1px solid var(--line);padding:0 5px;font-size:.85rem}
.appbtns{display:flex;flex-wrap:wrap;gap:8px}

.bulkfold{margin-top:28px;max-width:640px}.bulkfold .fs{display:block;font-size:.85rem;color:var(--soft)}

/* The Simple Studio */
.modebtn{display:block;margin:10px 0 0;font-size:.88rem}
@media (min-width:901px){.modebtn{display:inline-block;margin:0 0 0 12px;padding:6px 10px;align-self:center}}
.unlocks,.checklist{border:1px solid var(--line);border-left:4px solid var(--red);background:#FBF8F2;padding:14px 18px 6px;margin:4px 0 22px;max-width:640px}
.unlocks h2,.checklist h2{border:0;padding:0;margin:0 0 6px;font-size:1.25rem}
.unlocks ul,.checklist ul{list-style:none;padding:0;margin:8px 0}
.unlocks li{padding:6px 0;line-height:1.5;border-top:1px solid var(--line)}
.checklist li{padding:6px 0}.checklist li.ok{color:var(--soft)}
.seg{display:inline-flex;border:1px solid var(--ink)}.seg button{background:transparent;color:var(--ink);border:0;padding:9px 16px;font:inherit;cursor:pointer}.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* CreatED Classroom */
.cl-in{max-width:520px;margin:20px auto}.cl-logo{height:34px;width:auto;margin-bottom:10px}
.cl-box{border:2px solid var(--ink);background:#FBF8F2;padding:16px 18px 8px;margin:16px 0}.cl-box.quiet{border:1px solid var(--line)}.cl-box h2{border:0;padding:0;margin:0 0 6px}
#pcode{font:500 1.6rem "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;max-width:12em}
.cl-demo{font:500 .75rem "IBM Plex Mono",monospace;background:var(--red);color:var(--paper);padding:3px 7px;vertical-align:middle}
.cl-demobox{border:1px dashed var(--red);background:#fff;padding:10px 14px;margin:10px 0 18px}
.cl-school{border-top:1px solid var(--ink);margin-top:18px}
.cl-classes,.cl-pupils,.cl-works{list-style:none;padding:0;margin:10px 0 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.cl-classes a,.cl-pupils a,.cl-works a{display:flex;flex-direction:column;gap:3px;background:#fff;border:1px solid var(--line);padding:8px;color:var(--ink);text-decoration:none;font-size:.88rem;height:100%;box-sizing:border-box}
.cl-classes a{border-top:3px solid var(--ink);padding:12px}.cl-classes b{font:400 1.2rem "Fraunces",Georgia,serif}
.cl-pupils img,.cl-works img,.cl-pupils .ph,.cl-works .ph{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--mist);margin-bottom:4px}
.cl-pupils span,.cl-works span{color:var(--soft)}.cl-pupils a:hover,.cl-works a:hover{border-color:var(--ink)}
.cl-proj{border-left:3px solid var(--red);background:#FBF8F2;padding:10px 14px;margin:10px 0}.cl-proj h3{margin:0 0 4px}.cl-due{color:var(--red);margin:0 0 4px}
.cl-story{list-style:none;padding:0}.cl-story li{border-top:1px solid var(--line);padding:12px 0}.cl-story img{display:block;max-width:100%;max-height:70vh;height:auto}
.cl-note{background:#fff;border-left:3px solid var(--ink);padding:8px 12px;margin:8px 0}
.cl-notes{list-style:none;padding:0}.cl-notes li{border-top:1px solid var(--line);padding:10px 0}.cl-notes p{margin:4px 0}
.codesheet{margin-top:24px}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.codecard{border:1.5px dashed var(--ink);padding:14px;display:flex;flex-direction:column;gap:4px;background:#fff;break-inside:avoid}
.cc-logo{font:400 .9rem "Fraunces",Georgia,serif}.codecard b{font-size:1.25rem}.cc-class,.cc-how{font-size:.8rem;color:var(--soft)}.cc-code{font:500 1.6rem "IBM Plex Mono",monospace;letter-spacing:.1em}
@media print{body.printing-codes header,body.printing-codes footer,body.printing-codes .youngbar,body.printing-codes main>*:not(#codesheet),body.printing-codes .no-print{display:none!important}body.printing-codes #codesheet{display:block!important}body.printing-codes .cards{grid-template-columns:repeat(3,1fr)}}
.tnotes{border:1px solid var(--ink);background:#FBF8F2;padding:14px 18px 6px;margin:16px 0;max-width:640px}.tnotes h2{border:0;padding:0;margin:0 0 6px}

/* School gallery and exhibitions */
.sshare{border:1px solid var(--line);background:#FBF8F2;padding:14px 18px 6px;margin:16px 0;max-width:640px}.sshare h2{border:0;padding:0;margin:0 0 8px;font-size:1.2rem}
.sshare .seg{flex-wrap:wrap}.sshare .seg button[aria-checked="true"]{background:var(--ink);color:var(--paper)}
.gl-wall{list-style:none;padding:0;margin:16px 0;columns:4 200px;column-gap:14px}
.gl-wall li{break-inside:avoid;margin:0 0 16px;display:flex;flex-direction:column;gap:2px;font-size:.88rem}
.gl-pic{display:block;padding:0;border:0;background:transparent;cursor:zoom-in}.gl-pic img{display:block;width:100%;height:auto;border:2px solid var(--ink);border-bottom:0;padding:6px 6px 0;background:#fff;box-sizing:border-box}
.gl-wall span{color:var(--soft)}.gl-lv{font:500 .72rem "IBM Plex Mono",monospace}.gl-moves{display:flex;gap:4px;margin-top:4px}
.gl-exh{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}.gl-exh a{display:block;background:var(--ink);color:var(--paper);padding:16px;text-decoration:none;border-left:5px solid var(--red)}.gl-exh b{display:block;font:400 1.3rem "Fraunces",Georgia,serif}.gl-exh span{color:#D9D1C3;font-size:.85rem}
.gl-box{position:fixed;inset:0;background:rgba(28,27,24,.92);z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;color:var(--paper)}.gl-box img{max-width:100%;max-height:80vh}.gl-x{position:absolute;top:10px;right:14px;background:transparent;border:0;color:var(--paper);font-size:2rem;cursor:pointer}

.toshow+.toshow{margin-left:8px}
@media (max-width:520px){.tocourses{display:none}}
.loadfail{max-width:520px;margin:40px auto;text-align:left;border:2px solid var(--ink);background:#FBF8F2;padding:20px 22px 10px}.loadfail h1{font-size:1.6rem;margin:0 0 8px}

/* CreatED Canvas */
.cv-loop{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 18px}.cv-loop li{border:1px solid var(--ink);padding:5px 10px;font-size:.88rem;background:#fff}.cv-loop li+li::before{content:"\2192  ";color:var(--red)}
.cv-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:22px;align-items:start}
.cv-start img{display:block;width:100%;height:auto;border:2px solid var(--ink)}.cv-start figcaption{font-size:.85rem;color:var(--soft);margin-top:4px}
.cv-new,.cv-hist{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.cv-new img,.cv-hist img{display:block;width:100%;height:auto;border:1px solid var(--line);background:#fff}
.cv-hist li span{display:block;font-size:.88rem;margin-top:4px}.cv-judge textarea{width:100%;box-sizing:border-box;margin-top:6px}
.cvlink{border:1px solid var(--line);background:#FBF8F2;padding:14px 18px 6px;margin:16px 0;max-width:640px}.cvlink h2{border:0;padding:0;margin:0 0 6px;font-size:1.2rem}
.aitag{display:inline-block;font:500 .72rem "IBM Plex Mono",monospace;background:var(--ink);color:var(--paper);padding:3px 7px;margin:4px 0}
@media (max-width:700px){.cv-grid{grid-template-columns:1fr}}
header.top .tocourses{margin-left:8px !important}

/* Paid courses */
.cbuy{border:2px solid var(--ink);background:#FBF8F2;padding:16px 18px 8px;margin:14px 0 20px;max-width:640px}
.cbuy-price b{font:400 1.8rem "Fraunces",Georgia,serif}
.clessons li{margin:6px 0}

/* About this work: brief, concept, themes, influences, skills */
.aboutw{max-width:680px;margin:16px 0}.aboutw .fs{display:block;font-size:.85rem;color:var(--soft)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px}.chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ink);padding:3px 9px;font-size:.85rem;background:#fff}
.chip-course{border-style:dashed}.chipx{background:transparent;border:0;padding:0 2px;cursor:pointer;color:var(--soft);font-size:1rem;line-height:1}
.ab-hist{padding-left:18px}.ab-hist li{border-top:1px solid var(--line);padding:6px 0}.ab-hist p{margin:2px 0}
.aistyle select{font-size:.85rem;padding:3px 6px}

/* Network */
.nw-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.nw-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin:8px 0 18px}
.nw-card{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);padding:10px 12px}.nw-card.vip{border-left:4px solid var(--red)}
.nw-body{flex:1;display:flex;flex-direction:column;gap:2px}.nw-body b{font-size:1.02rem}
.nw-star{background:transparent;border:0;font-size:1.4rem;line-height:1;cursor:pointer;color:var(--red);padding:0 2px}
.nw-form{border:2px solid var(--ink);background:#FBF8F2;padding:14px 18px 6px;margin:12px 0 20px;max-width:760px}.nw-form h2{border:0;padding:0;margin:0 0 8px}
.nw-works{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}.nw-works label{display:flex;flex-direction:column;gap:3px;font-size:.8rem;cursor:pointer}.nw-works img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--mist)}
.nw-pick{list-style:none;padding:0;columns:2 220px}.nw-out{list-style:none;padding:0}.nw-out li{padding:6px 0;border-top:1px solid var(--line)}
.nw-due{border-left:4px solid var(--red);background:#fff;padding:8px 14px;margin:10px 0}.nw-due h2{border:0;padding:0;margin:0 0 4px;font-size:1.1rem}
.nw-body .chip{align-self:flex-start;font:500 .78rem "IBM Plex Sans",system-ui,sans-serif;padding:1px 8px;margin:2px 0 3px;border-color:var(--line);background:var(--mist);text-transform:capitalize;width:auto}
/* Courses: Your courses, and More for you */
.csec{margin-top:26px}.cpick{border:2px solid var(--red)!important}.ckick{display:inline-block;font:500 .72rem "IBM Plex Mono",monospace;background:var(--red);color:var(--paper);padding:2px 7px;margin-bottom:4px}
.cextra .cbody{padding:14px 16px}.cextra{background:#FBF8F2}

/* Your shop */
.sh-set,.sh-edit{border:1px solid var(--line);background:#FBF8F2;padding:14px 18px 6px;margin:14px 0 20px;max-width:760px}.sh-set h2,.sh-edit h2{border:0;padding:0;margin:0 0 8px}
.sh-items{list-style:none;padding:0;max-width:760px}.sh-items li{display:flex;gap:12px;align-items:center;border-top:1px solid var(--line);padding:8px 0}.sh-items li>div{flex:1}
.sh-thumb{width:64px;height:64px;background:var(--mist);flex:none}.sh-thumb img{width:64px;height:64px;object-fit:cover;display:block}
.sh-photos{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}.sh-photos span{display:flex;flex-direction:column;gap:2px;align-items:flex-start}.sh-photos img{width:90px;height:90px;object-fit:cover}
.sh-opt{display:flex;gap:6px;margin:4px 0}
.sendlate{border-left-color:var(--red)!important}

/* ===== The new look (members with new_look): flat pages, glass only on the two floating bars ===== */
html.nl{--paper:#FEFDFB;--ink:#1C1B18;--line:#EAE7E1;--soft:#5C5C58;--mist:#F6F4F0}
html.nl body{background:#FEFDFB;color:#1C1B18;font-family:"IBM Plex Sans","Helvetica Neue",system-ui,sans-serif}
html.nl #main{max-width:560px;margin:0 auto;padding:96px 20px calc(130px + env(safe-area-inset-bottom,0px));box-sizing:border-box}
html.nl #foot{display:none}
html.nl h1,html.nl h2,html.nl h3{font-family:"Fraunces",Georgia,serif;font-weight:500;letter-spacing:-.01em}
html.nl h2{border:0}
.nl-glass{background:rgba(254,253,251,.62);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);border:1px solid rgba(255,255,255,.75);box-shadow:0 10px 30px rgba(28,27,24,.12)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nl-glass{background:#FEFDFB;border-color:#EAE7E1}}
@media (prefers-reduced-transparency:reduce){.nl-glass{background:#FEFDFB;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:#EAE7E1}}
.nl-top{position:fixed;z-index:30;top:calc(16px + env(safe-area-inset-top,0px));left:12px;right:12px;max-width:536px;margin:0 auto;height:60px;box-sizing:border-box;padding:6px 6px 6px 18px;display:flex;align-items:center;justify-content:space-between;border-radius:30px}
.nl-logo img{display:block;height:28px;width:auto}.nl-logo{text-decoration:none;color:#1C1B18}
.nl-typeset{font:500 1.35rem "Fraunces",Georgia,serif;border-bottom:2px solid #C4472A;padding-bottom:1px}
.nl-plus{width:48px;height:48px;border-radius:24px;background:#C4472A;color:#fff;display:flex;align-items:center;justify-content:center}
.nl-bot{position:fixed;z-index:30;left:12px;right:12px;bottom:calc(28px + env(safe-area-inset-bottom,0px));max-width:536px;margin:0 auto;height:68px;box-sizing:border-box;padding:6px;display:flex;gap:2px;border-radius:34px;box-shadow:0 14px 34px rgba(28,27,24,.18)}
.nl-bot>a{flex:1 1 0;min-width:0;height:56px;border-radius:28px;color:#1C1B18;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;font:500 9.5px "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.02em}
.nl-bot>a[aria-current="page"]:not(.nl-me){background:#1C1B18;color:#fff}
.nl-bot>a.nl-me{flex:0 0 56px}.nl-me span{width:40px;height:40px;border-radius:20px;overflow:hidden;background:#C4472A;color:#fff;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-sizing:border-box}
.nl-me span b{font:500 18px "Fraunces",Georgia,serif}.nl-me span img{width:100%;height:100%;object-fit:cover}.nl-me.on span{border-color:#1C1B18;box-shadow:0 0 0 2px #1C1B18}
.nl-acting{position:fixed;z-index:29;top:calc(84px + env(safe-area-inset-top,0px));left:12px;right:12px;max-width:536px;margin:0 auto;border-radius:16px}
/* the new look's own screens */
.nl-lead{margin:0 0 14px;font-size:15px;color:#5C5C58}
.nl-chips{display:flex;gap:8px;overflow-x:auto;margin:0 0 18px;padding-bottom:2px}.nl-chips button,.nl-chips a{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:20px;border:1.5px solid #EAE7E1;background:transparent;color:#1C1B18;font:500 14px "IBM Plex Sans",sans-serif;white-space:nowrap;cursor:pointer;text-decoration:none}
.nl-chips [aria-pressed="true"]{background:#1C1B18;color:#fff;border-color:#1C1B18;font-weight:600}
.nl-feed{display:flex;flex-direction:column;gap:24px}.nl-card{display:flex;flex-direction:column;gap:12px}
.nl-card .pic{display:block;border-radius:24px;overflow:hidden;background:#F6F4F0}.nl-card .pic img{display:block;width:100%;height:auto}
.nl-card .row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.nl-card .t{font-size:17px;font-weight:600}.nl-card .w{font-size:14px;color:#5C5C58}
.nl-pill{display:inline-flex;align-items:center;height:44px;padding:0 16px;border-radius:22px;border:1.5px solid #1C1B18;color:#1C1B18;font:600 14px "IBM Plex Sans",sans-serif;text-decoration:none;white-space:nowrap;background:transparent}
.nl-pill.dark{background:#1C1B18;color:#fff}
.nl-panel{background:#F6F4F0;border-radius:24px;padding:16px}
.nl-label{font:500 11px "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.04em;color:#5C5C58;margin:22px 0 8px}
.nl-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.nl-item{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:#1C1B18}.nl-item .pic{border-radius:18px;overflow:hidden;background:#F6F4F0;aspect-ratio:1}.nl-item .pic img{width:100%;height:100%;object-fit:cover;display:block}
.nl-item .n{font-weight:600;font-size:15px}.nl-item .m{font-size:13px;color:#5C5C58}.nl-item .p{font-weight:600}.nl-item.grey{opacity:.5}.nl-item .note{font-size:12px;color:#C4472A}
.nl-list{list-style:none;padding:0;margin:0}.nl-list li{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid #EAE7E1}.nl-list .num{font:500 13px "IBM Plex Mono",monospace;width:28px;color:#5C5C58}

.nl-cur h2{margin:10px 0 2px;font-size:1.5rem}.nl-cthumb{border-radius:18px;overflow:hidden;background:#EAE7E1;aspect-ratio:16/9}.nl-cthumb img{width:100%;height:100%;object-fit:cover;display:block}
.nl-prof{display:flex;gap:16px;align-items:center;margin:4px 0 10px}.nl-prof h2{margin:0;font-size:1.6rem}.nl-face{width:84px;height:84px;border-radius:42px;overflow:hidden;background:#C4472A;color:#fff;display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer}
.nl-face b{font:500 34px "Fraunces",Georgia,serif}.nl-face img{width:100%;height:100%;object-fit:cover}.nl-bio{margin:6px 0 12px}.w{color:#5C5C58}
.nl-acts{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}.nl-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.nl-grid3 img{width:100%;aspect-ratio:1;object-fit:cover;display:block;border-radius:6px}
.nl-sell{margin-top:24px}.nl-sell h3{margin:0 0 4px}
html.nl .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* the new look sits inside the old header element: undo its styles there */
html.nl header.top{border:0;background:none;padding:0;margin:0;height:0;position:static}
html.nl header.top nav.nl-bot{display:flex!important;flex-direction:row;gap:2px;padding:6px}
html.nl header.top nav.nl-bot a{padding:0;border-bottom:0;font-size:9.5px}
html.nl .skip{position:absolute;left:-9999px;top:auto}html.nl .skip:focus{left:20px;top:90px;z-index:40;background:#fff;padding:6px 10px}
html.nl a.nl-item,html.nl a.nl-item:hover{color:#1C1B18;text-decoration:none}html.nl .nl-item .note{color:#C4472A}


/* Course rhythm and summary */
.crhythm{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:6px 0 10px}.streak{display:inline-block;background:var(--red);color:var(--paper);font:500 .8rem "IBM Plex Mono",monospace;padding:3px 10px;border-radius:12px}
.sum-stats{display:flex;flex-wrap:wrap;gap:18px;margin:6px 0 16px}.sum-stats b{font:500 1.6rem "Fraunces",Georgia,serif;margin-right:4px}
.sum-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}.sum-grid li{display:flex;flex-direction:column;gap:3px;font:500 .72rem "IBM Plex Mono",monospace;color:var(--soft)}.sum-grid img,.sum-grid .lph{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--line);display:block}
.sum-next a{color:var(--ink)}.cheers{margin:8px 0}

/* The Shop, part 2: the basket */
.nl-basket{position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:#1C1B18;margin-left:auto;margin-right:8px}
.nl-basket b{position:absolute;top:2px;right:0;min-width:18px;height:18px;border-radius:9px;background:#C4472A;color:#fff;font:600 11px/18px "IBM Plex Sans",sans-serif;text-align:center;padding:0 4px}
.bk-group{border:1px solid #D8D0C2;padding:14px 16px;margin:16px 0;background:#FBF8F2}
.bk-group h2{margin:0 0 8px}
.bk-line{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid #EAE7E1}
.bk-line img{width:64px;height:64px;object-fit:cover;display:block;background:#EAE7E1}
.bk-line .bk-why{color:#C4472A;font-size:.85rem}
.bk-line select{padding:4px 6px}
.bk-sum{border-top:1px solid #D8D0C2;margin-top:6px;padding-top:8px}
.bk-sum p{margin:3px 0;display:flex;justify-content:space-between;gap:12px}
.bk-sum .bk-total{font-weight:600}
.ordlines{margin:6px 0 10px;padding-left:18px}
/* Join: Which is right for me? */
.jn-choose{margin:14px 0}.jn-q{border:0;padding:0;margin:0 0 12px}.jn-q legend{font-weight:600;margin-bottom:6px}.jn-q button{margin:0 4px 6px 0}.jn-q button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* Update 77: the work page (Complete · Change; folds), and rounded everywhere */
.stageline{margin:10px 0 4px}.linkish{background:none;border:0;padding:0;color:var(--red);text-decoration:underline;cursor:pointer;font:inherit;border-radius:0}
.workfolds > .fold,.workfolds > div > .fold{margin:0 0 10px}
.askperson{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}
/* Rounded everywhere (old look and new): capsule buttons; fields, boxes and panels rounded by about 12px. */
button,.btn,a.btn,summary.btn,.pill,.jn-int button,.mtabs a,.fd-nav button,.chip,.tagpick label,.seg{border-radius:999px}
input[type=text],input[type=email],input[type=date],input[type=number],input[type=search],input[type=tel],input[type=url],select,textarea{border-radius:12px}
.note,.fold,details.ed,.ed,.choice,.chip-btn,.finishbox,.checks,.welcome,.scbox,.preview,.snap,.next,.cp ul,.cp .cp-new,.mmsg,.mcard,.jn-lv,.memb,.kid,.askw,.reqcard,.sellq,.ordcard,.pubask,.aitutor,.aichar,.fd-pick,.fd-link,.pw-card,.pw-vp,.aw-week,.pw-counts div,.pw-rc,.ltest,.appshare,.unlocks,.checklist,.tnotes,.sshare,.cvlink,.nw-card,.sh-set,.sh-edit,.bk-group,.frame,.picks button,.numgrid button,.aithread,.sellbox,.cl-classes a,.cl-pupils a,.cl-works a{border-radius:12px}
.art,.workimg,.portfolio a.pic,.masonry a.pic,.hero a.pic,.recent a,.worklist img,.worklist .ph,.entry-card img,.cv-new img,.cv-hist img,.wipwall a.pic.nopic{border-radius:12px;overflow:hidden}
.stages{border-radius:999px;overflow:hidden}.stages button{border-radius:0}
.choice,.chip-btn,.picks button,.numgrid button,.aichar{border-radius:12px}
.linkish,.nl-plus,.nl-basket{border-radius:999px}.linkish{border-radius:0}
.fold>summary{border-radius:12px}
.lothers{margin:28px 0 8px}.lothers-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}
.lothers-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;border-radius:12px;background:#EAE7E1}
.cfshare{margin-top:16px}
/* Update 78: Where does it go?, and catalogues */
.wherego{margin-top:16px}
.catlist{list-style:none;padding:0}.catlist li{padding:10px 0;border-bottom:1px solid var(--line)}
.catpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin:10px 0 16px}
.catw{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:12px;padding:8px;cursor:pointer;position:relative}
.catw.on{border-color:var(--red);box-shadow:0 0 0 2px var(--red) inset}.catw input{position:absolute;top:10px;left:10px}
.catw img,.catw>span{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;background:#EAE7E1;display:block}
.catsend{margin-top:26px;border-top:1px solid var(--line);padding-top:10px}.catpeople{display:flex;flex-wrap:wrap;gap:4px 18px}
.catlinks,.catsent{list-style:none;padding:0}.catlinks li,.catsent li{padding:8px 0}.catlink{max-width:420px;display:inline-block;width:auto;min-width:260px}
/* Update 79: disciplines */
.dcard h2{margin-top:0}.dpick{display:flex;flex-wrap:wrap;gap:6px;border:0;overflow:visible}.dpick button{border:1px solid var(--ink);background:#F8F4EC;color:var(--ink);flex:0 0 auto}.dpick button[aria-checked="true"]{background:var(--ink);color:var(--paper)}
.nl-disc select{margin:6px 0 14px;width:auto;min-width:200px}
.dcard{max-width:var(--wrap,1100px);margin:16px auto 0;width:calc(100% - 32px)}
/* Update 80: the new look on tablets and computers, for every level */
.nl-spaces,.nl-search,.nl-me-top{display:none}
.nl-plusw{position:relative}.nl-plus{border:0;padding:0;cursor:pointer}
.nl-plusm{position:absolute;right:0;top:56px;z-index:40;border-radius:18px;padding:6px;display:flex;flex-direction:column;min-width:190px}.nl-plusm[hidden]{display:none}
.nl-plusm a{padding:12px 14px;border-radius:12px;color:#1C1B18;text-decoration:none;font-weight:500}.nl-plusm a:hover{background:#F6F4F0}
.nl-prog{height:6px;border-radius:3px;background:#EAE7E1;overflow:hidden;margin:6px 0 10px}.nl-prog span{display:block;height:100%;background:#C4472A}
.nl-views{display:flex;gap:6px;margin:0 0 14px}.nl-views button{height:34px;padding:0 14px;border-radius:17px;border:1.5px solid #EAE7E1;background:transparent;color:#1C1B18;font:500 13px "IBM Plex Sans",sans-serif}.nl-views [aria-pressed="true"]{background:#1C1B18;color:#fff;border-color:#1C1B18}
/* Grid view on phones: a sea of thumbnails, no text; tap one for its title and artist */
.nl-feed.nl-gridv{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.nl-gridv .nl-card{position:relative;gap:0}.nl-gridv .nl-card .pic{border-radius:4px;aspect-ratio:1}.nl-gridv .nl-card .pic img{width:100%;height:100%;object-fit:cover}
.nl-gridv .nl-card .row{display:none}.nl-gridv .nl-card.cap .row{display:flex;position:absolute;left:0;right:0;bottom:0;padding:6px;background:rgba(254,253,251,.92);border-radius:0 0 4px 4px}.nl-gridv .nl-card.cap .nl-pill{display:none}
.nl-gridv .nl-card.cap .t{font-size:12px}.nl-gridv .nl-card.cap .w{font-size:11px}
.nl-searchbig input{width:100%;height:52px;border-radius:26px;padding:0 20px;font-size:17px;border:1.5px solid #EAE7E1;background:#F6F4F0;box-sizing:border-box;margin:0 0 10px}
.nl-list a{color:#1C1B18;text-decoration:none}
/* Tablets: the floating bottom bar, centred and narrower; the Shop in three columns */
@media (min-width:600px){
  .nl-bot{max-width:440px}
  .nl-grid{grid-template-columns:repeat(3,1fr)}
}
/* Computers: one top bar (logo, the four spaces, Search, the + and your picture); no bottom bar */
@media (min-width:1024px){
  html.nl #main{max-width:1200px;padding:112px 32px 60px}
  .nl-top{max-width:1240px;left:24px;right:24px;height:64px;gap:16px;justify-content:flex-start}
  .nl-top .nl-logo{margin-right:8px}
  .nl-spaces{display:flex;gap:4px}
  .nl-spaces a{display:flex;align-items:center;gap:6px;height:44px;padding:0 16px;border-radius:22px;color:#1C1B18;text-decoration:none;font:500 14px "IBM Plex Sans",sans-serif}
  .nl-spaces a svg{width:20px;height:20px}
  .nl-spaces a[aria-current="page"]{background:#1C1B18;color:#fff}
  .nl-search{display:block;margin-left:auto;flex:0 1 300px}.nl-search input{width:100%;height:44px;border-radius:22px;border:1.5px solid #EAE7E1;background:rgba(246,244,240,.8);padding:0 18px;box-sizing:border-box;font:inherit}
  .nl-top .nl-basket{margin-left:0;margin-right:0}
  .nl-me-top{display:flex;width:48px;height:48px;align-items:center;justify-content:center;text-decoration:none}
  html.nl header.top nav.nl-bot,.nl-bot{display:none!important}
  .nl-acting{max-width:1240px;top:96px}
  /* Showcase: a staggered grid of 3 columns, 4 on wide screens */
  .nl-views{display:none}
  .nl-feed.nl-stagger,.nl-feed.nl-stagger.nl-gridv{display:block;column-count:3;column-gap:24px}.nl-stagger .nl-card{break-inside:avoid;margin:0 0 28px;position:static}
  .nl-stagger.nl-gridv .nl-card .row{display:flex;position:static;background:none;padding:0}.nl-stagger.nl-gridv .nl-card .pic{aspect-ratio:auto;border-radius:24px}.nl-stagger.nl-gridv .nl-card .pic img{height:auto}.nl-stagger.nl-gridv .nl-pill{display:inline-flex}
  /* Courses: the Carry on card with Up next beside it */
  .nl-carry{display:grid;grid-template-columns:3fr 2fr;gap:24px;align-items:start}.nl-carry .nl-upnext .nl-label{margin-top:0}
  html.nl #main .nl-feed:not(.nl-stagger){display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
}
@media (min-width:1400px){.nl-feed.nl-stagger,.nl-feed.nl-stagger.nl-gridv{column-count:4}}
/* Update 82: quick fixes. Old header and link styles kept leaking into the new-look bar; these stop them. */
html.nl .frame{border:0;margin:0 auto;max-width:none;min-height:0}
html.nl header.top nav.nl-spaces{border:0;padding:0;flex-wrap:nowrap;gap:4px}
html.nl header.top nav.nl-spaces a,html.nl header.top nav.nl-spaces a:hover{border-bottom:0;color:#1C1B18}
html.nl header.top nav.nl-spaces a[aria-current="page"],html.nl header.top nav.nl-spaces a[aria-current="page"]:hover{color:#fff}
html.nl .nl-logo,html.nl .nl-logo:hover{text-decoration:none;border:0;color:#1C1B18}.nl-typeset{border-bottom:0;padding-bottom:0}
/* Form fields: the same height, type size and width */
html.nl input:not([type]),html.nl input[type=text],html.nl input[type=email],html.nl input[type=date],html.nl input[type=number],html.nl input[type=tel],html.nl input[type=url],html.nl input[type=password],html.nl select,html.nl textarea{min-height:44px;font-size:16px;border-radius:12px;box-sizing:border-box}
html.nl input:not([type]),html.nl input[type=tel],html.nl input[type=url],html.nl input[type=password]{width:100%;padding:10px 12px;border:1px solid #1C1B18;background:#F8F4EC;color:#1C1B18;font-family:inherit}
@media (min-width:1024px){
  /* The top bar runs edge to edge, attached to the top */
  .nl-top{top:0;left:0;right:0;max-width:none;margin:0;height:64px;padding:0 32px;border-radius:0;border:0;border-bottom:1px solid #E7E2D9;background:#fff;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  html.nl header.top nav.nl-spaces a{padding:0 16px;height:44px}
  html.nl #main{padding-top:96px}
  .nl-acting{top:76px}
}
/* Update 83: multi-buy deals and free postage */
.sh-dlist{list-style:none;padding:0;margin:8px 0}.sh-dlist li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.sh-dedit{border-top:1px solid var(--line);padding-top:10px;margin-top:6px}
.sh-tier{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:6px 0}.sh-tier label{display:flex;align-items:center;gap:6px;font-weight:400;margin:0}.sh-tier input{width:6.5em}
html.nl .sh-tier input{width:7em}
.bk-sum .bk-deal{font-size:.92rem;color:var(--soft)}.bk-sum .bk-saving{font-weight:600}
.nl-item .tags{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;color:#5C5C58}.nl-item .tags .mb{border:1px solid currentColor;border-radius:999px;padding:0 8px}
.bk-sum p>span:last-child{white-space:nowrap}
.sh-tier{gap:6px 10px}html.nl .sh-tier input{width:6.5em}
/* Update 85: Studio home (brief 04). Phone first; computers (1024px and up) get two columns with Your Studio at the side. */
html.nl.nl-home #main{padding-bottom:calc(130px + env(safe-area-inset-bottom,0px))}
.nh{display:flex;flex-direction:column;gap:20px}
.nh-main{display:flex;flex-direction:column;gap:32px;min-width:0}
.nh p{margin:0}
html.nl .nh-kick{font:600 12px "IBM Plex Sans","Helvetica Neue",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#5F5B54;margin:0 0 12px}
html.nl .nh-btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border-radius:22px;background:#1C1B18;color:#fff;border:1.5px solid #1C1B18;font:500 15px "IBM Plex Sans","Helvetica Neue",sans-serif;text-decoration:none;white-space:nowrap;box-sizing:border-box}
html.nl .nh-btn:hover{color:#fff;background:#3A3833}
html.nl .nh-btn.quiet{background:#fff;color:#1C1B18;border-color:#E7E2D9}html.nl .nh-btn.quiet:hover{border-color:#1C1B18;color:#1C1B18}
.nh-empty{color:#5F5B54;font-size:15px;line-height:1.5}.nh-empty+p{margin-top:12px}
/* Your Studio: on phones and tablets one closed drop-down at the top */
html.nl .nh-drop{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:0 20px;border-radius:18px;border:0;background:#F3F0EA;font:500 16px "IBM Plex Sans","Helvetica Neue",sans-serif;color:#1C1B18;cursor:pointer;text-align:left}
.nh-drop span{margin-left:auto;display:flex;transition:transform .2s}.nh-drop[aria-expanded="true"] span{transform:rotate(180deg)}
html.nl .nh-places>.nh-kick{display:none}
.nh-placelist{display:none;padding:0 20px 8px}
.nh-places.open{background:#F3F0EA;border-radius:18px}.nh-places.open .nh-placelist{display:block}
.nh-place{border-top:1px solid #E2DDD3;padding:10px 0}
html.nl a.nh-pl{display:flex;align-items:center;min-height:36px;text-decoration:none;color:#1C1B18}
.nh-pl b{display:block;font:600 15px "IBM Plex Sans","Helvetica Neue",sans-serif}.nh-pl small,.nh-pl svg{display:none}
.nh-pages{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;column-gap:20px}
html.nl .nh-pages a{display:flex;align-items:center;min-height:44px;color:#1C1B18;font-size:15px;text-decoration:none}
/* The greeting */
.nh-hello>p{font:500 13px "IBM Plex Sans","Helvetica Neue",sans-serif;color:#5F5B54}
html.nl .nh-hello h1{margin:4px 0 0;font:400 32px/1.1 "Fraunces",Georgia,serif;letter-spacing:-.01em}
/* Needs you today: two cards on a phone, three on a computer, then "N more" */
.nh-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.nh-card{background:#F3F0EA;border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:10px;min-width:0;box-sizing:border-box}
.nh-ct{display:flex;align-items:center;gap:10px;color:#1C1B18}.nh-ct svg{flex:none}.nh-ct b{font:600 15px "IBM Plex Sans","Helvetica Neue",sans-serif}
.nh-card>p:nth-child(2){font:400 15px/1.45 "IBM Plex Sans","Helvetica Neue",sans-serif;color:#5F5B54}
.nh-card .nl-prog{margin:0;background:#E2DDD3}
.nh .nh-go{margin-top:auto;padding-top:6px}
.nh-card:nth-child(n+3){display:none}.nh-needs.all .nh-card{display:flex}
html.nl .nh-more{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;padding:0;background:none;border:0;border-radius:0;color:#1C1B18;font:500 15px "IBM Plex Sans","Helvetica Neue",sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left}
html.nl .nh-more-c,html.nl .nh-needs.all .nh-more{display:none}
/* Your work: six recent finished pieces as squares */
.nh-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
html.nl .nh-head h2{margin:0;font:400 24px "Fraunces",Georgia,serif}
.nh-count{display:none;font:400 14px "IBM Plex Sans","Helvetica Neue",sans-serif;color:#5F5B54}
html.nl a.nh-all{margin-left:auto;font:500 15px "IBM Plex Sans","Helvetica Neue",sans-serif;color:#1C1B18;white-space:nowrap}
.nh-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
html.nl a.nh-tile{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:#1C1B18;min-width:0}
.nh-tile .pic{display:block;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#F3F0EA}
.nh-tile .pic img{width:100%;height:100%;object-fit:cover;display:block}
.nh-tile b{font:500 13px/1.3 "IBM Plex Sans","Helvetica Neue",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh-tile>span:not(.pic){font:400 13px "IBM Plex Sans","Helvetica Neue",sans-serif;color:#5F5B54;margin-top:-4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* One next step, with Not now */
.nh-step{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:18px;border:1.5px solid #E7E2D9}
.nh-small{font:500 13px "IBM Plex Sans","Helvetica Neue",sans-serif;color:#5F5B54}
html.nl .nh-step h2{margin:4px 0;font:400 21px "Fraunces",Georgia,serif}
.nh-stepw>p:last-child{font:400 15px/1.5 "IBM Plex Sans","Helvetica Neue",sans-serif;color:#5F5B54}
.nh .nh-acts{display:flex;gap:10px;align-items:center;padding-top:8px}
html.nl .nh-later{min-height:44px;padding:0 8px;background:none;border:0;border-radius:0;color:#5F5B54;font:500 15px "IBM Plex Sans","Helvetica Neue",sans-serif;cursor:pointer}
/* Your Showcase page and Your shop */
.nh-panels,.nh-clist{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.nh-panel{background:#F3F0EA;border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:6px}
html.nl .nh-panel h2{margin:0;font:400 22px "Fraunces",Georgia,serif}
.nh-panel>p:nth-of-type(1){font:400 15px "IBM Plex Sans","Helvetica Neue",sans-serif;color:#5F5B54}.nh .nh-panel>p:last-child{padding-top:10px}
/* A Collector's courses */
html.nl a.nh-course{display:flex;flex-direction:column;gap:8px;background:#F3F0EA;border-radius:18px;padding:20px;text-decoration:none;color:#1C1B18}
.nh-course b{font:600 16px "IBM Plex Sans","Helvetica Neue",sans-serif}.nh-course span{font-size:14px;color:#5F5B54}.nh-course .nl-prog{margin:0;background:#E2DDD3}
@media (min-width:600px){
  html.nl.nl-home #main{max-width:760px}
  .nh-cards,.nh-panels,.nh-clist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nh-count{display:inline}.nh-n{display:none}
}
@media (min-width:1024px){
  html.nl.nl-home #main{max-width:1320px;padding:104px 32px 72px}
  .nh{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
  .nh-main{grid-column:1;grid-row:1;gap:44px}
  .nh-places{grid-column:2;grid-row:1}
  html.nl .nh-drop{display:none}
  html.nl .nh-places>.nh-kick{display:block;margin-bottom:8px}
  .nh-placelist{display:block;padding:0}.nh-places.open{background:none}
  .nh-place{border-top:1px solid #E7E2D9;padding:0}
  html.nl a.nh-pl{gap:12px;padding:14px 4px;min-height:44px}
  .nh-pl>span{flex:1 1 auto;min-width:0}.nh-pl b{font:500 16px "IBM Plex Sans","Helvetica Neue",sans-serif}
  .nh-pl small{display:block;font:400 13px/1.4 "IBM Plex Sans","Helvetica Neue",sans-serif;color:#5F5B54;margin-top:2px}
  .nh-pl svg{display:block;flex:none;color:#5F5B54}
  .nh-pages{display:none}
  .nh-hello>p{font-size:14px}
  html.nl .nh-hello h1{margin-top:6px;font-size:44px}
  html.nl .nh-kick{font-size:13px;margin-bottom:14px}
  .nh-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .nh-card:nth-child(3){display:flex}.nh-card:nth-child(n+4){display:none}.nh-needs.all .nh-card{display:flex}
  html.nl .nh-more-p{display:none}html.nl .nh-more-c{display:inline-flex}html.nl .nh-needs.all .nh-more{display:none}
  .nh-head{gap:16px;margin-bottom:16px}html.nl .nh-head h2{font-size:28px}
  .nh-tiles{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}.nh-tile b{font-size:15px}
  .nh-clist{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nh-step{flex-direction:row;flex-wrap:wrap;align-items:center;gap:24px;padding:24px 28px}.nh-stepw{flex:1 1 320px;min-width:0}
  html.nl .nh-step h2{font-size:22px}.nh .nh-acts{padding-top:0}
}
/* The one-time career question, as a light bordered panel like the next step */
.nh .welcome{border:1.5px solid #E7E2D9;border-radius:18px;padding:20px;margin:0}
html.nl .nh .welcome h2{margin:0 0 6px;font:400 21px "Fraunces",Georgia,serif}
.nh .welcome>p{font:400 15px/1.5 "IBM Plex Sans","Helvetica Neue",sans-serif;color:#5F5B54}
.nh .welcome .choices{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px}
html.nl .nh .welcome .choice{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:44px;padding:6px 18px;border-radius:22px;border:1.5px solid #E7E2D9;background:#fff;color:#1C1B18;font:500 15px "IBM Plex Sans","Helvetica Neue",sans-serif;text-align:left;cursor:pointer}
html.nl .nh .welcome .choice:hover{border-color:#1C1B18}
.nh .welcome .choice small{display:block;font:400 12px "IBM Plex Sans","Helvetica Neue",sans-serif;color:#5F5B54}
html.nl .nh .welcome #wskip{min-height:44px;padding:0;background:none;border:0;border-radius:0;color:#5F5B54;font:500 15px "IBM Plex Sans","Helvetica Neue",sans-serif;cursor:pointer}
.nh .welcome .note{margin:0}
.nh h2{padding-top:0;border-top:0}.nh .welcome .msg:empty{display:none}
@media (min-width:700px){.nh-tiles{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}}

/* ===== Update 87: one look (brief 06, part A). The design pieces listed at the top of this file, and the old class
   names mapped onto them, for every Studio page in the new look (html.nl). Only looks change, never what a page does. ===== */
html.nl{--paper:#FEFDFB;--mist:#F3F0EA;--line:#E7E2D9;--soft:#5F5B54}
/* Page header */
:where(html.nl #main) h1,.nl-head h1{font:500 32px/1.1 "Fraunces",Georgia,serif;letter-spacing:-.015em;margin:0 0 8px;max-width:none}
:where(html.nl #main) .lead,.nl-head p{font-size:16px;line-height:1.5;color:#5F5B54;margin:0 0 22px;max-width:62ch}
@media (min-width:1024px){:where(html.nl #main) h1,.nl-head h1{font-size:40px}}
/* Sections */
:where(html.nl #main) h2,.nl-sect>h2{font:500 24px/1.2 "Fraunces",Georgia,serif;margin:40px 0 10px;padding:0;border:0}
:where(html.nl #main) h3{font:500 18px/1.3 "Fraunces",Georgia,serif;margin:22px 0 6px}
:where(html.nl #main) p{max-width:68ch}
:where(html.nl #main) .small,:where(html.nl #main) .hint,:where(html.nl #main) small{color:#5F5B54}
:where(html.nl #main) a{color:#1C1B18}:where(html.nl #main) a:hover{color:#A93A21}
/* Panels: light, rounded, no outlines and no left-border cards */
.nl-panel,:where(html.nl #main) .note,:where(html.nl #main) .sh-set,:where(html.nl #main) .sh-edit,:where(html.nl #main) .memb,:where(html.nl #main) .bk-group,:where(html.nl #main) .checks,:where(html.nl #main) .snap,:where(html.nl #main) .ordcard,:where(html.nl #main) .checklist,:where(html.nl #main) .cvlink,:where(html.nl #main) .nw-card,:where(html.nl #main) .sellq,:where(html.nl #main) .pubask,:where(html.nl #main) .unlocks,:where(html.nl #main) .finishbox,:where(html.nl #main) .welcome,:where(html.nl #main) .scbox,:where(html.nl #main) .reqcard,:where(html.nl #main) .kid,:where(html.nl #main) .appshare,:where(html.nl #main) .sshare,:where(html.nl #main) .mcard{background:#F3F0EA;border:0;border-radius:18px;box-shadow:none}
:where(html.nl #main) .note{padding:14px 18px;margin:14px 0;max-width:760px;border-left:0;color:#1C1B18}
:where(html.nl #main) .note.warn{background:#FBECE7}
:where(html.nl #main) .sh-set,:where(html.nl #main) .sh-edit,:where(html.nl #main) .memb,:where(html.nl #main) .bk-group,:where(html.nl #main) .ordcard{padding:20px 22px 14px;margin:16px 0 20px;max-width:760px}
:where(html.nl #main) .sh-set h2,:where(html.nl #main) .sh-edit h2,:where(html.nl #main) .bk-group h2,:where(html.nl #main) .ordcard h2,:where(html.nl #main) .memb h2{margin:0 0 10px;font-size:22px}
:where(html.nl #main) .checks{padding:4px 18px}:where(html.nl #main) .checks label{border-bottom-color:#E7E2D9}
:where(html.nl #main) .checklist,:where(html.nl #main) .snap,:where(html.nl #main) .cvlink,:where(html.nl #main) .sellq,:where(html.nl #main) .pubask,:where(html.nl #main) .unlocks,:where(html.nl #main) .finishbox{padding:16px 20px}
.nl-panel{padding:18px 20px}
/* Fields */
:where(html.nl #main) label{font:500 14px "IBM Plex Sans",sans-serif;margin:0 0 6px;color:#1C1B18}
:where(html.nl #main) .field,.nl-field{margin:0 0 18px}
html.nl #main input:not([type]),html.nl #main input[type=text],html.nl #main input[type=email],html.nl #main input[type=date],html.nl #main input[type=number],html.nl #main input[type=tel],html.nl #main input[type=url],html.nl #main input[type=password],html.nl #main input[type=search],html.nl #main select,html.nl #main textarea{width:100%;min-height:44px;padding:10px 14px;border:1.5px solid #E7E2D9;border-radius:12px;background:#fff;color:#1C1B18;font:400 16px "IBM Plex Sans",sans-serif;box-sizing:border-box}
html.nl #main input:focus,html.nl #main select:focus,html.nl #main textarea:focus{border-color:#1C1B18;outline:0}
html.nl #main input[type=checkbox],html.nl #main input[type=radio]{accent-color:#1C1B18;width:20px;height:20px;vertical-align:-4px}
:where(html.nl #main) .chk{display:flex;gap:10px;align-items:flex-start;font-weight:500}
/* Buttons: capsules; primary red, quiet white with a light line */
:where(html.nl #main) button:not(.linkish):not(.nl-pill):not([role=tab]):not(.jn-lv),:where(html.nl #main) .btn{min-height:44px;padding:8px 20px;border-radius:999px;font:500 15px "IBM Plex Sans",sans-serif;line-height:1.2;vertical-align:middle}
:where(html.nl #main) button.quiet,:where(html.nl #main) .btn.quiet{background:#fff;border:1.5px solid #E7E2D9;color:#1C1B18}
:where(html.nl #main) button.quiet:hover,:where(html.nl #main) .btn.quiet:hover{border-color:#1C1B18;background:#fff;color:#1C1B18}
:where(html.nl #main) button.danger{background:#fff;border:1.5px solid #E9B9AC;color:#A93A21}:where(html.nl #main) button.danger:hover{background:#C4472A;border-color:#C4472A;color:#fff}
:where(html.nl #main) button.small,:where(html.nl #main) .btn.small{min-height:36px;padding:0 14px;font-size:14px}
.nl-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0}
/* Tabs and segmented choices */
:where(html.nl #main) .tabs,.nl-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
:where(html.nl #main) .tabs button,.nl-tabs button,.nl-tabs a{min-height:40px;padding:0 16px;border-radius:20px;border:1.5px solid #E7E2D9;background:#fff;color:#1C1B18;font:500 14px "IBM Plex Sans",sans-serif;text-decoration:none}
:where(html.nl #main) .tabs button[aria-pressed=true],.nl-tabs [aria-pressed=true],.nl-tabs [aria-current]{background:#1C1B18;border-color:#1C1B18;color:#fff}
:where(html.nl #main) .seg{border:0;background:#F3F0EA;border-radius:999px;padding:4px;gap:2px}
:where(html.nl #main) .seg button{min-height:38px;border:0;background:transparent;color:#1C1B18;border-radius:999px}
:where(html.nl #main) .seg button[aria-pressed="true"],:where(html.nl #main) .seg button[aria-checked="true"]{background:#1C1B18;color:#fff}
/* List rows */
.nl-row,:where(html.nl #main) table.list td{border-bottom:1px solid #E7E2D9}
.nl-row{display:flex;gap:14px;align-items:center;padding:12px 0}
:where(html.nl #main) table.list th{font:500 12px "IBM Plex Sans",sans-serif;color:#5F5B54;text-transform:none;border-bottom:1px solid #E7E2D9}
:where(html.nl #main) table.list img,:where(html.nl #main) table.list .ph{border-radius:12px;border:0}
:where(html.nl #main) .links{border-top:1px solid #E7E2D9}:where(html.nl #main) .links li{border-bottom-color:#E7E2D9}
:where(html.nl #main) .links a:hover{background:#F3F0EA;border-radius:12px}
:where(html.nl #main) .links a b{font:500 17px "IBM Plex Sans",sans-serif}
/* Empty states */
.nl-empty,:where(html.nl #main) .empty{background:#F3F0EA;border:0;border-radius:18px;padding:28px 22px;text-align:center;color:#5F5B54}
/* Small labels */
:where(html.nl #main) .chip{border:0;background:#F3F0EA;color:#1C1B18;border-radius:999px;font:500 12px "IBM Plex Sans",sans-serif;padding:4px 10px}
:where(html.nl #main) .chip.red{background:#FBECE7;color:#A93A21}
/* Folds (details) */
:where(html.nl #main) .fold{border:0;background:#F3F0EA;border-radius:18px}:where(html.nl #main) .fold>summary{border-radius:18px}
/* Messages under forms */
:where(html.nl #main) .msg.err{color:#A93A21}
/* Part A pages: Your shop, Orders, Basket, Account */
:where(html.nl #main) .sh-items{border-top:1px solid #E7E2D9}
:where(html.nl #main) .sh-thumb,:where(html.nl #main) .sh-photos img{border-radius:12px}
:where(html.nl #main) .bk-line{border-bottom:1px solid #E7E2D9}
:where(html.nl #main) .bk-total{font-weight:600}
:where(html.nl #main) .memb b.lvname{font:500 24px "Fraunces",Georgia,serif}
:where(html.nl #main) .bignum{font:500 24px "Fraunces",Georgia,serif}
:where(html.nl #main) .ordcard{border-top:0}
:where(html.nl #main) .sendlate{background:#FBECE7;border-radius:12px;padding:8px 12px}
/* A panel inside a panel is white, so it still reads as its own box */
:where(html.nl #main) .nl-panel .note,:where(html.nl #main) .sh-set .note,:where(html.nl #main) .sh-edit .note,:where(html.nl #main) .bk-group .note,:where(html.nl #main) .memb .note,:where(html.nl #main) .ordcard .note,:where(html.nl #main) .fold .note,:where(html.nl #main) .nl-panel .checks,:where(html.nl #main) .fold .checks{background:#fff}
/* ===== Update 87, part B (brief 06): Portfolio, In development, a work's page, Catalogues, Events ===== */
/* Folded sections: one soft panel each, the heading inside it */
:where(html.nl #main) details.fold{border:0;background:#F3F0EA;border-radius:18px;margin:0 0 10px;padding:0 18px}
:where(html.nl #main) details.fold:last-of-type{border-bottom:0}
:where(html.nl #main) details.fold>summary{padding:16px 0}
:where(html.nl #main) details.fold>summary .ft{font:500 18px/1.3 "Fraunces",Georgia,serif}
:where(html.nl #main) details.fold>summary .ft::before{font-family:"IBM Plex Sans",sans-serif;color:#5F5B54}
:where(html.nl #main) details.fold>.fb{padding:0 0 18px}
/* Works in grids: rounded pictures, the Showcase's captions */
:where(html.nl #main) .masonry{column-gap:24px}
:where(html.nl #main) .masonry a.pic,:where(html.nl #main) .portfolio a.pic{border:0;border-radius:16px;background:#F3F0EA}
:where(html.nl #main) .masonry figcaption,:where(html.nl #main) .portfolio figcaption{padding-top:10px;font-size:14px}
:where(html.nl #main) .masonry figcaption b,:where(html.nl #main) .portfolio figcaption b{font:500 16px/1.3 "IBM Plex Sans",sans-serif}
:where(html.nl #main) .masonry figcaption span,:where(html.nl #main) .portfolio figcaption span{color:#5F5B54;font-size:14px}
:where(html.nl #main) .workimg,:where(html.nl #main) .art{border:0;border-radius:16px;background:#F3F0EA}
:where(html.nl #main) .dropzone{border:1.5px dashed #E7E2D9;border-radius:18px;background:#fff}
/* Event and catalogue lists: list rows */
:where(html.nl #main) .evlist,:where(html.nl #main) .catlist{border-top:1px solid #E7E2D9}
:where(html.nl #main) .evlist li,:where(html.nl #main) .catlist li{border-bottom:1px solid #E7E2D9}
:where(html.nl #main) .evlist a:hover{background:#F3F0EA;border-radius:12px}
:where(html.nl #main) .evlist img,:where(html.nl #main) .evnopic{border-radius:12px}
:where(html.nl #main) .evlist b{font:500 17px/1.3 "IBM Plex Sans",sans-serif}
:where(html.nl #main) .catw{border:1.5px solid #E7E2D9;border-radius:16px}
:where(html.nl #main) .catw.on{border-color:#1C1B18;box-shadow:0 0 0 1.5px #1C1B18 inset}
:where(html.nl #main) .catsend{border-top:1px solid #E7E2D9}
:where(html.nl #main) .choice,:where(html.nl #main) .chip-btn{border:1.5px solid #E7E2D9;background:#fff;border-radius:14px}
:where(html.nl #main) .choice[aria-pressed=true],:where(html.nl #main) .chip-btn[aria-pressed=true],:where(html.nl #main) .choice.on{border-color:#1C1B18;background:#1C1B18;color:#fff}
:where(html.nl #main) .stepcard{background:#F3F0EA;border:0;border-radius:18px}
/* ===== Update 87, part C (brief 06): Courses lists, lessons, Career pages, Messages ===== */
/* Course and lesson lists: list rows with rounded pictures */
:where(html.nl #main) .clist>li{border-top:1px solid #E7E2D9}
:where(html.nl #main) .clist .cthumb,:where(html.nl #main) .chero,:where(html.nl #main) .llist img,:where(html.nl #main) .llist .lph,:where(html.nl #main) .limg,:where(html.nl #main) .vid{border-radius:14px;overflow:hidden;background:#F3F0EA}
:where(html.nl #main) .clist h2{font-size:22px}
:where(html.nl #main) .llist{border-top:1px solid #E7E2D9}
:where(html.nl #main) .llist li>a,:where(html.nl #main) .llist li>div{border-bottom-color:#E7E2D9}
:where(html.nl #main) .llist .ltitle{font-weight:500}
:where(html.nl #main) .llist li.done .lstate{color:#1C1B18}
:where(html.nl #main) .lnav{border-top:1px solid #E7E2D9}
:where(html.nl #main) .ltext{font-size:17px;line-height:1.65}
:where(html.nl #main) .ltest,:where(html.nl #main) .dl{background:#F3F0EA;border:0;border-radius:18px}
:where(html.nl #main) .streak{border-radius:999px}
/* Messages: rows, capsule tabs, rounded bubbles */
:where(html.nl #main) .mlist{border-top:1px solid #E7E2D9}
:where(html.nl #main) .mlist a{border-bottom-color:#E7E2D9}
:where(html.nl #main) .mlist img,:where(html.nl #main) .mlist .mph{border-radius:12px}
:where(html.nl #main) .mtabs{gap:8px}
:where(html.nl #main) .mtabs a{font:500 14px "IBM Plex Sans",sans-serif;min-height:40px;display:inline-flex;align-items:center;padding:0 16px;border:1.5px solid #E7E2D9;border-radius:20px;background:#fff}
:where(html.nl #main) .mtabs a+a{border-left:1.5px solid #E7E2D9}
:where(html.nl #main) .mtabs a[aria-current]{background:#1C1B18;border-color:#1C1B18;color:#fff}
:where(html.nl #main) .mmsg{border:0;background:#F3F0EA;border-radius:18px 18px 18px 6px}
:where(html.nl #main) .mmsg.mine{background:#1C1B18;color:#fff;border-radius:18px 18px 6px 18px}
:where(html.nl #main) .mmsg.system{background:transparent}
:where(html.nl #main) .mtips{background:#F3F0EA;border-radius:18px}
/* Career pages: CV and statement, Network, Job CV, Clients, Calculators */
:where(html.nl #main) .jc-chip,:where(html.nl #main) .nw-pick button{border:1.5px solid #E7E2D9;border-radius:999px;background:#fff}
:where(html.nl #main) .jc-chip[aria-pressed=true]{background:#1C1B18;border-color:#1C1B18;color:#fff}
:where(html.nl #main) .nw-list{border-top:1px solid #E7E2D9}
:where(html.nl #main) .nw-list li{border-bottom-color:#E7E2D9}
:where(html.nl #main) .cv-new img,:where(html.nl #main) .cv-hist img{border-radius:12px}
:where(html.nl #main) .ed,:where(html.nl #main) details.ed{background:#F3F0EA;border:0;border-radius:18px}
:where(html.nl #main) .next{background:#F3F0EA;border:0;border-radius:18px}
/* ===== Update 87, part D (brief 06): young creators, pupils and Classroom in the new look ===== */
/* The note on every page: who can see this Studio (a parent, or the school's teachers). It sits under the top bar. */
html.nl .nl-acting.youngbar{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:10px 16px;background:#F3F0EA;border:0;color:#1C1B18;font-size:14px;line-height:1.4;box-shadow:0 6px 18px rgba(28,27,24,.08)}
html.nl .nl-acting.youngbar a{color:#1C1B18}
html.nl .nl-acting.youngbar.parent{background:#1C1B18;color:#fff}html.nl .nl-acting.youngbar.parent button{background:#fff;color:#1C1B18;border:0;min-height:36px;padding:0 14px;border-radius:999px}
html.nl.nl-young #main{padding-top:150px}
.nl-gap{flex:1 1 auto}
@media (min-width:1024px){html.nl.nl-young #main{padding-top:140px}}
/* The note sits in the page, under the top bar, so it never covers anything however long it is */
html.nl.nl-young header.top{height:auto}
html.nl.nl-young .nl-acting.youngbar{position:relative;top:auto;left:auto;right:auto;margin:88px 12px 0}
html.nl.nl-young #main{padding-top:20px}
@media (min-width:1024px){html.nl.nl-young .nl-acting.youngbar{margin:80px auto 0;max-width:1200px}html.nl.nl-young #main{padding-top:24px}}
:where(html.nl #main) .appcard{background:#F3F0EA;border:0;border-radius:18px}
/* ===== Brief 09: visitors on the Join page get the new-look top bar ===== */
html.nl-visitor .nl-vtop{position:fixed;top:0;left:0;right:0;max-width:none;margin:0;height:60px;padding:0 16px;border-radius:0;border:0;border-bottom:1px solid #E7E2D9;background:#fff;box-shadow:none;display:flex;align-items:center;gap:10px}
html.nl-visitor .nl-vtop .nl-logo img{height:24px}
html.nl-visitor .nl-vsignin{font:500 15px "IBM Plex Sans",sans-serif;color:#1C1B18;text-decoration:none;padding:10px 4px;white-space:nowrap}
html.nl-visitor .nl-vjoin{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:20px;background:#C4472A;color:#fff;font:500 14px "IBM Plex Sans",sans-serif;text-decoration:none;white-space:nowrap}
html.nl-visitor .nl-vjoin:hover{background:#A93A21;color:#fff}
html.nl-visitor #main{padding-top:76px;max-width:1320px}
@media (min-width:1024px){html.nl-visitor .nl-vtop{height:64px;padding:0 32px;gap:16px}html.nl-visitor .nl-vtop .nl-logo img{height:28px}html.nl-visitor .nl-vjoin{height:44px;padding:0 20px;font-size:15px}html.nl-visitor #main{padding-top:84px}}
/* The Join page's own sections sit full width in the new look */
html.nl .jo-hero{padding-left:0;padding-right:0}html.nl .jo-benefits{padding-left:0;padding-right:0}

/* Brief 12: "Have a code?" at checkout, and the affiliate's page. */
.havecode{margin:10px 0 0}
.havecode summary{cursor:pointer;font-size:15px;color:var(--soft,#5F5B54);text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:6px 0}
.havecode-row{margin-top:6px}
.havecode-row input{max-width:14em;text-transform:uppercase;letter-spacing:.04em}
.af-copy{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap;max-width:640px}
.af-copy input{flex:1 1 260px;min-width:0}
.af-code{font-size:1.15em;letter-spacing:.06em}
.af-nums{list-style:none;padding:0;margin:8px 0 12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.af-nums li{background:var(--mist,#F3F0EA);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.af-nums b{font-size:24px;font-weight:500}
.af-nums span{font-size:14px;color:var(--soft,#5F5B54)}
@media (min-width:700px){.af-nums{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.af-nums{grid-template-columns:repeat(6,minmax(0,1fr))}}
.af-agree{border:1.5px solid #C4472A;border-radius:16px;padding:16px 20px;margin:0 0 24px}
.af-points li{margin:6px 0}
.af-tablewrap{overflow-x:auto;max-width:100%}
.af-table{width:100%;border-collapse:collapse;font-size:15px}
.af-table th,.af-table td{text-align:left;padding:8px 8px;border-bottom:1px solid var(--line,#E7E2D9);vertical-align:top}
.af-table th{font-weight:500;font-size:13px;color:var(--soft,#5F5B54)}
.af-payouts{list-style:none;padding:0}.af-payouts li{padding:6px 0;border-bottom:1px solid var(--line,#E7E2D9)}
@media (max-width:600px){
  .af-table thead{display:none}
  .af-table,.af-table tbody,.af-table tr,.af-table td{display:block;width:auto}
  .af-table tr{padding:10px 0;border-bottom:1px solid var(--line,#E7E2D9);display:grid;grid-template-columns:1fr auto;gap:2px 12px}
  .af-table td{border:0;padding:0}
  .af-table td:nth-child(1){grid-column:1;font-size:13px;color:var(--soft,#5F5B54)}
  .af-table td:nth-child(2){grid-column:1;font-weight:500}
  .af-table td:nth-child(3){grid-column:1}
  .af-table td:nth-child(4){grid-column:2;grid-row:1 / span 2;font-weight:500;text-align:right}
  .af-table td:nth-child(5){grid-column:2;grid-row:3;text-align:right;font-size:14px}
}