/* ABOUTME: Neutral gallery keeps comparisons focused on all independent design directions. */
/* ABOUTME: The hub is independent of each prototype's styles and interactions. */
:root { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif; color: #293b31; background: #f4f3ed; }
* { box-sizing: border-box; }body { margin: 0; }a { color: inherit; text-underline-offset: 4px; }a:focus-visible { outline: 2px solid #4b6a48; outline-offset: 5px; }.study { max-width: 1370px; padding: 0 5%; margin: auto; }nav { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 29px 0; border-bottom: 1px solid #d9ddd1; }nav > a { font-size: 12px; text-decoration: none; }.brand { font-size: 24px; font-weight: 600; }.brand small { font-size: 9px; letter-spacing: .14em; margin-left: 15px; font-weight: 400; }.kicker { font-size: 10px; letter-spacing: .16em; color: #65715f; }header { padding: 57px 0 45px; }h1 { font-family: 'Songti SC', Georgia, serif; font-size: clamp(34px, 4vw, 56px); line-height: 1.35; font-weight: 500; letter-spacing: -.025em; margin: 17px 0 20px; }header p { color: #64705f; font-size: 13px; max-width: 650px; line-height: 1.9; }.facts { display: flex; flex-wrap: wrap; gap: 21px; font-size: 11px; padding-top: 7px; }.facts span::before { content: '·'; margin-right: 7px; color: #9d734e; }.quick-links { display: flex; flex-wrap: wrap; gap: 22px; padding-top: 25px; font-size: 12px; }.directions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 27px; }.direction { min-width: 0; }.preview { display: block; padding: 18px; background: #e9e8dd; border: 1px solid #dfdfd1; }.guide .preview { background: #e4e9f0; }.scrapbook .preview { background: #e6ddc7; }.preview img { display: block; width: 100%; aspect-ratio: 3/4; box-shadow: 0 4px 19px #1f2a1e14; }.preview:hover { border-color: #7f8e77; }.direction-heading { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding-top: 21px; }.direction-heading > span { font: italic 22px Georgia, serif; color: #7f8876; }.direction h2 { font-family: 'Songti SC', serif; font-size: 25px; margin: 0; font-weight: 500; }.direction small { color: #6d7867; font-size: 10px; }.direction p { font-size: 12px; color: #64705f; line-height: 1.85; margin: 13px 0 20px; }.actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; border-top: 1px solid #d5d9cd; padding-top: 15px; }.actions a:first-child { font-weight: 600; }.review-note { display: flex; align-items: center; gap: 70px; padding: 38px; margin: 60px 0 40px; background: #e9ecdf; }.review-note h2 { font: 25px/1.6 'Songti SC', serif; margin: 12px 0 0; white-space: nowrap; }.review-note ol { color: #5d6b56; padding-left: 20px; font-size: 12px; line-height: 2.4; }footer { border-top: 1px solid #d5d9cd; padding: 21px 0 30px; font-size: 10px; color: #677360; line-height: 1.8; }
@media(max-width:800px) { .study { padding: 0 5%; }.directions { gap: 16px; }.preview { padding: 10px; }.direction-heading { gap: 7px; }.direction h2 { font-size: 21px; }.direction small { width: 100%; }.actions { flex-wrap: wrap; }.review-note { gap: 25px; padding: 25px; }.brand small { display: none; } }
@media(max-width:560px) { nav { padding: 23px 0; }header { padding: 35px 0; }h1 { font-size: 36px; }.directions { grid-template-columns: 1fr; gap: 35px; }.preview { padding: 22px; }.direction-heading small { width: auto; margin-left: auto; }.direction h2 { font-size: 26px; }.direction p { font-size: 13px; }.review-note { display: block; margin-top: 40px; }.review-note ol { padding-left: 18px; line-height: 1.9; }.review-note li { margin-bottom: 10px; }.quick-links { gap: 15px; font-size: 11px; }.facts { gap: 12px; font-size: 10px; } }

/* Reference exploration cards also expose their inspiration source. */
.group-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:15px 0 25px;border-top:1px solid #d5d9cd;margin-top:10px;scroll-margin-top:20px}.group-heading h2{font:500 29px/1.4 'Songti SC',serif;margin:12px 0 0}.group-heading>span,.group-heading>a{font-size:11px;color:#64705f}.group-heading#originals{margin-top:65px}.references{row-gap:45px}.reference-link{font-size:11px;display:inline-block;margin:0 0 18px;color:#53664e}.reference .direction-heading small{width:100%;font-size:12px;margin-top:3px}.reference .direction-heading h2{font-size:27px}.reference p{font-size:13px;min-height:48px}.preview{position:relative}.preview-label{position:absolute;left:19px;bottom:19px;background:#fffdf3ed;padding:5px 9px;font-size:10px}.orange .preview{background:#ecc5b5}.yellow .preview{background:#e8dfba}.kraft .preview{background:#c7b799}.indigo .preview{background:#dfe0ed}.pastel .preview{background:#ece4dc}.coral .preview{background:#e6c9b8}.forest .preview{background:#b7c6ad}.actions{font-size:12px}.facts{font-size:12px}.review-note ol{font-size:13px}.quick-links{font-size:13px}footer{font-size:11px}
@media(max-width:850px){.references{grid-template-columns:repeat(2,minmax(0,1fr))}.group-heading>span{display:none}.reference p{min-height:0}}
@media(max-width:560px){.references{grid-template-columns:1fr}.group-heading{display:block}.group-heading h2{font-size:27px}.group-heading>a{display:inline-block;margin-top:15px}.reference .direction-heading small{margin-left:0}.preview-label{left:23px;bottom:23px}.reference p{font-size:14px}.reference .direction-heading h2{font-size:29px}}

.reference .export-count{font-size:11px;min-height:0;margin:0 0 14px;color:#64705f}