/* ================================================================= SNOWLEOPARD Studio & Research — portfolio.css Portfolio page (portfolio.html): banner, case studies, the Field Notes chapter (featured note, Field Record, topic archive). Depends on the tokens, header, footer and buttons in base.css. ================================================================= */ /* ----- Shared elements -------------------------------------------- */ .pf-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; } /* The hairline flows with the text, so a wrapped eyebrow ends on it. */ .pf-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; } } .pf-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--edge); } /* Case studies run on the shared reading spine; type is capped at the measure, media may use the full spine. */ /* Birch is the page ground; the forest bands are the only breaks. */ .pf-spine { padding-inline: max(var(--edge), calc((100% - var(--spine)) / 2)); background: var(--birch-light); display: flow-root; padding-bottom: 5rem; } /* The band supplies the closing space, so every case study ends on the same measure whatever its last element. */ .pf-spine > *:last-child, .pf-spine > *:last-child > *:last-child, .pf-spine > *:last-child > *:last-child > *:last-child { margin-bottom: 0; } /* A separate ground for the case study before the photographic band. */ .pf-spine--close { background: var(--apothecary); color: var(--bone); } .pf-spine--close .cs-eyebrow { color: rgba(243, 239, 230, 0.92); } .pf-spine--close .cs-head .cs-eyebrow::after { background: rgba(243, 239, 230, 0.92); } .pf-spine--close .cs-title, .pf-spine--close .cs-story p, .pf-spine--close .cs-close { color: var(--bone); } /* The Summerhill study sits on bone. */ .pf-spine--paper { background: var(--bone); } .pf-spine .cs-head, .pf-spine .cs-quote blockquote, .pf-spine .cs-quote cite, .pf-spine .cs-deliv h2, .pf-spine .cs-deliv .intro { max-width: var(--measure); } /* ----- Banner ----------------------------------------------------- */ .pf-banner { position: relative; overflow: hidden; /* Veil, photograph and flat colour. The photograph is sized to 118% to give it horizontal travel; the colour is the fallback if it fails to load. */ background: linear-gradient( to right, rgba(30, 75, 69, 0.95) 0%, rgba(30, 75, 69, 0.9) 34%, rgba(30, 75, 69, 0.6) 56%, rgba(30, 75, 69, 0.34) 72%, rgba(30, 75, 69, 0.16) 100% ), url("../images/heroes/jungle-banner.jpg") 100% 50% / 118% auto no-repeat var(--apothecary); color: var(--bone); border-bottom: none; /* Shares the Research and Ghostwriting banner height and 6rem top spacing. */ min-height: clamp(440px, 44vw, 540px); padding: 6rem 0 5rem; } /* Bone eyebrow and hairline on the forest ground. */ /* Canopy light carried to the top of the band, kept right of the headline so bone type holds its contrast. */ @media (min-width: 601px) and (orientation: landscape) and (min-height: 501px), (min-width: 1001px) and (orientation: landscape), (min-width: 1025px) and (hover: hover), (min-width: 1367px) { .pf-banner::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient( 19% 62% at 89% 12%, rgba(252, 246, 226, 0.27) 0%, rgba(250, 244, 224, 0.17) 38%, rgba(243, 239, 230, 0.07) 68%, rgba(243, 239, 230, 0) 100% ); } } .pf-banner .pf-label { color: rgba(243, 239, 230, 0.92); } .pf-banner .pf-label::after { background: rgba(243, 239, 230, 0.45); } .pf-banner .pf-wrap { position: relative; z-index: 1; } .pf-banner h1 { color: var(--bone); font-weight: 600; font-size: clamp(2.4rem, 4.5vw, 3.95rem); line-height: 1.1; letter-spacing: -0.012em; margin: 1.8rem 0 2rem; /* A ch measure keeps the headline to three balanced lines on desktop. */ max-width: 26ch; text-wrap: balance; } .pf-banner h1 em { font-style: italic; font-weight: 600; } /* ----- Case study ------------------------------------------------- */ .cs { padding-top: 4.5rem; } /* Closes with its own space before the photographic band that follows. */ #buffalo-charlie { padding-bottom: 3rem; } .cs-head { margin-bottom: 3rem; text-align: left; } .cs-eyebrow { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--museum-black); margin-bottom: 1.2rem; display: block; } .cs-title { font-weight: 600; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.15; max-width: none; margin: 0; text-wrap: balance; } .film-figure { margin: 0; } /* Film and photographs sit directly on the page, without a mat. */ .film-mat { background: none; border: none; padding: 0; } .video-wrap { position: relative; } /* Names the font for the video fallback text, which does not inherit it. */ .cs-video { font-family: var(--sans); } .cs-video { width: 100%; display: block; } .video-play { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%; background: rgba(243, 239, 230, 0.92); border: 1px solid rgba(38, 38, 38, 0.2); color: var(--museum-black); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.25s ease, background 0.25s ease; } .video-play:hover { transform: scale(1.06); background: var(--bone); } .is-playing .video-play { display: none; } /* Caption type comes from .media-caption in base.css. */ .film-cap { text-align: left; } /* The story column shares the reading spine with the Research prose. */ .cs-story { max-width: var(--spine); margin: 4.5rem auto 0; } .cs-story > * { max-width: var(--measure); } .cs-story p { font-weight: 400; margin-bottom: 1.7rem; } .cs-story .cs-close { font-style: italic; font-weight: 400; } /* Pull quote leading the case study. */ .cs-quote { text-align: left; padding: 0 0 4rem; } .cs-quote blockquote { margin: 0; padding: 0.25rem 0 1.5rem; } .cs-quote blockquote p { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.02rem, 1.35vw, 1.18rem); line-height: 1.7; color: var(--museum-black); } .cs-quote cite { display: flex; flex-direction: column; gap: 0.25rem; font-family: var(--sans); font-style: normal; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--apothecary); } .cs-quote .cs-quote-role { font-weight: 500; letter-spacing: 0.14em; color: var(--ink-soft); } /* Portrait framed in forest, like her first issue below. */ .cs-portrait { width: 190px; margin-top: 2.6rem; padding: 8px; background: var(--birch-light); border: 1px solid var(--apothecary); } .cs-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 4rem; align-items: center; margin-top: 4.5rem; } /* Lets a long unbroken word shrink rather than widen the grid track. */ .cs-grid-copy { min-width: 0; } .cs-grid .cs-heading { font-weight: 600; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.06; } .cs-grid .cs-sub { font-weight: 400; font-size: 1.12rem; line-height: 1.75; margin-top: 1.4rem; max-width: 38ch; } .cs-art { background: none; border: none; padding: 0; } .cs-art img { width: 100%; display: block; } .cs-art figcaption { text-align: left; } /* Discipline label, set like a gallery medium line. */ .cs-discipline { font-family: var(--sans); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin: 1.1rem 0 0; } /* The bottle is held to the band height and capped at 300px, the limit of its source resolution. */ .cs-art--bottle img { width: auto; max-height: 600px; margin: 0 auto; } .cs-art--bottle figcaption { text-align: center; margin-top: 1.4rem; } .cs-art--detail { margin-top: 2.6rem; } .cs-art--detail img { width: 100%; max-width: 300px; } .cs-art--detail figcaption { max-width: 300px; } /* First issue disclosure: a white card in a Birch Light mat that grows as one. */ .cs-issue { max-width: none; margin: 4.5rem 0 0; background: var(--birch-light); border: 1px solid var(--apothecary); padding: 13px; } .issue-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; background: #fff; border: none; padding: 1.6rem 1.8rem; cursor: pointer; text-align: left; transition: background 0.25s ease; } .issue-toggle:hover { background: #faf7f0; } .issue-eyebrow { display: block; font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.5rem; } .issue-headline { display: block; font-family: var(--serif); font-size: 1.35rem; font-weight: 600; } .issue-icon { flex: 0 0 auto; width: 14px; height: 14px; position: relative; } .issue-icon::before, .issue-icon::after { content: ""; position: absolute; background: var(--museum-black); transition: transform 0.3s ease; } .issue-icon::before { left: 0; top: 6px; width: 14px; height: 1px; } .issue-icon::after { left: 6px; top: 0; width: 1px; height: 14px; } .issue-toggle[aria-expanded="true"] .issue-icon::after { transform: scaleY(0); } .issue-panel { background: #fff; border: none; border-top: 1px solid rgba(38, 38, 38, 0.12); padding: 3rem clamp(1.5rem, 5vw, 3.5rem); } .issue-letter p { font-weight: 400; margin-bottom: 1.5rem; } /* Dateline set in the letter's own type. */ .issue-dateline { color: var(--ink-soft); } .issue-quote { border-left: 2px solid rgba(38, 38, 38, 0.45); padding: 0.4rem 0 0.4rem 1.6rem; margin: 2rem 0; } .issue-quote p { font-style: italic; margin-bottom: 0.6rem; } .issue-quote cite { font-family: var(--sans); font-style: normal; font-size: 0.74rem; color: var(--ink-soft); } .issue-ask { font-style: italic; font-weight: 500; } .issue-signoff { font-style: italic; } /* ----- Deliverables ----------------------------------------------- */ .cs-deliv { margin-top: 5rem; } .cs-deliv h2 { font-weight: 600; font-size: clamp(1.6rem, 2.4vw, 2rem); margin-bottom: 0.8rem; } .cs-deliv .intro { font-weight: 400; max-width: 52ch; margin-bottom: 2.8rem; } .deliv-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } .deliv-item { background: none; border: none; padding: 0; } .deliv-item img { width: 100%; display: block; background: #fff; } /* The transparent masthead gets a white panel like the framework image. */ .deliv-mark img { box-sizing: border-box; padding: 2.6rem 2.2rem; background: #fff; border: 1px solid rgba(38, 38, 38, 0.1); } /* ----- Selected essays -------------------------------------------- */ /* Birch Light band between the case study and the photographic band. */ /* Content sits on the page edge, like the Field Notes band. */ .essays .pf-wrap { max-width: none; } .essays { background: var(--birch-light); color: var(--museum-black); border-top: none; border-bottom: none; margin-top: 6rem; padding: 6.5rem 0 6.5rem; } /* No gap above: the list follows the banner's full-bleed edge. */ #essays { margin-top: 0; } /* The headline carries the green; everything else is ink. */ .essays .pf-label { color: var(--museum-black); } .essays .pf-label::after { background: rgba(38, 38, 38, 0.45); } .essays-head h2 { color: var(--apothecary); } .essays-head p { color: var(--museum-black); } /* The compass from the Ghostwriting tiers, in Apothecary. */ .essays-compass { margin: 0 auto 1.4rem; line-height: 0; display: flex; justify-content: center; } .essays-compass img { width: 64px; height: 64px; object-fit: contain; display: block; } /* Centred on the axis of the three-column grid. */ .essays-head { margin-bottom: 3.5rem; text-align: center; } .essays-intro .essays-head { margin-bottom: 0; } /* A compact band: one mark and one line of introduction. */ .essays-intro { margin-top: 0; padding-top: 5.5rem; background: var(--birch-light); } /* Centred labels carry a rule on each side. */ /* The case-study eyebrow keeps the single trailing hairline. */ .essays-head .pf-label { display: flex; align-items: center; justify-content: center; gap: 1rem; } .essays-head .pf-label::before, .essays-head .pf-label::after { content: ""; flex: 0 1 48px; height: 1px; background: rgba(38, 38, 38, 0.45); } .cs-head .cs-eyebrow::after { content: ""; display: inline-block; width: 48px; height: 1px; margin-left: 1rem; vertical-align: 0.34em; background: rgba(38, 38, 38, 0.45); } .essays-head h2, .essays-head p { margin-left: auto; margin-right: auto; } .essays-head h2 { font-weight: 600; font-size: clamp(1.9rem, 3vw, 2.5rem); margin-top: 1.4rem; } .essays-head p { font-weight: 400; max-width: none; margin-top: 1rem; } .essays-head .pf-label { max-width: none; margin-top: 0; } /* Compound selector so the label outranks .essays-head p. */ .essays-head p.pf-label { font-weight: 600; } /* Labels never cap their width. */ /* Doorway into the topic archive: eyebrow over line. */ .essays-browse { max-width: none; text-align: left; margin: 0 0 5rem; } .essays-browse .pf-label { display: block; margin: 0 0 1.4rem; } .essays-browse .pf-label::before { display: none; } .essays-browse .pf-label::after { content: ""; display: inline-block; width: 48px; height: 1px; margin-left: 1rem; vertical-align: 0.34em; background: rgba(38, 38, 38, 0.45); } /* Held to one line; tablet and phone steps scale the type with the page edge. */ /* Sized to the viewport so the single line never overflows. */ .essays-browse-line { font-weight: 600; font-size: clamp(1.6rem, 3.05vw, 2.5rem); line-height: 1.25; margin: 0; white-space: normal; } /* The hairline appears on hover; the topic links below carry theirs at rest. */ .essays-browse-line a { color: inherit; text-decoration: none; border-bottom: 0; padding-bottom: 0; } .essays-browse-line a:hover, .essays-browse-line a:focus-visible { border-bottom: 0; text-decoration: none; } /* Topic grid: two columns, three titles per topic, hairlines between items. */ .essay-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.5rem; } .essay-group h3 { font-family: var(--serif); font-size: 1.22rem; font-weight: 600; color: var(--museum-black); padding-bottom: 0.9rem; border-bottom: 1px solid rgba(38, 38, 38, 0.42); } /* Numbered like a field record. */ .essay-list { list-style: none; counter-reset: ess; margin: 0; padding: 0; } .essay-list li { counter-increment: ess; border-bottom: 1px solid rgba(38, 38, 38, 0.16); position: relative; } .essay-list li::before { content: "0" counter(ess); position: absolute; left: 0; top: 1.15rem; font-family: var(--sans); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; color: rgba(38, 38, 38, 0.45); pointer-events: none; } .essay-list a { display: block; font-family: var(--serif); font-size: 1.05rem; font-weight: 400; line-height: 1.55; color: var(--museum-black); text-decoration: none; padding: 0.95rem 0.2rem 0.95rem 2.1rem; transition: padding-left 0.25s ease, color 0.25s ease; } .essay-list a:hover { padding-left: 2.6rem; color: var(--apothecary); } /* Matches the homepage card links. */ .essay-more { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.3rem; font-family: var(--sans); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.02em; color: var(--fireweed); text-decoration: none; border-bottom: 1px solid var(--fireweed); padding-bottom: 0.2rem; transition: border-color 0.25s ease; } .essay-more:hover { border-color: rgba(152, 38, 81, 0.4); } /* ----- Responsive ------------------------------------------------- */ @media (max-width: 1024px), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { .cs-grid { grid-template-columns: 1fr; } .deliv-stack { grid-template-columns: 1fr; } .essay-groups { grid-template-columns: 1fr; max-width: 560px; gap: 3rem; } } /* Landscape tablets: the veil holds further across, where the headline runs wider. */ @media (min-width: 601px) and (max-width: 1024px) and (orientation: landscape) and (min-height: 501px), (min-width: 1001px) and (max-width: 1024px) and (orientation: landscape) { .pf-banner { background: linear-gradient( to right, rgba(30, 75, 69, 0.96) 0%, rgba(30, 75, 69, 0.94) 50%, rgba(30, 75, 69, 0.82) 78%, rgba(30, 75, 69, 0.46) 100% ), url("../images/heroes/jungle-banner.jpg") 100% 50% / 118% auto no-repeat var(--apothecary); } } @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) { .pf-banner { padding: 4.5rem 0 3.5rem; } /* Phones: a nearly flat veil keeps bone type above contrast minimums. */ .pf-banner { background: linear-gradient( to right, rgba(30, 75, 69, 0.965) 0%, rgba(30, 75, 69, 0.95) 50%, rgba(30, 75, 69, 0.9) 100% ), url("../images/heroes/jungle-banner.jpg") center / cover no-repeat var(--apothecary); } .cs-head { flex-direction: column; } } /* Page-opening eyebrow in the homepage hero's serif treatment. */ .pf-banner .pf-label { font-family: var(--serif); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.18em; } /* Banners start 6rem from the page edge, matching Ghostwriting. */ .pf-banner .pf-wrap { 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) { .pf-banner .pf-wrap { padding: 0 var(--edge); } /* Phones: the wrapped eyebrow drops its hairline. */ .cs-head .cs-eyebrow::after { display: none; } } /* ----- Featured Field Note ---------------------------------------- */ /* An editorial cover over the field photograph: meta line, title, standfirst and Read. */ .pf-note { position: relative; overflow: hidden; /* Height scales with width so the subject is never cropped. */ display: flex; align-items: flex-end; background: var(--apothecary); } .pf-note-bg { position: absolute; inset: 0; /* Keeps the near bull in frame at every aspect ratio. */ background: url("../images/fieldnotes/living-prairie.jpg") 80% 81% / cover no-repeat; } .pf-note-veil { position: absolute; inset: 0; /* A shorter band than the article's plate, so the veil holds further up. */ } /* Wide screens: the veil thins on the right, away from the copy. */ .pf-note-inner { position: relative; z-index: 1; width: 100%; padding: 5rem var(--edge) 6rem; } .pf-note-meta { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bone); } .pf-note h2 { color: var(--bone); font-weight: 600; font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.1; letter-spacing: -0.012em; margin: 1rem 0 1rem; max-width: 22ch; text-wrap: balance; } .pf-note-dek { font-weight: 400; font-size: 1.16rem; line-height: 1.8; color: rgba(243, 239, 230, 0.92); max-width: 52ch; margin: 0 0 1.9rem; text-wrap: balance; } /* Photograph credit; its opacity meets contrast against the fallback ground. */ .pf-note-cap { color: rgba(243, 239, 230, 0.72); margin: 0 0 1.9rem; } /* Read button inverted for the dark ground. */ .pf-note-btn { background: var(--bone); color: var(--museum-black); border-color: var(--bone); padding: 0.7rem 2.6rem; } .pf-note-btn:hover { background: transparent; color: var(--bone); border-color: var(--bone); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3); } @media (max-width: 1024px), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { /* Tablet step for the single-line archive link. */ .essays-browse-line { font-size: clamp(1.05rem, 3.5vw, 2.1rem); } } @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) { .pf-note-inner { padding: 4rem var(--edge) 7.5rem; } /* Phones: the line may wrap, so enlarged text never overflows. */ .essays-browse-line { font-size: clamp(0.95rem, 4.4vw, 1.5rem); white-space: normal; text-wrap: balance; } } /* Narrow screens: centred eyebrows drop their hairlines. */ @media (max-width: 420px) { .essays-head .pf-label::before, .essays-head .pf-label::after, .essays-browse .pf-label::before, .essays-browse .pf-label::after { display: none; } } /* ----- Phones ----------------------------------------------------- */ @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) { /* Compact spacing between case-study components. */ .pf-spine { padding-bottom: 3.35rem; } .cs { padding-top: 3.15rem; } #buffalo-charlie { padding-bottom: 2.25rem; } .cs-head { margin-bottom: 2.15rem; } .cs-quote { padding-bottom: 2.6rem; } .cs-quote blockquote { padding: 0.15rem 0 1.15rem; } .cs-story { margin-top: 2.7rem; padding: 0; } .cs-story p { margin-bottom: 1.35rem; } .cs-grid { margin-top: 2.9rem; gap: 1.8rem; } .cs-portrait { margin-top: 1.7rem; } .cs-issue { margin-top: 3rem; } .cs-deliv { margin-top: 3.25rem; } .cs-deliv .intro { margin-bottom: 2rem; } .cs-art--detail { margin-top: 1.8rem; } .essays-intro { padding-top: 3.6rem; } } /* Field Note plate: a taller crop on wide screens, framed to the subject on narrow ones, under a neutral veil. */ .pf-note { min-height: clamp(620px, 49.5vw, 760px); } .pf-note-bg { background-image: url("../images/fieldnotes/living-prairie.jpg"); background-position: 80% 52%; background-size: cover; background-repeat: no-repeat; } .pf-note-veil { background: linear-gradient( to top, rgba(18, 18, 16, 0.72) 0%, rgba(18, 18, 16, 0.66) 50%, rgba(18, 18, 16, 0.42) 72%, rgba(18, 18, 16, 0.18) 88%, rgba(18, 18, 16, 0.06) 100% ); } @media (min-width: 1025px) and (orientation: landscape), (min-width: 1025px) and (hover: hover), (min-width: 1367px) { .pf-note-veil { -webkit-mask-image: linear-gradient( to right, #000 0%, #000 48%, rgba(0, 0, 0, 0.58) 76%, rgba(0, 0, 0, 0.28) 100% ); mask-image: linear-gradient( to right, #000 0%, #000 48%, rgba(0, 0, 0, 0.58) 76%, rgba(0, 0, 0, 0.28) 100% ); } } @media (max-width: 1024px), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) { .pf-note { min-height: clamp(460px, 64vw, 620px); } .pf-note-veil { background: linear-gradient( to top, rgba(18, 18, 16, 0.76) 0%, rgba(18, 18, 16, 0.72) 58%, rgba(18, 18, 16, 0.54) 80%, rgba(18, 18, 16, 0.3) 94%, rgba(18, 18, 16, 0.18) 100% ); } } @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) { .pf-note { min-height: clamp(430px, 118vw, 560px); } /* Phone typography and spacing. */ .issue-headline { color: var(--museum-black); } /* A lighter neutral veil over the photograph. */ .pf-note-bg { background-image: url("../images/fieldnotes/living-prairie.jpg"); /* A slight vertical zoom gives the image room to move in a tall band. */ background-size: auto 112%; background-position: 80% 100%; background-repeat: no-repeat; } .pf-note-veil { background: linear-gradient( to top, rgba(18, 18, 16, 0.68) 0%, rgba(18, 18, 16, 0.64) 58%, rgba(18, 18, 16, 0.5) 80%, rgba(18, 18, 16, 0.32) 94%, rgba(18, 18, 16, 0.2) 100% ); } .pf-note-dek { font-weight: 600; color: rgba(243, 239, 230, 0.96); } } /* ----- Banner: wider screens -------------------------------------- */ /* The veil deepens to forest under the words and feathers into the light. */ @media (min-width: 601px) and (orientation: landscape) and (min-height: 501px), (min-width: 1001px) and (orientation: landscape), (min-width: 1025px) and (hover: hover), (min-width: 1367px) { .pf-banner { background: linear-gradient( 90deg, rgba(5, 35, 32, 0.995) 0%, rgba(7, 40, 36, 0.99) 20%, rgba(10, 47, 42, 0.965) 34%, rgba(13, 55, 49, 0.88) 46%, rgba(17, 63, 56, 0.68) 58%, rgba(20, 70, 64, 0.4) 68%, rgba(20, 70, 64, 0.17) 78%, rgba(20, 70, 64, 0.045) 87%, rgba(20, 70, 64, 0) 94% ), url("../images/heroes/jungle-banner.jpg") 100% 50% / 118% auto no-repeat var(--apothecary); } /* A slight downward shift for the eyebrow and headline. */ .pf-banner .pf-wrap { transform: translate(24px, 2.6rem); } } /* The photograph is fitted rather than enlarged. */ @media (min-width: 601px) and (orientation: landscape) and (min-height: 501px), (min-width: 1001px) and (orientation: landscape), (min-width: 1025px) and (hover: hover), (min-width: 1367px) { .pf-banner { background: linear-gradient( 90deg, rgba(5, 35, 32, 0.995) 0%, rgba(7, 40, 36, 0.99) 24%, rgba(10, 47, 42, 0.97) 40%, rgba(13, 55, 49, 0.91) 52%, rgba(17, 63, 56, 0.74) 62%, rgba(20, 70, 64, 0.46) 72%, rgba(20, 70, 64, 0.2) 82%, rgba(20, 70, 64, 0.055) 90%, rgba(20, 70, 64, 0) 96% ), url("../images/heroes/jungle-banner.jpg") 100% 50% / cover no-repeat var(--apothecary); } } /* Desktop: the publication description on two lines. */ @media screen and (min-width: 1025px) and (orientation: landscape), screen and (min-width: 1025px) and (hover: hover), screen and (min-width: 1367px) { .pf-publication-tagline > span { display: block; } /* Paired deliverables and archive rows. */ .deliv-stack { align-items: center; } .essay-group { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; } .essay-list { display: grid; grid-template-rows: repeat(3, 1fr); } .essay-more { justify-self: start; } } /* ----- Field Record ----------------------------------------------- */ /* Six photographs as first-hand evidence for the publication: a numbered, captioned series in two rows of three. */ .fr { padding: 4.5rem 0 clamp(3.25rem, 5vw, 5rem); } .fr-eyebrow { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--museum-black); margin: 0 0 1.2rem; display: block; } .fr-lede { font-family: var(--serif); font-size: 1.05rem; line-height: 1.62; color: var(--ink-soft); max-width: 54ch; margin: 0 0 1.1rem; } /* One credit for the whole record, in the shared .media-caption style. */ .fr-credit { margin: 0 0 3rem; } .fr-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.6rem, 2.6vw, 2.4rem); row-gap: clamp(2.6rem, 4vw, 3.6rem); } .fr-plate { margin: 0; min-width: 0; } .fr-plate figure { margin: 0; } /* A single 4:5 frame makes the six read as a series. */ .fr-plate img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; background: rgba(38, 38, 38, 0.04); } .fr-cap { display: block; margin: 0.9rem 0 0; padding-top: 0.75rem; border-top: 1px solid rgba(38, 38, 38, 0.18); } /* Plate numbers. */ .fr-num { font-family: var(--sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; color: var(--fireweed); display: block; margin-bottom: 0.35rem; } .fr-cap .caption-line { display: block; } .fr-cap .caption-subject { color: var(--museum-black); } .fr-link { margin: 3.25rem 0 0; } .fr-link a { font-family: var(--sans); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; color: var(--fireweed); text-decoration: none; border-bottom: 1px solid var(--fireweed); padding-bottom: 0.2rem; display: inline-flex; align-items: center; min-height: 44px; transition: border-color 0.25s ease; } .fr-link a:hover { border-color: rgba(152, 38, 81, 0.4); } /* Landscape tablets and large touch tablets: three across. */ @media (min-width: 901px) and (max-width: 1024px) and (orientation: landscape) and (min-height: 501px), (min-width: 1001px) and (max-width: 1024px) and (orientation: landscape), (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: landscape) { .fr-grid { column-gap: 1.5rem; row-gap: 2.6rem; } } /* Compact landscape tablets: two across. */ @media (min-width: 601px) and (max-width: 900px) and (orientation: landscape) and (min-height: 501px) { .fr { padding-top: 3.15rem; } .fr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.4rem, 3vw, 2rem); row-gap: 2.8rem; max-width: 640px; } .fr-credit { margin-bottom: 2.5rem; } } /* Phones: two across. */ @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) { .fr { padding-top: 2.75rem; } .fr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; row-gap: 2rem; } .fr-num { font-size: 0.62rem; } /* Tighter tracking so place names fit the narrow column. */ .fr-cap { margin-top: 0.7rem; padding-top: 0.6rem; letter-spacing: 0.13em; font-size: 0.63rem; } .fr-credit { margin-bottom: 2.25rem; } .fr-link { margin-top: 2.5rem; } } /* Very small phones: one column. */ @media (max-width: 380px) { .fr-grid { grid-template-columns: minmax(0, 1fr); max-width: 320px; margin-inline: auto; row-gap: 2.2rem; } }