/* ================================================================= SNOWLEOPARD Studio & Research — research.css Research page (research.html): page head, article grid with margin notes, the Valerius system band, the Study and the closing band. Depends on the tokens, header, footer and buttons in base.css. ================================================================= */ /* ----- Shared elements -------------------------------------------- */ .rp-label { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--museum-black); display: block; } .rp-label::after { content: ""; display: inline-block; width: 48px; height: 1px; margin-left: 1rem; vertical-align: 0.34em; background: rgba(38, 38, 38, 0.45); } /* Hidden only when JavaScript is running to reveal it (.js is set in ), so content stays visible if the script fails. */ .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.72s ease, transform 0.72s ease; } .js .reveal.on { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } } .rp-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--edge); } /* Opening article block: extra space above, page edge kept on small screens. */ .rp-wrap--lead { padding-top: 6.5rem; padding-bottom: 2rem; } .rp-rule { max-width: var(--maxw); margin: 0 auto; border: none; border-top: 1px solid rgba(38, 38, 38, 0.14); } /* ----- Page head -------------------------------------------------- */ /* Top-anchored so the eyebrow sits 6rem below the band on every page head. */ .rp-head { position: relative; overflow: hidden; padding: 6rem 0 5rem; background: #f2ebe5; display: flex; align-items: flex-start; min-height: clamp(440px, 44vw, 540px); } .rp-head-bg { position: absolute; inset: 0; background: url("../images/heroes/research-banner.jpg") center center/cover no-repeat; } /* Veil: solid under the copy, released across the avenue. */ /* Desktop veil; narrower viewports set their own in responsive.css. */ .rp-head-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to right, rgba(242, 235, 229, 0.95) 0%, rgba(242, 235, 229, 0.9) 34%, rgba(242, 235, 229, 0.76) 56%, rgba(242, 235, 229, 0.62) 80%, rgba(242, 235, 229, 0.58) 100% ); } /* Soft fade into the page below. */ .rp-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(to bottom, rgba(243, 239, 230, 0), var(--bone)); pointer-events: none; } .rp-head-inner { position: relative; z-index: 1; width: 100%; } .rp-head-grid { display: block; max-width: min(620px, 53%); } .rp-intro { margin-top: 1.7rem; } .rp-h1 { font-weight: 600; line-height: 1.1; font-size: clamp( 2.4rem, 4.5vw, 3.95rem ); /* Matches the Ghostwriting and Portfolio banner headings. */ letter-spacing: -0.012em; margin-top: 1.6rem; text-wrap: balance; } .rp-h1 em { font-style: italic; font-weight: 500; } .rp-intro p { font-size: 1.18rem; font-weight: 400; line-height: 1.78; color: var(--museum-black); } .rp-areas { margin-top: 2.4rem; margin-bottom: 1.6rem; font-family: var(--sans); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--museum-black); line-height: 2; } .rp-areas .sep { color: var(--ink-soft); padding: 0 0.6rem; } .rp-areas .topic { white-space: nowrap; } .rp-scroll-cue { display: inline-block; margin-top: 0.35rem; font-family: var(--serif); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--museum-black); text-decoration: none; border-bottom: 1px solid rgba(38, 38, 38, 0.28); padding-bottom: 0.3rem; transition: border-color 0.25s ease; } .rp-scroll-cue:hover { border-bottom-color: var(--museum-black); } .rp-scroll-cue:focus-visible { outline: 2px solid var(--museum-black); outline-offset: 4px; } .rp-scroll-cue .arr { display: inline-block; margin-left: 0.45rem; transition: transform 0.25s ease; } .rp-scroll-cue:hover .arr { transform: translateY(3px); } /* ----- Article grid with margin notes ----------------------------- */ .rp-article { display: grid; grid-template-columns: minmax(0, var(--measure)) var(--margin-col); gap: var(--spine-gap); justify-content: center; } /* The Field Notes line closes the section, set apart from the list above. */ .rp-coda { margin-top: 2.6rem; } .rp-prose p { margin-bottom: 1.7rem; font-weight: 400; } /* Compound selector so the label outranks the prose rule. */ .rp-prose p.rp-label { font-weight: 600; } .rp-prose .rp-label { margin-bottom: 2.2rem; } .rp-h2 { font-weight: 600; font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.15; margin: 0 0 2.2rem; } .rp-marginalia { position: relative; } .rp-mnote { font-family: var(--sans); font-size: 0.74rem; line-height: 1.65; color: var(--ink-soft); border-top: 1px solid rgba(38, 38, 38, 0.18); padding-top: 0.7rem; margin-bottom: 3.2rem; } .rp-mnote b { color: var(--museum-black); font-weight: 600; display: block; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.68rem; margin-bottom: 0.3rem; } .rp-mnote em { font-style: italic; } /* Numbered entries with a small figure counter. */ .rp-list { list-style: none; counter-reset: mn; margin: 0; padding: 0; } .rp-list li { counter-increment: mn; position: relative; padding-left: 2.1rem; margin-bottom: 0.85rem; } .rp-list li:last-child { margin-bottom: 0; } .rp-list li::before { content: "0" counter(mn); position: absolute; left: 0; top: 0.05rem; font-family: var(--sans); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.1em; color: var(--fireweed); } .rp-item { display: block; color: var(--museum-black); font-weight: 500; line-height: 1.4; } .rp-sub { display: block; color: var(--ink-soft); font-size: 0.86em; line-height: 1.5; margin-top: 0.12rem; } /* ----- System band ------------------------------------------------ */ .rp-system { background: var(--birch-light); padding: 5.5rem 0 6.5rem; } /* ----- Photograph and text cards ---------------------------------- */ .rp-agent { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: var(--maxw); margin: 5rem auto 0; padding: 0 2rem; } .rp-agent .rp-photo { overflow: hidden; background: var(--birch-light); } .rp-agent .rp-photo img { height: 100%; width: 100%; object-fit: cover; object-position: 50% 35%; display: block; } .rp-agent-quote { background: var(--birch-light); display: flex; flex-direction: column; justify-content: center; padding: 4.5rem 4rem; border: 1px solid rgba(38, 38, 38, 0.12); border-left: none; } .rp-agent-quote p { font-size: clamp(1.2rem, 1.9vw, 1.55rem); font-style: italic; font-weight: 400; line-height: 1.6; } .rp-agent-quote .rp-attr { margin: 0 0 1.1rem; font-family: var(--sans); font-style: normal; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--museum-black); display: block; } .rp-agent-quote .rp-attr::after { content: ""; display: inline-block; width: 48px; height: 1px; margin-left: 1rem; vertical-align: 0.34em; background: rgba(38, 38, 38, 0.45); } /* ----- Closing band ----------------------------------------------- */ /* A bone wash over the orchid photograph, heaviest under the copy and faded before any edge. */ .rp-close { position: relative; isolation: isolate; overflow: hidden; background: var(--bone); color: var(--museum-black); padding: 7rem 0 8rem; } .rp-close::before { content: ""; position: absolute; z-index: -2; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: min(1500px, 100%); background: url("../images/heroes/orchid-fern.jpg") center center/cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 88%, transparent 100%), linear-gradient(#000 0%, #000 74%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 88%, transparent 100%), linear-gradient(#000 0%, #000 74%, transparent 100%); mask-composite: intersect; } .rp-close::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient( 100deg, rgba(243, 239, 230, 0.93) 0%, rgba(243, 239, 230, 0.9) 52%, rgba(243, 239, 230, 0.72) 74%, rgba(243, 239, 230, 0.52) 100% ), linear-gradient(rgba(243, 239, 230, 0.2), rgba(243, 239, 230, 0.2)); } .rp-close-inner { position: relative; max-width: 880px; margin: 0 auto; padding: 0 2rem; text-align: center; } /* Portrait plate: Birch Light mat and Apothecary hairline. */ .rp-portrait { width: 168px; margin: 0 auto 2.4rem; padding: 8px; background: var(--birch-light); border: 1px solid var(--apothecary); } .rp-portrait img { display: block; width: 100%; height: auto; } .rp-close h2 { color: var(--apothecary); font-size: clamp(1.9rem, 3vw, 2.6rem); margin: 0 0 2.2rem; font-weight: 600; line-height: 1.18; } /* Solid ink: translucent text over a photograph has unpredictable contrast. */ .rp-close p { font-weight: 400; font-size: 1.16rem; line-height: 1.8; color: #3b3833; max-width: 62ch; margin: 0 auto 3rem; } /* Where the copy spans the band, the wash holds its full weight. */ @media (max-width: 600px), (orientation: landscape) and (max-width: 1000px) and (max-height: 500px), (min-width: 601px) and (max-width: 1024px) and (orientation: portrait), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { .rp-portrait { width: 140px; margin-bottom: 1.9rem; } } @media (max-width: 1140px), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { .rp-close::after { background: linear-gradient( 100deg, rgba(243, 239, 230, 0.94) 0%, rgba(243, 239, 230, 0.92) 60%, rgba(243, 239, 230, 0.86) 100% ), linear-gradient(rgba(243, 239, 230, 0.24), rgba(243, 239, 230, 0.24)); } } /* ----- Responsive ------------------------------------------------- */ @media (max-width: 1024px), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { .rp-head-grid { max-width: none; } /* Stacked, the article keeps the spine shared with About and Portfolio. */ .rp-article { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: var(--spine); margin: 0 auto; } .rp-prose { max-width: var(--measure); } .rp-marginalia { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 3rem; } .rp-agent { grid-template-columns: 1fr; } .rp-agent-quote { border-left: 1px solid rgba(38, 38, 38, 0.12); border-top: none; } } @media (max-width: 600px), (orientation: landscape) and (max-width: 1000px) and (max-height: 500px), (min-width: 601px) and (max-width: 1024px) and (orientation: portrait), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { .rp-head { padding: 4.5rem 0 3.5rem; } .rp-marginalia { grid-template-columns: 1fr; } } /* Page-opening eyebrow in the homepage hero's serif treatment. */ .rp-head .rp-label { font-family: var(--serif); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.18em; } /* Banner copy sits 6rem from the page edge, matching Ghostwriting. */ .rp-head .rp-head-inner { max-width: none; margin: 0; padding: 0 var(--edge); } @media (max-width: 600px), (orientation: landscape) and (max-width: 1000px) and (max-height: 500px), (min-width: 601px) and (max-width: 1024px) and (orientation: portrait), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { .rp-head .rp-head-inner { padding: 0 var(--edge); } /* Research areas stack one per line. */ .rp-areas { font-size: 0.7rem; line-height: 1.9; } /* Stacked tags may wrap, so enlarged text never overflows the screen. */ .rp-areas .topic { display: block; white-space: normal; } .rp-areas .sep { display: none; } .rp-areas br { display: none; } } /* ----- The Study -------------------------------------------------- */ .rp-study { padding-top: 5.5rem; padding-bottom: 3.5rem; } /* Single column where three would break each subtitle. */ @media (max-width: 900px), (orientation: landscape) and (max-width: 1000px) and (max-height: 500px), (min-width: 601px) and (max-width: 1024px) and (orientation: portrait), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { .rp-study { padding-top: 4rem; padding-bottom: 2.5rem; } } /* Heavier banner copy where it sits directly over the photograph. */ @media (max-width: 600px), (orientation: landscape) and (max-width: 1000px) and (max-height: 500px), (min-width: 601px) and (max-width: 1024px) and (orientation: portrait), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { .rp-intro p { font-weight: 600; } } /* ----- Single-column layouts -------------------------------------- */ /* Margin notes join the reading sequence in the order they are consulted. */ .rp-mobile-institutions { display: none; } @media (max-width: 600px), (orientation: landscape) and (max-width: 1000px) and (max-height: 500px), (min-width: 601px) and (max-width: 1024px) and (orientation: portrait), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { /* Study order: prose, credentials, current research. */ .rp-study .rp-marginalia { display: none; } .rp-mobile-institutions { display: block; margin: 2.35rem 0 2.45rem; } .rp-mobile-institutions .rp-mnote { margin: 0; padding-top: 1rem; border-top: 1px solid rgba(38, 38, 38, 0.2); } .rp-mobile-institutions .rp-mnote b { margin-bottom: 0.7rem; font-size: 0.7rem; letter-spacing: 0.1em; } .rp-mobile-institutions .rp-mnote + .rp-mnote { margin-top: 2.35rem; } .rp-mobile-institutions .rp-list li { padding-left: 2.25rem; margin-bottom: 1rem; } .rp-mobile-institutions .rp-item { font-size: 0.92rem; line-height: 1.35; } .rp-mobile-institutions .rp-sub { font-size: 0.78rem; line-height: 1.4; margin-top: 0.18rem; } .rp-study { padding-top: 3.5rem; padding-bottom: 3rem; } .rp-study .rp-prose p { margin-bottom: 1.45rem; } .rp-study .rp-prose .rp-label { margin-bottom: 1.5rem; } .rp-study .rp-h2 { margin-bottom: 1.8rem; line-height: 1.12; } .rp-study .rp-coda { margin-top: 0; margin-bottom: 0; } .rp-system { padding-top: 4.25rem; padding-bottom: 4.75rem; } .rp-agent { padding: 0 var(--edge); } .rp-close { padding-top: 5rem; padding-bottom: 5.5rem; } } /* Certifications fall before the Field Notes line. */ .rp-mobile-certification { display: none; } @media (max-width: 600px), (orientation: landscape) and (max-width: 1000px) and (max-height: 500px), (min-width: 601px) and (max-width: 1024px) and (orientation: portrait), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { .rp-mobile-certification { display: block; margin: 2.35rem 0 2.45rem; } .rp-mobile-certification .rp-mnote { margin: 0; padding-top: 1rem; border-top: 1px solid rgba(38, 38, 38, 0.2); } .rp-mobile-certification .rp-mnote b { margin-bottom: 0.7rem; font-size: 0.7rem; letter-spacing: 0.1em; } .rp-mobile-certification .rp-list li { padding-left: 2.25rem; margin-bottom: 1rem; } .rp-mobile-certification .rp-item { font-size: 0.92rem; line-height: 1.35; } .rp-mobile-certification .rp-sub { font-size: 0.78rem; line-height: 1.4; margin-top: 0.18rem; } .rp-wrap--lead .rp-marginalia .rp-mnote:first-child { display: none; } } /* A Birch ground separates the newsletter band from the bone closing band. */ .field-notes { background: var(--birch-light); } /* Valerius card: text panel left, photograph right. */ .rp-agent--reverse .rp-agent-quote { background: var(--bone); border: 1px solid rgba(38, 38, 38, 0.12); border-right: none; } @media (max-width: 760px), (orientation: landscape) and (max-width: 1000px) and (max-height: 500px), (min-width: 601px) and (max-width: 1024px) and (orientation: portrait), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { .rp-agent--reverse .rp-agent-quote { border-right: 1px solid rgba(38, 38, 38, 0.12); border-bottom: none; } } /* Photograph and text cards share one height: a 4:5 photograph and a text panel stretched to match. */ @media (min-width: 761px) and (orientation: landscape) and (min-height: 501px), (min-width: 1001px) and (orientation: landscape), (min-width: 1025px) and (hover: hover), (min-width: 1367px) { .rp-agent { height: auto; align-items: stretch; } .rp-agent .rp-photo { aspect-ratio: 4 / 5; } } /* The photograph is drawn taller than the short band so no edge shows. */ @media (max-width: 600px), (orientation: landscape) and (max-width: 1000px) and (max-height: 500px), (min-width: 601px) and (max-width: 1024px) and (orientation: portrait), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { .rp-close { background: #fff9e9; color: var(--museum-black); } .rp-close::before { top: -10%; bottom: -10%; left: 0; right: 0; transform: none; width: 100%; background-position: 58% center; background-size: auto 120%; background-repeat: no-repeat; -webkit-mask-image: none; mask-image: none; opacity: 0.78; } .rp-close::after { background: rgba(255, 249, 233, 0.68); } .rp-close h2 { color: var(--apothecary); font-weight: 700; } .rp-close p { color: #3b3833; font-weight: 600; } } /* Text before photograph, as an explicit flex stack (mobile Safari reorders grid items with `order` inconsistently). */ @media screen and (max-width: 600px), screen and (orientation: landscape) and (max-width: 1000px) and (max-height: 500px), screen and (min-width: 601px) and (max-width: 1024px) and (orientation: portrait), screen and (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { figure.rp-agent.rp-study-visual { display: flex !important; flex-direction: column !important; } figure.rp-agent.rp-study-visual > .rp-agent-quote { order: 1 !important; width: 100%; border: 1px solid rgba(38, 38, 38, 0.12); border-bottom: none; } figure.rp-agent.rp-study-visual > .rp-photo { order: 2 !important; width: 100%; } } /* Field Notes card: text first, then the vineyard photograph. */ .rp-fieldnotes-visual .rp-photo img { object-position: 50% 50%; } @media screen and (max-width: 600px), screen and (orientation: landscape) and (max-width: 1000px) and (max-height: 500px), screen and (min-width: 601px) and (max-width: 1024px) and (orientation: portrait), screen and (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { figure.rp-agent.rp-fieldnotes-visual { display: flex !important; flex-direction: column !important; } .rp-fieldnotes-visual .rp-agent-quote { order: 1; } .rp-fieldnotes-visual .rp-photo { order: 2; } } /* The three cards share one desktop measure and 4:5 photograph geometry. */ @media (min-width: 761px) and (orientation: landscape) and (min-height: 501px), (min-width: 1001px) and (orientation: landscape), (min-width: 1025px) and (hover: hover), (min-width: 1367px) { figure.rp-agent.rp-fieldnotes-visual, figure.rp-agent.rp-study-visual { width: min(100vw, var(--maxw)); max-width: var(--maxw); margin-left: 50%; margin-right: 0; transform: translateX(-50%); } .rp-fieldnotes-section { padding-bottom: 6.5rem; } .rp-study { padding-bottom: 6.5rem; } } @media (max-width: 760px), (orientation: landscape) and (max-width: 1000px) and (max-height: 500px), (min-width: 601px) and (max-width: 1024px) and (orientation: portrait), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { .rp-fieldnotes-section { padding-bottom: 4rem; } .rp-study { padding-bottom: 4rem; } } /* Warm ground for the opening section; the Study stays on bone. */ .rp-wrap.rp-wrap--lead { background: #dfd4ca; max-width: none; padding-left: max(var(--edge), calc((100vw - var(--maxw)) / 2 + var(--edge))); padding-right: max( var(--edge), calc((100vw - var(--maxw)) / 2 + var(--edge)) ); } .rp-wrap.rp-wrap--lead > .rp-article { max-width: var(--maxw); margin-left: auto; margin-right: auto; } .rp-wrap.rp-study { background: var(--bone); } @media (max-width: 600px), (orientation: landscape) and (max-width: 1000px) and (max-height: 500px), (min-width: 601px) and (max-width: 1024px) and (orientation: portrait), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { .rp-wrap.rp-wrap--lead { padding-left: var(--edge); padding-right: var(--edge); } } /* Practice in the World: warm ground at full width. */ .rp-wrap.rp-fieldnotes-section { position: relative; clip-path: inset(0 -100vmax); } .rp-wrap.rp-fieldnotes-section { background: #dfd4ca; max-width: none; margin-top: 0; padding-top: clamp(4.75rem, 6vw, 6.5rem); padding-bottom: clamp(4.75rem, 6vw, 6.5rem); padding-left: var(--edge); padding-right: var(--edge); } .rp-wrap.rp-fieldnotes-section > .rp-agent { width: min(100%, var(--maxw)); max-width: var(--maxw); margin: 0 auto; } /* Joins the warm ground to the section above without a pale seam. */ .rp-wrap.rp-fieldnotes-section { box-shadow: 0 -1px 0 #dfd4ca; } @media (max-width: 600px), (orientation: landscape) and (max-width: 1000px) and (max-height: 500px), (min-width: 601px) and (max-width: 1024px) and (orientation: portrait), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { .rp-wrap.rp-fieldnotes-section { padding-top: 3.5rem; padding-bottom: 3.75rem; padding-left: var(--edge); padding-right: var(--edge); } } /* Field Notes card: centred on the measure with the standard 5rem spacing. */ @media (min-width: 761px) and (orientation: landscape) and (min-height: 501px), (min-width: 1001px) and (orientation: landscape), (min-width: 1025px) and (hover: hover), (min-width: 1367px) { figure.rp-agent.rp-fieldnotes-visual { width: min(100%, var(--maxw)); max-width: var(--maxw); margin: 0 auto; transform: none; } .rp-wrap.rp-fieldnotes-section { padding-top: 3rem; /* With the 2rem lead-section bottom, a 5rem card rhythm. */ } /* The Study card is centred with auto margins, not transforms, so the reveal animation cannot shift it. */ .rp-wrap.rp-study { max-width: none; padding-left: 0; padding-right: 0; } .rp-wrap.rp-study > .rp-article { width: min(100%, var(--maxw)); max-width: var(--maxw); margin-left: auto; margin-right: auto; padding-left: var(--edge); padding-right: var(--edge); } figure.rp-agent.rp-study-visual { width: min(100%, var(--maxw)); max-width: var(--maxw); position: static; left: auto; margin-left: auto; margin-right: auto; transform: none; } /* Desktop: photograph left, copy right. */ .rp-fieldnotes-visual .rp-photo { grid-column: 1; grid-row: 1; } .rp-fieldnotes-visual .rp-agent-quote { grid-column: 2; grid-row: 1; border-left: none; border-right: 1px solid rgba(38, 38, 38, 0.12); } } /* One gutter and consistent spacing for the cards in single-column layouts. */ @media (max-width: 600px), (orientation: landscape) and (max-width: 1000px) and (max-height: 500px), (min-width: 601px) and (max-width: 1024px) and (orientation: portrait), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { .rp-agent { width: 100%; padding-left: var(--edge); padding-right: var(--edge); margin-top: 3.25rem; } .rp-agent-quote { padding: 2.7rem 1.55rem; } .rp-mobile-institutions, .rp-mobile-certification { margin-top: 2.2rem; margin-bottom: 2.3rem; } .rp-close-inner { padding-left: var(--edge); padding-right: var(--edge); } } /* Equal space above and below each card. */ @media screen and (max-width: 600px), screen and (orientation: landscape) and (max-width: 1000px) and (max-height: 500px), screen and (min-width: 601px) and (max-width: 1024px) and (orientation: portrait), screen and (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { :root { --rp-mobile-card-space: 2.75rem; } /* The card section provides the spacing, not the section above it. */ .rp-wrap.rp-wrap--lead { padding-bottom: 0; } .rp-wrap.rp-fieldnotes-section { padding-top: var(--rp-mobile-card-space); padding-bottom: var(--rp-mobile-card-space); } .rp-wrap.rp-fieldnotes-section > .rp-agent { margin-top: 0; margin-bottom: 0; } /* Valerius and Study cards sit the same distance below the text. */ .rp-system > figure.rp-agent, figure.rp-agent.rp-study-visual { margin-top: var(--rp-mobile-card-space); margin-bottom: 0; } /* Matching space after the Study card. */ .rp-wrap.rp-study { padding-bottom: var(--rp-mobile-card-space); } } /* Hero portrait over the avenue, in its frame. */ .rp-head .rp-head-inner { display: flex; align-items: center; gap: clamp(3rem, 6vw, 7rem); } .rp-head .rp-head-grid { flex: 0 1 620px; min-width: 0; } .rp-head .rp-portrait--hero { flex: none; width: clamp(300px, 28vw, 420px); max-width: 100%; margin: 0 auto; } @media (min-width: 1025px) and (orientation: landscape), (min-width: 1025px) and (hover: hover), (min-width: 1367px) { /* Aligns the portrait with the road beneath it. */ .rp-head .rp-portrait--hero { transform: translateX(clamp(-60px, -4vw, -40px)); } } @media (max-width: 1024px), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { .rp-head .rp-head-inner { flex-direction: column; align-items: flex-start; gap: 2.75rem; } .rp-head .rp-head-grid { flex: none; width: 100%; } .rp-head .rp-portrait--hero { width: 240px; margin: 0 auto; } } @media (max-width: 600px), (orientation: landscape) and (max-width: 1000px) and (max-height: 500px), (min-width: 601px) and (max-width: 1024px) and (orientation: portrait), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { .rp-head .rp-head-inner { gap: 2.25rem; } .rp-head .rp-portrait--hero { width: 180px; } } /* Stacked order: introduction, portrait, research areas, scroll cue. */ .rp-portrait--mobile { display: none; } @media (max-width: 600px), (orientation: landscape) and (max-width: 1000px) and (max-height: 500px), (min-width: 601px) and (max-width: 1024px) and (orientation: portrait), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { .rp-head .rp-portrait--hero { display: none; } .rp-head .rp-portrait--mobile { display: block; width: 180px; max-width: 100%; margin: 2rem 0 0; } }