/* Work page layouts. Palette: ink #514bdd, paper #fdfcf9, lavender #eeedfb, muted #666184. */
#sarah-site .work-content{width:min(820px,calc(100% - 48px))}
#sarah-site .work-intro{margin-bottom:40px}
#sarah-site .section-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1rem}
#sarah-site .section-top h2{font-size:1.125rem;font-weight:500;margin:0}
#sarah-site .section-top span{font-size:.8125rem;color:#666184}
#sarah-site .project-section{margin-bottom:56px}
#sarah-site .company-section{margin-bottom:56px}
#sarah-site .link-missing{font-size:.8125rem;color:#666184}
#sarah-site .project-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:18px;font-size:.9375rem}
#sarah-site .project-links a{text-decoration:underline;text-underline-offset:5px;min-height:34px;display:inline-flex;align-items:center}

/* Layout lab (only on /work/layouts/) */
#sarah-site .layout-lab{margin-bottom:2rem;padding:1rem 0;border-bottom:1px solid #514bdd35;font-size:.875rem}
#sarah-site .layout-choices{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0}
#sarah-site .layout-choices button{font:inherit;font-size:.8125rem;padding:.45rem .75rem;border:1px solid #514bdd;background:#fffefb;color:#34305e;border-radius:4px;cursor:pointer;min-height:36px}
#sarah-site .layout-choices button:hover{text-decoration:none;background:#eeedfb}
#sarah-site .layout-choices button[aria-pressed="true"]{background:#514bdd;color:#fff}
#sarah-site .study-note{margin-top:2rem;font-size:.8125rem;color:#666184;line-height:1.6}

/* Browser-window cover */
#sarah-site .cover-frame{border:1px solid #514bdd;border-radius:8px;overflow:hidden;background:#fffefb;box-shadow:3px 4px 0 #514bdd14}
#sarah-site .cover-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:6px 12px;font:11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#514bdd;border-bottom:1px solid #514bdd}
#sarah-site .cover-dots{letter-spacing:2px}
#sarah-site .cover-arrow{text-align:right;font-size:11px}
#sarah-site .cover-art{position:relative;aspect-ratio:16/10;background:var(--cover-bg);color:var(--cover-ink);display:grid;place-items:center;overflow:hidden}
#sarah-site .cover-art.has-image{background:#eeedfb}
#sarah-site .cover-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
#sarah-site .cover-frame:hover .cover-art img{transform:scale(1.025)}
@media(prefers-reduced-motion:reduce){#sarah-site .cover-art img{transition:none}}
#sarah-site .cover-art.stars{background-image:radial-gradient(1px 1px at 12% 18%,#fff 60%,transparent 62%),radial-gradient(1.5px 1.5px at 76% 22%,#fff 60%,transparent 62%),radial-gradient(1px 1px at 40% 70%,#fff 60%,transparent 62%),radial-gradient(1px 1px at 88% 64%,#fff 60%,transparent 62%),radial-gradient(1.5px 1.5px at 23% 82%,#fff 60%,transparent 62%),radial-gradient(1px 1px at 60% 40%,#fff 60%,transparent 62%),radial-gradient(1px 1px at 8% 54%,#fff 60%,transparent 62%),radial-gradient(1px 1px at 52% 12%,#fff 60%,transparent 62%),radial-gradient(1px 1px at 68% 88%,#fff 60%,transparent 62%),radial-gradient(1.5px 1.5px at 92% 36%,#fff 60%,transparent 62%),radial-gradient(1px 1px at 34% 30%,#fff 60%,transparent 62%),radial-gradient(1px 1px at 82% 80%,#fff 60%,transparent 62%),radial-gradient(ellipse at 50% 60%,#2b3a6a66,transparent 70%)}
#sarah-site .cover-title{font:400 clamp(1.4rem,4cqw,2rem)/1.3 'SarahLoadingCulture',monospace;padding:0 8%;text-align:center}
#sarah-site .cover-art.has-image .cover-title{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#514bdd}
#sarah-site .cover-art.has-image.dark .cover-title{color:#fdfcf9}
#sarah-site .cover-badge{position:absolute;top:10px;right:10px;font-size:11px;background:#fdfcf9;color:#514bdd;border:1px solid #514bdd40;padding:3px 7px;border-radius:3px}
#sarah-site .cover-go{position:absolute;right:12px;bottom:12px;width:30px;height:30px;border-radius:50%;border:1px solid #514bdd;background:#fdfcf9;color:#514bdd;display:grid;place-items:center;font-size:14px}
#sarah-site .project-copy{min-width:0}
#sarah-site .project-title{font-size:1.2rem;line-height:1.4;font-weight:500;margin:0}
#sarah-site .project-blurb{margin-top:10px;line-height:1.7;color:#34305e}
#sarah-site .project-detail.side{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:center}
#sarah-site .project-detail.side .project-title{font:400 1.75rem/1.4 'SarahLoadingCulture',monospace}
#sarah-site .project-detail.stack .project-copy{margin-top:26px}

/* Glider highlight + panel crossfade shared by every tab list */
#sarah-site .tab-list{position:relative}
#sarah-site .tab-list>button{position:relative;z-index:1;background:transparent}
#sarah-site .tab-glider{position:absolute;left:0;top:0;pointer-events:none;z-index:0}
#sarah-site .tab-view{position:relative}
#sarah-site .tab-panel-inner.panel-enter{animation:sl-panel-in .28s cubic-bezier(.2,.8,.2,1) .14s both}
#sarah-site .tab-panel-inner.panel-leave{position:absolute;inset:0;width:100%;pointer-events:none;animation:sl-panel-out .13s ease forwards}
@keyframes sl-panel-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sl-panel-out{to{opacity:0;transform:translateY(-4px)}}
#sarah-site .cover-frame .cover-go,#sarah-site .company-cover .play{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
#sarah-site .cover-frame:hover .cover-go{transform:translate(2px,-2px)}
#sarah-site .company-cover img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
#sarah-site .company-cover:hover img{transform:scale(1.025)}
#sarah-site .company-cover:hover .play{transform:scale(1.08)}
@media(prefers-reduced-motion:reduce){#sarah-site .tab-panel-inner{animation:none!important}#sarah-site .company-cover img,#sarah-site .cover-go,#sarah-site .play{transition:none}}

/* 1. Folder tabs */
#sarah-site .folder{background:#eeedfb;border-radius:14px;padding:6px 6px 0}
#sarah-site .folder-tabs{display:flex;overflow-x:auto;scrollbar-width:none;padding:0 4px}
#sarah-site .folder-tabs::-webkit-scrollbar{display:none}
#sarah-site .folder-tab{flex:0 0 auto;border:0;background:transparent;color:#666184;padding:16px 22px 14px;border-radius:12px 12px 0 0;font:inherit;font-size:.9375rem;position:relative;cursor:pointer;white-space:nowrap}
#sarah-site .folder-tab:hover{text-decoration:none;color:#514bdd}
#sarah-site .folder-tab[aria-selected="true"]{color:#514bdd}
#sarah-site .folder-glider{background:#fffefb;border-radius:12px 12px 0 0}
#sarah-site .folder-tab[aria-selected="true"] span{text-decoration:underline;text-underline-offset:9px;text-decoration-thickness:2px}
#sarah-site .folder-panel{background:#fffefb;border-radius:10px;padding:28px;margin:0 -6px;box-shadow:0 0 0 6px #eeedfb inset}
#sarah-site .folder-panel{box-shadow:none;border-radius:0 0 12px 12px}

/* 2. Top tabs */
#sarah-site .toptabs-tabs{display:flex;flex-wrap:wrap;gap:0 4px;border-bottom:1px solid #514bdd35;margin-bottom:26px}
#sarah-site .toptab{border:0;background:none;padding:12px 14px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;font:inherit;color:#666184;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
#sarah-site .toptab:hover{text-decoration:none;color:#514bdd}
#sarah-site .toptab[aria-selected="true"]{color:#514bdd}
#sarah-site .toptabs-glider{background:#514bdd;border-radius:2px}
#sarah-site .toptab-name{font-size:.9375rem}
#sarah-site .toptab-kind{font-size:.75rem}

/* 3. Star list */
#sarah-site .starlist{--star-item-h:82px;--star-visible:7;--star-col:200px;position:relative;display:grid;grid-template-columns:var(--star-col) 1fr;gap:24px;align-items:start}
#sarah-site .starlist-tabs{display:flex;flex-direction:column;max-height:calc(var(--star-item-h) * var(--star-visible));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none}
#sarah-site .starlist-tabs::-webkit-scrollbar{width:0;height:0;display:none}
/* A fade at the cut-off edge, shown only while there is more to scroll to. */
#sarah-site .starlist.has-more::after{content:'';position:absolute;left:0;width:var(--star-col);height:22px;top:calc(var(--star-item-h) * var(--star-visible) - 22px);pointer-events:none;background:linear-gradient(to bottom,#fdfcf900,#fdfcf9)}
#sarah-site .star-item{flex:0 0 var(--star-item-h);height:var(--star-item-h);display:flex;align-items:flex-start;gap:12px;text-align:left;border:1px solid transparent;border-bottom-color:#514bdd25;background:none;padding:16px 12px;font:inherit;color:#514bdd;cursor:pointer;border-radius:8px}
#sarah-site .star-item:hover{text-decoration:none;background:#eeedfb66;border-radius:8px}
#sarah-site .star-item[aria-selected="true"]{color:#514bdd}
#sarah-site .starlist-glider{border:1px solid #514bdd;box-shadow:0 0 0 1px #514bdd;border-radius:8px;background:#fffefb}
#sarah-site .star-item[aria-selected="true"]+.star-item{border-top-color:transparent}
#sarah-site .star{color:#a9a6e8;font-size:15px;line-height:1.5}
#sarah-site .star-item[aria-selected="true"] .star{color:#514bdd}
#sarah-site .star-copy{display:flex;flex-direction:column;gap:3px}
#sarah-site .star-name{font-size:.9375rem}
#sarah-site .star-kind{font-size:.8125rem;color:#666184}

/* 4. Gallery */
#sarah-site .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 20px}
#sarah-site .gallery-card{display:block;color:inherit;text-decoration:none;min-width:0}
#sarah-site .gallery-card:hover{text-decoration:none}
#sarah-site .gallery-card .cover-art{border-radius:8px;border:1px solid #514bdd;transition:transform .2s ease}
#sarah-site .gallery-card:hover .cover-art{transform:translateY(-3px)}
#sarah-site .gallery-card .cover-badge,#sarah-site .gallery-card .cover-go{display:none}
#sarah-site .gallery-title{display:block;margin-top:12px;font-size:.9375rem;font-weight:500}
#sarah-site .gallery-kind{display:block;font-size:.8125rem;color:#666184;margin-top:2px}

/* 5. Index */
#sarah-site .index-list{list-style:none;margin:0;padding:0;border-top:1px solid #514bdd35}
#sarah-site .index-list li{display:grid;grid-template-columns:32px 180px 110px 1fr;gap:14px;align-items:baseline;padding:14px 0;border-bottom:1px solid #514bdd25;font-size:.9375rem}
#sarah-site .index-num{font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:#666184}
#sarah-site a.index-title{text-decoration:underline;text-underline-offset:4px}
#sarah-site .index-kind{font-size:.8125rem;color:#666184}
#sarah-site .index-blurb{font-size:.875rem;color:#34305e;line-height:1.6}

/* Companies */
#sarah-site .company-tabs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #514bdd35;border-bottom:1px solid #514bdd35;padding:8px 0}
#sarah-site .company-tab{border:0;background:none;font:inherit;color:#514bdd;padding:18px 10px 16px calc(50% - 52px);display:flex;justify-content:flex-start;cursor:pointer;border-bottom:2px solid transparent}
#sarah-site .company-tab:hover{text-decoration:none;background:#eeedfb66}
#sarah-site .company-tab[aria-selected="true"]{color:#514bdd}
#sarah-site .company-glider{background:#514bdd;border-radius:2px}
#sarah-site .company-head{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center}
#sarah-site .company-mark{display:block;flex:0 0 auto}
#sarah-site .company-name{font-size:.9375rem}
#sarah-site .company-word{font:500 1.05rem/1 'DM Sans',Arial,sans-serif;letter-spacing:.01em}
#sarah-site .company-sub{font-size:.75rem;color:#666184;flex-basis:100%;text-align:center}
#sarah-site .company-panel{margin-top:28px}
#sarah-site .company-detail{display:grid;grid-template-columns:1.15fr 1fr;gap:26px;align-items:center}
#sarah-site .company-cover{position:relative;display:block;border-radius:8px;overflow:hidden;background:#eeedfb}
#sarah-site .company-cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
#sarah-site .company-cover:hover{text-decoration:none}
#sarah-site .company-cover .play{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#fdfcf9ee;box-shadow:0 2px 10px #0002}
#sarah-site .company-cover .play:after{content:'';position:absolute;left:21px;top:16px;border-left:14px solid #514bdd;border-top:10px solid transparent;border-bottom:10px solid transparent}
#sarah-site .reel-cover{aspect-ratio:16/9;display:grid;place-items:center;background:#eeedfb;color:#514bdd;border-radius:8px}
#sarah-site .reel-word{font:400 2rem/1 'SarahLoadingCulture',monospace}
#sarah-site .company-copy{min-width:0}
#sarah-site .company-copy .company-head{justify-content:flex-start}
#sarah-site .company-tab .company-head{justify-content:flex-start;flex-wrap:nowrap;white-space:nowrap}
#sarah-site .company-copy .company-sub{flex-basis:auto;text-align:left}
#sarah-site .company-copy h3{font-size:1.2rem;font-weight:500;margin:16px 0 0;line-height:1.4}
#sarah-site .company-copy p{margin-top:10px;line-height:1.7;color:#34305e}
#sarah-site .company-link{display:inline-flex;align-items:center;min-height:40px;margin-top:10px;text-decoration:underline;text-underline-offset:5px}
#sarah-site .company-more{list-style:none;margin:8px 0 0;padding:0;font-size:.875rem}
#sarah-site .company-more a{text-decoration:underline;text-underline-offset:4px;display:inline-flex;align-items:center;min-height:34px}

@container(max-width:700px){
 #sarah-site .work-content{width:calc(100% - 40px)}
 #sarah-site .project-detail.side,#sarah-site .company-detail{grid-template-columns:1fr;gap:20px}
 #sarah-site .folder-panel{padding:20px 16px}
 #sarah-site .starlist{grid-template-columns:1fr}
 #sarah-site .starlist-tabs{flex-direction:row;overflow-x:auto;overflow-y:visible;max-height:none;gap:8px;scrollbar-width:none;padding-bottom:6px}
 #sarah-site .starlist.has-more::after{display:none}
 #sarah-site .star-item{flex:0 0 auto;height:auto;border:1px solid #514bdd35;border-radius:8px;padding:12px 14px}
 #sarah-site .starlist-glider{box-shadow:none}
 #sarah-site .gallery{grid-template-columns:repeat(2,1fr);gap:20px 14px}
 #sarah-site .index-list li{grid-template-columns:28px 1fr;gap:4px 12px}
 #sarah-site .index-kind,#sarah-site .index-blurb{grid-column:2}
 #sarah-site .company-tabs{grid-template-columns:repeat(2,1fr)}
 #sarah-site .section-top{flex-wrap:wrap;gap:4px 12px}
}