:root {
  --atlas-ink: #252522;
  --atlas-muted: #74736c;
  --atlas-paper: #f6f4ef;
  --atlas-paper-2: #ebe8e0;
  --atlas-line: rgba(37, 37, 34, .16);
  --atlas-line-soft: rgba(37, 37, 34, .09);
  --atlas-red: #a34d38;
  --atlas-red-dark: #79392c;
  --atlas-white: #fffdfa;
  --atlas-serif: Georgia, "Times New Roman", "Noto Serif SC", "Songti SC", serif;
  --atlas-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --atlas-wrap: min(1280px, calc(100% - 64px));
  --atlas-ease: cubic-bezier(.22, .68, .28, 1);
}

html { background: var(--atlas-paper); scroll-behavior: smooth; }
body.yj { margin: 0; color: var(--atlas-ink); background: var(--atlas-paper); font-family: var(--atlas-sans); font-size: 15px; line-height: 1.6; }
body.yj *, body.yj *::before, body.yj *::after { box-sizing: border-box; }
body.yj a { color: inherit; text-decoration: none; }
body.yj button, body.yj input, body.yj select, body.yj textarea { font: inherit; }
body.yj img { display: block; max-width: 100%; }
body.yj :where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--atlas-red); outline-offset: 3px; }
.atlas-wrap { width: var(--atlas-wrap); margin-inline: auto; }
.atlas-skip { position: fixed; z-index: 1000; top: -100px; left: 20px; padding: 10px 16px; color: var(--atlas-white); background: var(--atlas-red); }
.atlas-skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.masthead { position: sticky; top: 0; z-index: 800; border-bottom: 1px solid var(--atlas-line); background: rgba(246, 244, 239, .93); backdrop-filter: blur(16px); }
.masthead-inner { min-height: 84px; display: flex; align-items: center; gap: 48px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; color: var(--atlas-ink); }
.brand svg { width: 36px; height: 36px; color: var(--atlas-red); }
.brand b { display: block; font-family: var(--atlas-serif); font-size: 21px; font-weight: 600; letter-spacing: .08em; line-height: 1; }
.brand-small { margin-left: .22em; font-size: .72em; font-weight: 500; }
.brand small { display: block; margin-top: 4px; color: var(--atlas-muted); font-size: 8px; letter-spacing: .24em; line-height: 1; }
.atlas-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.atlas-nav a { position: relative; padding: 30px 0 28px; color: var(--atlas-muted); font-size: 13px; letter-spacing: .08em; transition: color .2s ease; }
.atlas-nav a::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; content: ""; background: var(--atlas-red); transform: scaleX(0); transform-origin: center; transition: transform .25s var(--atlas-ease); }
.atlas-nav a:hover, .atlas-nav a[aria-current="page"] { color: var(--atlas-red); }
.atlas-nav a[aria-current="page"]::after, .atlas-nav a:focus-visible::after { transform: scaleX(1); }
.masthead-actions { display: flex; align-items: center; gap: 16px; }
.nav-search { display: grid; width: 34px; height: 34px; place-items: center; color: var(--atlas-muted); }
.nav-search svg { width: 21px; height: 21px; }
.nav-search:hover { color: var(--atlas-red); }
.nav-workspace, .atlas-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 0 19px; border: 1px solid var(--atlas-red); color: var(--atlas-white) !important; background: var(--atlas-red); font-size: 12px; letter-spacing: .08em; transition: background .2s ease, color .2s ease, transform .2s ease; }
.nav-workspace:hover, .atlas-button:hover { background: var(--atlas-red-dark); transform: translateY(-2px); }
.nav-workspace span, .atlas-button span { font-size: 16px; line-height: 1; }
.nav-toggle { display: none; width: 36px; height: 36px; border: 0; color: var(--atlas-ink); background: transparent; cursor: pointer; }
.nav-toggle span { display: block; width: 21px; height: 1px; margin: 5px auto; background: currentColor; }
.atlas-mobile { display: none; }

/* Keep the legacy navigation hooks used by site.js while the new editorial
   header owns the visual treatment and mobile layout. */
.tab-wrap.atlas-nav { flex: 1; align-items: center; height: auto; margin: 0 0 0 auto; overflow: visible; line-height: normal; text-align: left; }
.mobile-menu.atlas-mobile { display: none; }

.cover-section { padding: 42px 0 92px; }
.cover-topline, .section-caption { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--atlas-ink); padding-top: 11px; color: var(--atlas-muted); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.cover-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(44px, 7vw, 114px); align-items: center; padding: 64px 0 70px; }
.cover-copy { padding-left: clamp(0px, 3vw, 38px); }
.atlas-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 23px; color: var(--atlas-red); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.atlas-kicker > span { display: inline-block; width: 25px; height: 1px; background: currentColor; }
.cover-copy h1 { max-width: 8em; margin: 0; color: var(--atlas-ink); font-family: var(--atlas-serif); font-size: clamp(50px, 6vw, 86px); font-weight: 500; letter-spacing: -.055em; line-height: .99; }
.cover-copy h1 em { color: var(--atlas-red); font-style: normal; }
.cover-intro { margin: 31px 0 0; color: var(--atlas-muted); font-size: 16px; line-height: 1.9; }
.cover-actions { display: flex; align-items: center; gap: 26px; margin-top: 35px; }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--atlas-red); font-size: 12px; letter-spacing: .09em; }
.text-link:hover { color: var(--atlas-red-dark); }
.text-link span { font-size: 16px; transition: transform .2s ease; }
.text-link:hover span { transform: translate(3px, -2px); }
.cover-index { display: flex; align-items: center; gap: 11px; margin-top: 71px; color: var(--atlas-muted); font-size: 10px; letter-spacing: .11em; line-height: 1.45; text-transform: uppercase; }
.cover-index small { color: #a2a098; font-size: 8px; letter-spacing: .14em; }
.index-cross { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid var(--atlas-red); color: var(--atlas-red); font-size: 19px; line-height: 1; }
.cover-art { position: relative; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; background: #d4d7d5; }
.cover-art { box-shadow: 0 24px 60px rgba(37,37,34,.12); }
.cover-art::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(246,244,239,.11), transparent 42%), linear-gradient(0deg, rgba(22,28,27,.26), transparent 46%); pointer-events: none; }
.cover-art img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 64% center; transition: transform 1s var(--atlas-ease); }
.cover-art:hover img { transform: scale(1.025); }
.cover-art-label { position: absolute; z-index: 1; top: 17px; left: 19px; color: rgba(255,255,255,.88); font-size: 9px; letter-spacing: .2em; }
.cover-art figcaption { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; display: flex; align-items: end; justify-content: space-between; padding: 76px 25px 24px; color: #fff; background: linear-gradient(0deg, rgba(17,21,20,.68), transparent); }
.cover-art figcaption small { display: block; margin-bottom: 5px; color: rgba(255,255,255,.72); font-size: 10px; letter-spacing: .12em; }
.cover-art figcaption strong { display: block; font-family: var(--atlas-serif); font-size: 25px; font-weight: 400; }
.cover-art figcaption a { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.7); color: #fff; font-size: 20px; transition: background .2s ease; }
.cover-art figcaption a:hover { background: var(--atlas-red); border-color: var(--atlas-red); }
.atlas-search { display: grid; grid-template-columns: 230px 1fr; align-items: center; gap: 28px; padding: 22px 24px; border: 1px solid var(--atlas-line); background: rgba(255,253,250,.55); }
.atlas-search > label { color: var(--atlas-ink); font-family: var(--atlas-serif); font-size: 17px; }
.atlas-search > div { display: flex; align-items: center; border-bottom: 1px solid var(--atlas-ink); }
.atlas-search svg { flex: 0 0 auto; width: 22px; height: 22px; margin-right: 12px; color: var(--atlas-muted); }
.atlas-search input { width: 100%; min-height: 44px; border: 0; outline: 0; color: var(--atlas-ink); background: transparent; font-size: 14px; }
.atlas-search input::placeholder { color: #9c9b94; }
.atlas-search button { display: inline-flex; align-items: center; gap: 10px; min-height: 33px; padding: 0 14px; border: 0; color: var(--atlas-red); background: transparent; font-size: 12px; cursor: pointer; }
.atlas-search button:hover { color: var(--atlas-red-dark); }
.atlas-search p { grid-column: 2; margin: -13px 0 0 34px; color: #9c9b94; font-size: 10px; letter-spacing: .06em; }
.atlas-search p a { margin-left: 13px; color: var(--atlas-muted); text-decoration: underline; text-underline-offset: 3px; }

.atlas-section { padding: 100px 0; }
.atlas-section-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin: 31px 0 43px; }
.atlas-section h2, .source-note h2 { margin: 0; font-family: var(--atlas-serif); font-size: clamp(32px, 4vw, 52px); font-weight: 500; letter-spacing: -.045em; line-height: 1.08; }
.atlas-section-head .text-link { flex: 0 0 auto; margin-bottom: 6px; }
.path-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--atlas-line); border-bottom: 1px solid var(--atlas-line); }
.path-card { min-height: 296px; padding: 27px 25px 22px; border-right: 1px solid var(--atlas-line); transition: background .3s ease, transform .3s var(--atlas-ease); }
.path-card:last-child { border-right: 0; }
.path-card:hover { background: var(--atlas-white); transform: translateY(-4px); }
.path-card > div { display: flex; align-items: start; justify-content: space-between; color: var(--atlas-red); }
.path-card svg { width: 49px; height: 49px; }
.path-no { font-family: var(--atlas-serif); font-size: 13px; }
.path-card h3 { margin: 37px 0 10px; font-family: var(--atlas-serif); font-size: 25px; font-weight: 500; }
.path-card p { margin: 0; color: var(--atlas-muted); font-size: 13px; line-height: 1.75; }
.path-bottom { display: flex; justify-content: space-between; margin-top: 38px; color: var(--atlas-red); font-size: 9px; letter-spacing: .15em; }
.path-bottom span { font-size: 14px; }

.inspiration-section { padding: 97px 0 108px; color: var(--atlas-ink); background: var(--atlas-paper-2); }
.inspiration-section .atlas-section-head { align-items: end; }
.inspiration-section .atlas-section-head > div p { margin: 15px 0 0; color: var(--atlas-muted); font-size: 14px; }
.journal-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 0 18px; border-bottom: 1px solid var(--atlas-line); }
.journal-filters { display: flex; gap: 25px; }
.journal-filters button { padding: 0 0 5px; border: 0; color: var(--atlas-muted); background: transparent; font-size: 11px; cursor: pointer; }
.journal-filters button[aria-pressed="true"] { border-bottom: 1px solid var(--atlas-red); color: var(--atlas-red); }
.journal-filters small { margin-left: 4px; font-size: 9px; }
.journal-note { color: #929089; font-size: 10px; letter-spacing: .08em; }
.inspiration-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 58px 24px; padding-top: 30px; }
.inspiration-card { grid-column: span 4; }
.inspiration-card:nth-child(1), .inspiration-card:nth-child(4) { grid-column: span 8; }
.inspiration-card:nth-child(5), .inspiration-card:nth-child(6) { grid-column: span 6; }
.inspiration-card[hidden] { display: none; }
.image-open { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 0; background: transparent; cursor: zoom-in; }
.image-open { aspect-ratio: 16 / 9; }
.image-open img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transition: transform .6s var(--atlas-ease), filter .4s ease; }
.image-open:hover img { filter: saturate(.88); transform: scale(1.035); }
.image-zoom { position: absolute; right: 14px; bottom: 13px; display: grid; width: 33px; height: 33px; place-items: center; color: #fff; background: rgba(37,37,34,.65); font-size: 17px; opacity: 0; transition: opacity .25s ease; }
.image-open:hover .image-zoom, .image-open:focus-visible .image-zoom { opacity: 1; }
.inspiration-meta { display: flex; justify-content: space-between; margin-top: 14px; color: var(--atlas-red); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.inspiration-meta span:last-child { color: #9b9991; }
.inspiration-card h3 { margin: 8px 0 4px; font-family: var(--atlas-serif); font-size: 23px; font-weight: 500; }
.inspiration-card p { margin: 0; color: var(--atlas-muted); font-size: 12px; }

.editorial-feature { display: grid; grid-template-columns: 1.05fr .95fr; gap: 10%; align-items: center; }
.feature-image { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.feature-image img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; filter: saturate(.76) contrast(.98); }
.feature-image span { position: absolute; right: 17px; bottom: 15px; color: #fff; font-size: 9px; letter-spacing: .15em; }
.feature-copy { max-width: 450px; padding: 30px 0; }
.feature-copy h2 { margin-top: 22px; font-size: clamp(38px, 4.5vw, 62px); }
.feature-copy > p:not(.atlas-kicker) { margin: 26px 0 33px; color: var(--atlas-muted); font-size: 16px; line-height: 1.85; }
.material-palette { display: flex; gap: 17px; margin-bottom: 39px; }
.material-palette span { display: flex; align-items: center; gap: 7px; color: var(--atlas-muted); font-size: 10px; }
.material-palette span::before { display: inline-block; width: 16px; height: 16px; border: 1px solid rgba(37,37,34,.16); content: ""; background: var(--swatch); }
.feature-source { display: block; margin-top: 24px; color: #aaa79e; font-size: 9px; letter-spacing: .08em; }
.studio-section { color: var(--atlas-white); background: #2c302d; }
.studio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14%; padding: 110px 0 120px; }
.studio-section h2 { margin: 22px 0; font-family: var(--atlas-serif); font-size: clamp(38px, 4.8vw, 67px); font-weight: 400; letter-spacing: -.05em; line-height: 1.06; }
.studio-section p { color: rgba(255,253,250,.67); font-size: 15px; line-height: 1.85; }
.atlas-button.light { margin-top: 25px; border-color: #d99a82; color: #302924 !important; background: #d99a82; }
.atlas-button.light:hover { border-color: #e7b19c; background: #e7b19c; }
.studio-privacy { display: block; margin-top: 19px; color: rgba(255,255,255,.38); font-size: 10px; letter-spacing: .08em; }
.studio-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.2); }
.studio-steps li { display: grid; grid-template-columns: 46px 1fr 20px; gap: 14px; align-items: center; min-height: 102px; border-bottom: 1px solid rgba(255,255,255,.2); }
.studio-steps li > span { color: #d99a82; font-family: var(--atlas-serif); font-size: 12px; }
.studio-steps li > span:last-child { color: rgba(255,255,255,.75); font-size: 18px; text-align: right; }
.studio-steps h3 { margin: 0 0 4px; font-family: var(--atlas-serif); font-size: 19px; font-weight: 400; }
.studio-steps p { margin: 0; font-size: 12px; }
.source-note { display: flex; align-items: center; gap: 30px; padding-top: 84px; padding-bottom: 84px; }
.source-note-mark { color: var(--atlas-red); font-family: var(--atlas-serif); font-size: 44px; }
.source-note h2 { font-size: 31px; }
.source-note p { margin: 10px 0 0; color: var(--atlas-muted); font-size: 13px; }
.source-note .text-link { margin-left: auto; }

.atlas-footer { color: rgba(255,253,250,.72); background: #222622; }
.footer-top { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10%; padding: 75px 0 66px; }
.atlas-footer .brand { color: var(--atlas-white); }
.atlas-footer .brand svg { color: #d99a82; }
.atlas-footer .brand small, .atlas-footer .brand b { color: inherit; }
.atlas-footer p { margin: 24px 0 0; color: rgba(255,253,250,.48); font-family: var(--atlas-serif); font-size: 20px; line-height: 1.45; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.footer-links h2 { margin: 0 0 18px; color: #d99a82; font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.footer-links a { display: block; margin: 12px 0; color: rgba(255,253,250,.65); font-size: 12px; }
.footer-links a:hover, .footer-bottom a:hover { color: #fff; }
.footer-wordmark { overflow: hidden; color: rgba(255,255,255,.08); font-family: var(--atlas-serif); font-size: clamp(80px, 17vw, 230px); letter-spacing: -.08em; line-height: .8; white-space: nowrap; }
.footer-wordmark span { display: inline-block; margin-left: 15px; color: #d99a82; font-family: var(--atlas-sans); font-size: 15px; letter-spacing: normal; vertical-align: top; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding: 24px 0 27px; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,253,250,.42); font-size: 10px; letter-spacing: .06em; }
.footer-bottom a { color: rgba(255,253,250,.68); }

.image-dialog { width: min(1050px, calc(100% - 32px)); padding: 0; border: 0; color: var(--atlas-white); background: #20231f; box-shadow: 0 24px 90px rgba(0,0,0,.38); }
.image-dialog::backdrop { background: rgba(14, 17, 15, .76); backdrop-filter: blur(5px); }
.image-dialog img { width: 100%; max-height: 75vh; object-fit: contain; background: #171916; }
.image-dialog > div { padding: 17px 22px 20px; }
.image-dialog h2 { margin: 0; font-family: var(--atlas-serif); font-size: 24px; font-weight: 400; }
.image-dialog p { margin: 5px 0 0; color: rgba(255,255,255,.62); font-size: 12px; }
.dialog-close { position: absolute; z-index: 1; top: 11px; right: 13px; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(255,255,255,.6); color: #fff; background: rgba(0,0,0,.28); font-size: 23px; line-height: 1; cursor: pointer; }

/* Shared editorial treatment for the existing resource, workspace and guide pages. */
.yj .site-shell, .yj main { background: var(--atlas-paper); }
.yj .page-hero { padding: 95px 0 62px; color: var(--atlas-ink); background: var(--atlas-paper-2); }
.yj .page-hero { position: relative; isolation: isolate; overflow: hidden; }
.yj .page-hero::after { position: absolute; z-index: -1; top: 0; right: 0; width: min(46vw, 620px); height: 100%; content: ""; opacity: .45; background: linear-gradient(115deg, transparent 8%, rgba(163,77,56,.08) 8.2%, transparent 8.6%, transparent 35%, rgba(37,37,34,.08) 35.2%, transparent 35.6%, transparent 68%, rgba(163,77,56,.06) 68.2%, transparent 68.7%), linear-gradient(90deg, transparent 49.7%, rgba(37,37,34,.07) 50%, transparent 50.3%); pointer-events: none; }
.yj .page-hero h1 { max-width: 830px; margin: 17px 0 15px; color: var(--atlas-ink); font-family: var(--atlas-serif); font-size: clamp(40px, 5.3vw, 72px); font-weight: 500; letter-spacing: -.055em; line-height: 1.03; }
.yj .page-hero p { max-width: 680px; color: var(--atlas-muted); font-size: 16px; line-height: 1.8; }
.yj .eyebrow, .yj .kicker { color: var(--atlas-red); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.yj .library-board, .yj .workspace-shell, .yj .entry-shell, .yj .support-shell, .yj .topic-directory { margin-top: -1px; padding-top: 45px; padding-bottom: 90px; }
.yj .content-card, .yj .workspace-resource-card, .yj .workspace-detail, .yj .entry-card, .yj .support-step-card, .yj .case-showcase-card { border: 1px solid var(--atlas-line); border-radius: 0; box-shadow: none; background: var(--atlas-white); }
.yj .library-card, .yj .directory-card { border: 1px solid rgba(255,255,255,.25); border-radius: 0; box-shadow: none; color: #fff; }
.yj .library-card:hover, .yj .directory-card:hover, .yj .entry-card:hover { border-color: var(--atlas-red); transform: translateY(-3px); }
.yj .library-card h2, .yj .directory-card h2, .yj .entry-card h3, .yj .content-card h2, .yj .workspace-detail strong { font-family: var(--atlas-serif); font-weight: 500; letter-spacing: -.02em; }
.yj .library-card h2, .yj .directory-card h2 { color: #fff; text-shadow: 0 8px 28px rgba(0,0,0,.36); }
.yj .library-card p, .yj .directory-card p { color: rgba(255,255,255,.82); }
.yj .primary-button, .yj .header-action { border-radius: 0; background: var(--atlas-red); box-shadow: none; }
.yj .ghost-button { border-radius: 0; border-color: var(--atlas-line); background: transparent; }
.yj .primary-button:hover, .yj .header-action:hover { background: var(--atlas-red-dark); }
.yj .site-footer { padding-top: 0; color: inherit; background: transparent; }
.yj .footer-grid { display: none; }
.yj .workspace-hero, .yj .materials-hero, .yj .geodata-hero, .yj .courses-hero, .yj .support-hero { background: var(--atlas-paper-2); }
.yj .material-browser, .yj .entry-browser, .yj .support-workflow, .yj .case-prompt-panel { border-radius: 0; border-color: var(--atlas-line); box-shadow: none; background: var(--atlas-white); }
.yj .material-item-card, .yj .tool-card, .yj .workflow-box { border-radius: 0; border-color: var(--atlas-line); box-shadow: none; }
.yj .material-item-card:hover, .yj .tool-card:hover { border-color: var(--atlas-red); transform: translateY(-3px); }
.yj .material-card-actions a, .yj .entry-actions a, .yj .entry-actions button, .yj .case-card-actions button, .yj .case-card-actions a { border-radius: 0; }
.yj .workspace-shell { margin-top: 0; padding: 40px 0 86px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.yj .workspace-tabs { display: flex; gap: 28px; padding: 0; margin: 0 0 28px; border: 0; border-bottom: 1px solid var(--atlas-line); border-radius: 0; background: transparent; }
.yj .workspace-tab { position: relative; height: 46px; padding: 0 0 14px; border: 0; border-radius: 0; color: var(--atlas-muted); background: transparent; font-size: 13px; font-weight: 600; }
.yj .workspace-tab.active { color: var(--atlas-red); background: transparent; box-shadow: none; }
.yj .workspace-tab.active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; content: ""; background: var(--atlas-red); }
.yj .workspace-toolbar { grid-template-columns: minmax(260px, 1fr) repeat(3, 165px); gap: 14px; }
.yj .workspace-search, .yj .workspace-filter-group, .yj .generator-form label { color: var(--atlas-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.yj .workspace-search input, .yj .workspace-filter-group select, .yj .generator-form select, .yj .generator-form textarea { min-height: 44px; border: 1px solid var(--atlas-line); border-radius: 0; color: var(--atlas-ink); background: var(--atlas-white); }
.yj .workspace-search input:focus, .yj .workspace-filter-group select:focus, .yj .generator-form select:focus, .yj .generator-form textarea:focus { outline: 1px solid var(--atlas-red); outline-offset: 1px; }
.yj .workspace-resource-card, .yj .workspace-detail { min-height: 180px; border-radius: 0; box-shadow: none; }
.yj .workspace-resource-card:hover { transform: translateY(-2px); box-shadow: none; }
.yj .workspace-card-actions button[data-action="detail"], .yj .detail-action-row button { border-radius: 0; color: var(--atlas-red); border-color: var(--atlas-line); background: transparent; }
.yj .workspace-card-actions button[data-action="detail"]:hover, .yj .detail-action-row button:hover { border-color: var(--atlas-red); background: rgba(163,77,56,.06); }
.yj .generator-form, .yj .generator-output { border: 1px solid var(--atlas-line); border-radius: 0; background: var(--atlas-white); box-shadow: none; }
.yj .output-actions { border-bottom: 1px solid var(--atlas-line); }
.yj .output-actions button, .yj .generator-actions button { border-radius: 0; }
.yj .workspace-recent span { border-radius: 0; }
.yj .workspace-results { gap: 14px; }
.yj .workspace-resource-card .resource-card-head button { border: 1px solid rgba(163,77,56,.2); border-radius: 0; color: var(--atlas-red); background: rgba(163,77,56,.06); }
.yj .workspace-resource-card .resource-card-head button[aria-pressed="true"] { color: var(--atlas-white); background: var(--atlas-red); }
.yj .workspace-tags span, .yj .workspace-meta span { border-radius: 0; }
.yj .materials-hero-actions a, .yj .material-browser-head a, .yj .material-source-strip a, .yj .material-card-actions a, .yj .material-card-actions button, .yj .entry-hero-actions a, .yj .entry-actions a, .yj .entry-actions button, .yj .case-hero-actions a, .yj .case-card-actions a, .yj .case-card-actions button { border-radius: 0; border-color: var(--atlas-line); color: var(--atlas-ink); background: var(--atlas-white); box-shadow: none; }
.yj .materials-hero-actions a:first-child, .yj .entry-hero-actions a:first-child, .yj .case-hero-actions a:first-child { border-color: var(--atlas-red); color: var(--atlas-white); background: var(--atlas-red); box-shadow: none; }
.yj .materials-hero-actions a:hover, .yj .material-browser-head a:hover, .yj .material-source-strip a:hover, .yj .material-card-actions a:hover, .yj .material-card-actions button:hover, .yj .entry-hero-actions a:hover, .yj .entry-actions a:hover, .yj .entry-actions button:hover, .yj .case-hero-actions a:hover, .yj .case-card-actions a:hover, .yj .case-card-actions button:hover { border-color: var(--atlas-red); color: var(--atlas-red); background: rgba(163,77,56,.06); }
.yj .materials-hero-actions a:first-child:hover, .yj .entry-hero-actions a:first-child:hover, .yj .case-hero-actions a:first-child:hover { color: var(--atlas-white); background: var(--atlas-red-dark); }
.yj .material-overview-grid article, .yj .material-browser, .yj .material-guide-grid article, .yj .material-source-strip, .yj .entry-overview-grid article, .yj .entry-browser, .yj .entry-card, .yj .case-workflow-grid article, .yj .case-prompt-panel, .yj .support-overview-grid article, .yj .support-workflow, .yj .support-template-grid article { border-radius: 0; border-color: var(--atlas-line); box-shadow: none; }
.yj .material-overview-grid span, .yj .material-browser-head span, .yj .material-guide-grid article > span, .yj .entry-kind, .yj .case-kind, .yj .support-overview-grid span { border: 1px solid rgba(163,77,56,.25); border-radius: 0; color: var(--atlas-red); background: transparent; }
.yj .material-filter-bar input, .yj .material-filter-bar select, .yj .entry-filter-bar input, .yj .entry-filter-bar select { border-radius: 0; border-color: var(--atlas-line); background: var(--atlas-white); }
.yj .material-item-card, .yj .material-empty-card { border-radius: 0; border-color: var(--atlas-line); box-shadow: none; }

/* The source images are landscape studies. A two-column library keeps their
   16:9 composition legible instead of squeezing them into near-square tiles. */
@media (min-width: 901px) {
  .yj .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .yj .library-card { aspect-ratio: 16 / 9; min-height: 0; }
}
.yj .library-card::after, .yj .directory-card::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(11,18,22,.12), transparent 56%), linear-gradient(0deg, rgba(10,16,20,.42), transparent 58%); pointer-events: none; }
.yj .library-card > *, .yj .directory-card > * { position: relative; z-index: 1; }
.yj .library-card:nth-child(1), .yj .directory-card:nth-child(1) { background-image: linear-gradient(180deg, rgba(16,24,32,.08), rgba(16,24,32,.84)), url('/assets/u-muse-civic.webp'); }
.yj .library-card:nth-child(2), .yj .directory-card:nth-child(2) { background-image: linear-gradient(180deg, rgba(16,24,32,.08), rgba(16,24,32,.84)), url('/assets/u-muse-skyline.webp'); }
.yj .library-card:nth-child(3), .yj .directory-card:nth-child(3) { background-image: linear-gradient(180deg, rgba(16,24,32,.08), rgba(16,24,32,.84)), url('/assets/u-muse-parametric.webp'); }
.yj .library-card:nth-child(4), .yj .directory-card:nth-child(4) { background-image: linear-gradient(180deg, rgba(16,24,32,.08), rgba(16,24,32,.84)), url('/assets/u-muse-greenterrace.webp'); }
.yj .library-card:hover, .yj .directory-card:hover { box-shadow: 0 18px 42px rgba(37,37,34,.16); }
.yj .material-status, .yj .workspace-status-row p { display: flex; align-items: center; gap: 9px; }
.yj .material-status::before, .yj .workspace-status-row p::before { display: inline-block; width: 6px; height: 6px; border-radius: 50%; content: ""; background: var(--atlas-red); box-shadow: 0 0 0 4px rgba(163,77,56,.1); }
.yj .workspace-empty { padding: 32px 20px; border: 1px dashed var(--atlas-line); color: var(--atlas-muted); background: rgba(255,253,250,.55); text-align: center; }

@media (max-width: 1050px) {
  :root { --atlas-wrap: min(100% - 48px, 920px); }
  .masthead-inner { gap: 25px; }
  .atlas-nav { gap: 19px; }
  .cover-grid { gap: 44px; }
  .cover-art, .cover-art img { min-height: 0; height: 100%; }
  .studio-grid { gap: 8%; }
}
@media (max-width: 900px) {
  :root { --atlas-wrap: calc(100% - 40px); }
  .masthead-inner { min-height: 72px; }
  .atlas-nav, .nav-workspace { display: none; }
  .nav-toggle { display: block; }
  .atlas-mobile, .mobile-menu.atlas-mobile { position: absolute; top: calc(100% + 1px); right: 20px; left: 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; padding: 10px; border: 1px solid var(--atlas-line); background: var(--atlas-paper); box-shadow: 0 14px 36px rgba(37,37,34,.12); }
  .atlas-mobile[hidden] { display: none; }
  .atlas-mobile a { padding: 13px; color: var(--atlas-muted); font-size: 12px; }
  .atlas-mobile a[aria-current="page"] { color: var(--atlas-red); background: rgba(163,77,56,.07); }
  .atlas-mobile a:last-child { grid-column: 1 / -1; color: var(--atlas-white); background: var(--atlas-red); }
  .cover-section { padding-top: 30px; }
  .cover-grid, .editorial-feature, .studio-grid { grid-template-columns: 1fr; }
  .cover-grid { padding-top: 50px; }
  .cover-copy { padding-left: 0; }
  .cover-art { order: -1; }
  .cover-copy h1 { max-width: 9em; font-size: clamp(48px, 10vw, 72px); }
  .cover-index { margin-top: 42px; }
  .atlas-search { grid-template-columns: 1fr; gap: 14px; }
  .atlas-search p { grid-column: auto; margin: 0 0 0 34px; }
  .path-grid { grid-template-columns: repeat(2, 1fr); }
  .path-card:nth-child(2) { border-right: 0; }
  .path-card:nth-child(-n+2) { border-bottom: 1px solid var(--atlas-line); }
  .inspiration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 20px; }
  .inspiration-card, .inspiration-card:nth-child(1), .inspiration-card:nth-child(4), .inspiration-card:nth-child(5), .inspiration-card:nth-child(6) { grid-column: span 1; }
  .studio-grid { gap: 50px; }
  .footer-top { grid-template-columns: 1fr; gap: 50px; }
}
@media (max-width: 600px) {
  :root { --atlas-wrap: calc(100% - 32px); }
  .brand b { font-size: 18px; }
  .brand svg { width: 31px; height: 31px; }
  .cover-section { padding-bottom: 54px; }
  .cover-topline { font-size: 8px; letter-spacing: .12em; }
  .cover-topline span:last-child { display: none; }
  .cover-grid { gap: 34px; padding: 36px 0 50px; }
  .cover-art, .cover-art img { min-height: 0; height: 100%; }
  .cover-art figcaption { padding: 65px 16px 17px; }
  .cover-art figcaption strong { font-size: 20px; }
  .cover-art-label { top: 12px; left: 13px; font-size: 7px; }
  .cover-copy h1 { font-size: clamp(45px, 13vw, 68px); }
  .cover-intro { margin-top: 22px; font-size: 14px; }
  .desktop-break { display: none; }
  .cover-actions { gap: 18px; margin-top: 27px; }
  .cover-actions .atlas-button { min-height: 42px; padding: 0 14px; font-size: 11px; }
  .cover-index { margin-top: 38px; }
  .atlas-search { padding: 18px 14px; }
  .atlas-search > label { font-size: 16px; }
  .atlas-search button { padding-right: 0; }
  .atlas-section { padding: 69px 0; }
  .section-caption { gap: 15px; font-size: 8px; letter-spacing: .12em; }
  .section-caption span:last-child { text-align: right; }
  .atlas-section-head { display: block; margin: 23px 0 30px; }
  .atlas-section-head .text-link { margin-top: 22px; }
  .atlas-section h2 { font-size: 35px; }
  .path-grid { grid-template-columns: 1fr; }
  .path-card, .path-card:nth-child(2) { min-height: 245px; border-right: 0; border-bottom: 1px solid var(--atlas-line); }
  .path-card:last-child { border-bottom: 0; }
  .path-card h3 { margin-top: 27px; }
  .inspiration-section { padding: 68px 0 76px; }
  .inspiration-section .atlas-section-head > div p { font-size: 13px; }
  .journal-bar { display: block; }
  .journal-filters { gap: 16px; overflow-x: auto; padding-bottom: 12px; }
  .journal-note { display: block; padding-top: 10px; }
  .inspiration-grid { grid-template-columns: 1fr; gap: 35px; }
  .image-open img { aspect-ratio: 16 / 9; }
  .editorial-feature { gap: 25px; }
  .feature-image img { aspect-ratio: auto; }
  .feature-copy { padding: 17px 0 0; }
  .feature-copy h2 { font-size: 41px; }
  .feature-copy > p:not(.atlas-kicker) { margin: 22px 0 28px; font-size: 14px; }
  .material-palette { gap: 11px; flex-wrap: wrap; margin-bottom: 29px; }
  .studio-grid { padding: 75px 0 82px; }
  .studio-section h2 { font-size: 42px; }
  .studio-steps li { grid-template-columns: 32px 1fr 18px; min-height: 92px; }
  .source-note { display: block; padding: 58px 0; }
  .source-note h2 { margin-top: 8px; font-size: 28px; }
  .source-note .text-link { margin-top: 22px; }
  .footer-top { padding: 58px 0 45px; }
  .footer-links { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .footer-links > div:last-child { grid-column: 1 / -1; }
  .footer-wordmark { font-size: 23vw; }
  .footer-bottom { align-items: start; flex-wrap: wrap; gap: 11px; line-height: 1.5; }
  .footer-bottom span:nth-child(2) { order: 3; width: 100%; }
  .yj .page-hero { padding-top: 68px; padding-bottom: 44px; }
  .yj .page-hero h1 { font-size: 43px; }
  .yj .library-board, .yj .workspace-shell, .yj .entry-shell, .yj .support-shell, .yj .topic-directory { padding-top: 28px; padding-bottom: 58px; }
  .yj .page-hero::after { width: 100%; opacity: .25; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}