/* Theme Name: Kadence Child — Marwan Nsouli Photography Description: Child theme of Kadence. All custom template work for marwannsouli.com lives here so that Kadence itself can update safely at any time. Template: kadence Version: 1.67.0 Author: Marwan Nsouli */ /* ================================================================== * DESIGN LANGUAGE — "quiet gallery wall" * Drawn from the Squarespace site Marwan liked: warm cream ground, * editorial serif at confident sizes, charcoal ink, generous space, * almost no ornament. Photography carries the color; the chrome * stays quiet. * ================================================================== */ /* Palette overrides — doubled :root specificity so they beat Kadence's * own inline :root palette regardless of stylesheet load order. */ :root:root { /* The article reading measure. The body column is 1328px unclamped; this * trims it back a little, keeping the text a touch narrower than the frame * without pulling it into a narrow blog column. Marwan set the figure. */ --mns-article-measure: 1250px; /* Article photo frame. A full-width landscape is capped to --mns-photo-h TALL, * so a 3:2 frame renders --mns-frame WIDE. The image-beside-text rows are * capped to that same width, so a portrait's left edge and the text's right * edge line up with the standalone landscapes above and below — on any screen, * because both are driven by the same viewport-aware height. 1.5086 is the * scans' aspect (2500:1658); change --mns-photo-h alone to resize every photo. */ --mns-photo-h: min(78vh, 700px); --mns-frame: calc(var(--mns-photo-h) * 1.5086); --global-palette1: #29261f; /* accent = ink (no loud colors) */ --global-palette2: #4a463c; --global-palette3: #29261f; /* strongest text */ --global-palette4: #4a463c; /* body text */ --global-palette5: #85806f; /* muted text */ --global-palette6: #dcd8cc; /* hairlines / borders */ --global-palette7: #efece4; /* subtle backgrounds */ --global-palette8: #f6f4ef; /* body background: warm cream */ --global-palette9: #f6f4ef; /* content background: warm cream */ } :root { --mns-serif: "Source Serif 4", Georgia, "Times New Roman", serif; --mns-cream: #f6f4ef; } /* Force the warm cream ground on every container, in case any background * is set with a hardcoded value rather than the palette variable. */ body, .wp-site-blocks, .site.wp-site-blocks, .content-bg, .content-container, .site-container, .site-header-wrap, .site-footer, .entry-content-wrap, .single-content { background-color: var(--mns-cream) !important; } /* --- Ground and ink --- */ body { background: var(--global-palette9); color: var(--global-palette4); font-family: var(--mns-serif); font-optical-sizing: auto; font-size: 1.125rem; line-height: 1.65; } /* Kadence prints its own body-font CSS inline in the , after this * stylesheet and at the same (element) specificity, so the `body` rule above * loses on source order and the base font falls back to system sans. A * container-level rule outranks it (a class beats an element), and because * font-family inherits it hands the site serif to every block in the content * that didn't set the font itself — catching stragglers like the directory * rows, the "All articles" section links, and the card dates. Form controls * (their own user-agent font) and the Leaflet map (its own family) don't * inherit into, so they stay as they are. */ .content-area, .content-container { font-family: var(--mns-serif); } .site, .content-bg, .site-header, .site-footer, .content-area { background: var(--global-palette9) !important; } /* --- Tighter gap between header and article title --- * The real culprit was an 80px MARGIN on .content-area (not padding). */ body.single .content-area { margin-top: 0.75rem !important; padding-top: 0 !important; } body.single .entry-content-wrap { padding-top: 1rem !important; } /* --- Masthead: light and quiet, not bold --- */ .site-branding .site-title { font-weight: 400 !important; font-size: 1.6rem; letter-spacing: 0.01em; } /* --- Editorial serif headings --- */ h1, h2, h3, h4, h5, h6, .site-branding .site-title, .entry-title { font-family: var(--mns-serif); font-weight: 500; color: var(--global-palette3); letter-spacing: -0.01em; } h1, .entry-title { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.12; font-weight: 600; } /* Title and header span the full desktop width like the rest of the page. */ .single .site-main .entry-header, .single .entry-header .entry-title, .single .entry-header .entry-meta { max-width: none; width: 100%; } /* --- Quiet links: ink + underline, never blue --- */ .entry-content a, .mns-shot-on a { color: var(--global-palette3); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--global-palette5); transition: text-decoration-color 0.15s ease; } .entry-content a:hover, .mns-shot-on a:hover { text-decoration-color: var(--global-palette3); } /* --- Post meta: small, quiet, uppercase --- */ .entry-meta { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--global-palette5); } /* ------------------------------------------------------------------ * WIDE editorial layout — content breathes across the screen like the * Squarespace site, instead of a narrow blog column. * ------------------------------------------------------------------ */ /* Kadence pins single posts to a narrow 842px container; override it hard. * This is THE rule that makes the whole page wide. */ body .content-container.site-container, body.single .content-container.site-container, .site-header .site-container { max-width: 1520px !important; } .single-content .entry-content-wrap, .single .content-wrap, article.entry .entry-content-wrap { max-width: none; } /* Article text: editorial serif at a reading measure, centred beneath the * full-width gallery. * * This is a DIRECT-CHILD rule on purpose. An earlier attempt narrowed the text * with a bare `.entry-content p, ul, ol` selector and broke the photo carousel: * Kadence renders the slide track as a

INSIDE .entry-content, so clamping * bare lists squeezed the track and Splide sized every slide from the squeezed * width. Nothing nested inside a block can be reached from here — the carousel * track and its pagination are grandchildren, not children. * * The selector list is inherited from the rule this replaces, which existed to * strip Kadence's own content cap; anything deliberately wide (alignwide, * alignfull, a gallery) keeps the full frame. */ .single .entry-content > *:not(.alignwide):not(.alignfull):not(.wp-block-kadence-advancedgallery) { /* The body column matches the photo frame, so text, headings, standalone * photos and the image-beside-text rows all share one left/right edge — the * whole article reads as a single aligned column. (--mns-article-measure, the * old wider cap, is kept defined for reference.) */ max-width: var(--mns-frame); margin-inline: auto; } .single .entry-content p, .single .entry-content ul, .single .entry-content ol { font-family: var(--mns-serif); font-size: 1.3rem; line-height: 1.6; color: var(--global-palette4); } .single .entry-content .wp-block-kadence-advancedgallery { max-width: none; } /* --- Article section headings: clearly distinct from body, but quiet. * Body runs at 1.3rem serif; these sit a step above without shouting. --- */ .single .entry-content h2 { font-family: var(--mns-serif); font-size: 1.6rem; line-height: 1.25; font-weight: 500; color: var(--global-palette3); margin-top: 2.7rem; margin-bottom: 0.5rem; } /* --- Full-width article photos (a landscape punctuating the text): centred, * and capped by height so they never dominate the frame. The cap is the SMALLER * of 78vh and 700px: on a normal screen it sits at 700px (a calm size, not the * near-full-height it used to be), and on a short 13" laptop 78vh takes over so * the photo scales down with the viewport instead of looking zoomed in. * The direct-child rule above already caps the figure at 1250px and centres it, * so this only handles the image inside. --- */ .single .entry-content > figure.wp-block-image { margin-top: 2.4rem; margin-bottom: 2.4rem; text-align: center; } .single .entry-content > figure.wp-block-image img { max-width: 100%; max-height: var(--mns-photo-h); width: auto; height: auto; display: inline-block; vertical-align: middle; } /* --- Image beside text (a two-column row). A photo carried alongside its * paragraph reads better than a full-width frame with the text above or below, * and it fills the horizontal space a portrait would otherwise leave empty. * The columns block is a direct child, so the measure rule caps it at 1250px * and centres it; the image simply fills its own column. On phones the core * columns stack (image first, then text) — the layout Marwan approved there. --- */ .single .entry-content .wp-block-columns { /* Share the standalone landscapes' left/right edges: the row is exactly as * wide as a full-width photo, centred on the same axis. !important beats the * direct-child measure cap (1250px) above. */ max-width: var(--mns-frame) !important; margin-inline: auto; margin-top: 2.7rem; margin-bottom: 2.7rem; align-items: center; gap: 2.2rem; } .single .entry-content .wp-block-column > figure.wp-block-image { margin: 0; } .single .entry-content .wp-block-column > figure.wp-block-image img { display: block; width: 100%; height: auto; } @media (max-width: 781px) { .single .entry-content .wp-block-columns { gap: 1.1rem; margin-top: 2rem; margin-bottom: 2rem; } } /* ------------------------------------------------------------------ * Gallery carousel: quiet chrome. Slim ink chevrons on soft cream, * subtle dots. (Covers both Splide and slick markup across Kadence * Blocks versions.) * ------------------------------------------------------------------ */ .wp-block-kadence-advancedgallery .splide__arrow, .wp-block-kadence-advancedgallery .slick-prev, .wp-block-kadence-advancedgallery .slick-next { background: rgba(246, 244, 239, 0.88) !important; border: none !important; border-radius: 50% !important; width: 2.5rem !important; height: 2.5rem !important; opacity: 0.92 !important; box-shadow: none !important; color: #29261f !important; } .wp-block-kadence-advancedgallery .splide__arrow svg, .wp-block-kadence-advancedgallery .slick-arrow:before { fill: #29261f !important; color: #29261f !important; } .wp-block-kadence-advancedgallery .splide__arrow:hover, .wp-block-kadence-advancedgallery .slick-arrow:hover { opacity: 1; background: rgba(246, 244, 239, 1); } /* Elegant pagination dots: small, airy, quiet */ .wp-block-kadence-advancedgallery .splide__pagination { margin-top: 1.1rem; gap: 0; } .wp-block-kadence-advancedgallery .splide__pagination__page, .wp-block-kadence-advancedgallery .slick-dots li button:before { background: #cdc8b9 !important; color: #cdc8b9; width: 5px !important; height: 5px !important; margin: 0 6px !important; opacity: 1 !important; border: none !important; box-shadow: none !important; transform: none !important; transition: background 0.2s ease, transform 0.2s ease; } .wp-block-kadence-advancedgallery .splide__pagination__page.is-active, .wp-block-kadence-advancedgallery .slick-dots li.slick-active button:before { background: #29261f !important; color: #29261f; transform: scale(1.35) !important; } /* ------------------------------------------------------------------ * Article technical header — editorial colophon style. * Hairline rules, small-caps labels, no box. Like the printed specs * page at the back of a photo book. * ------------------------------------------------------------------ */ /* Sits between the opening photographs and the article text — equal space * above and below so the block reads as centred in that gap. The total * footprint is kept close to what it was before the box was added, so neither * the gallery above nor the writing below shifts. */ .mns-article-tech { max-width: none; /* span the full content frame — no cramped columns */ margin: 1.4rem 0; } .mns-article-shoton { margin: 2.5rem 0 0; } .mns-shot-on { font-family: var(--mns-serif); font-size: 1.25rem; line-height: 1.5; margin: 0 0 1.1rem; color: var(--global-palette3); } .mns-shot-on a { font-weight: 600; } /* A single quiet box around the three specs — enough structure to read as one * unit, without the heavier rules the article used to carry. Held to the width * of its own contents and centred, rather than stretched across the frame, so * the three columns sit together instead of drifting apart. */ .mns-spec-grid { width: fit-content; max-width: 100%; margin-inline: auto; padding: 1rem 2.25rem; border: 1px solid var(--global-palette6); border-radius: 2px; background: transparent; } .mns-spec-title { font-family: var(--mns-serif); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; text-align: center; margin: 0 0 1.35rem; color: var(--global-palette5); font-weight: 600; } /* Three equal columns, each as wide as the LONGEST value among them. * * 1fr tracks inside a fit-content box give exactly that: the box sizes to the * grid's max-content, and equal fr tracks all resolve to the widest column's * width. So the columns match (which is what keeps the middle one on the box's * centreline), every value still sits on one line, and the box grows only as * much as the longest value actually needs — no fixed width to outgrow later. * * Sizing each column to its own content instead (repeat(3, auto)) let the long * lab name widen only its own column and pushed the box off-centre. */ .mns-spec-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 3.5rem; margin: 0; } /* Values stay on one line — the grid is wide enough now. */ .mns-spec-item dd { white-space: nowrap; } /* Label above value, each column centred on itself, so the three read as one * symmetrical band. */ .mns-spec-item { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; text-align: center; } .mns-spec-item dt { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--global-palette5); font-weight: 600; white-space: nowrap; } .mns-spec-item dd { margin: 0; text-align: center; font-weight: 500; color: var(--global-palette3); font-size: 1.05rem; } @media (max-width: 900px) { .mns-spec-list { gap: 1rem 2rem; } } @media (max-width: 600px) { .mns-spec-list { grid-template-columns: 1fr; gap: 1.1rem; } } /* ================================================================== * TERM PAGES — Locations, Film Stocks, Formats, Lenses. * Same quiet gallery-wall language as the article template. * ================================================================== */ body.tax-mns_location .content-area, body.tax-mns_film_stock .content-area, body.tax-mns_format .content-area, body.tax-mns_lens .content-area { margin-top: 0.75rem !important; padding-top: 0 !important; } .mns-term-page .site-main { padding-bottom: 3rem; } /* --- Header: breadcrumb, title, count --- */ .mns-breadcrumb { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--global-palette5); margin-bottom: 1rem; } .mns-breadcrumb a { color: var(--global-palette5); text-decoration: none; } .mns-breadcrumb a:hover { color: var(--global-palette3); } .mns-crumb-sep { margin: 0 0.6rem; opacity: 0.5; } .mns-term-title { font-family: var(--mns-serif); font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.12; font-weight: 600; color: var(--global-palette3); margin: 0 0 0.5rem; } /* "Also sold as …" — a quiet italic line under a film stock's name, for the * same emulsion's other names (Portra 800 / Ektacolor 800). */ .mns-term-aka { font-family: var(--mns-serif); font-style: italic; font-size: 0.95rem; color: var(--global-palette5); margin: -0.1rem 0 0.6rem; } .mns-term-count { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--global-palette5); margin: 0; } /* --- The written overview (term description) --- */ .mns-term-intro { max-width: none; /* spans the frame, matching the article template */ margin: 0; } .mns-term-intro p { font-family: var(--mns-serif); font-size: 1.3rem; line-height: 1.6; color: var(--global-palette4); margin: 0 0 1rem; } /* --- Onward links to curated child locations --- */ .mns-child-locations { margin: 2.5rem 0 0; } .mns-child-locations ul { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; } .mns-child-locations a { font-family: var(--mns-serif); font-size: 1.15rem; color: var(--global-palette3); text-decoration: underline; text-decoration-color: var(--global-palette6); text-underline-offset: 3px; } .mns-child-locations a:hover { text-decoration-color: var(--global-palette3); } /* --- Section headings with optional "view all" --- */ .mns-term-section { margin-top: 3.5rem; } .mns-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; border-bottom: 1px solid var(--global-palette3); padding-bottom: 0.7rem; margin-bottom: 1.5rem; } .mns-section-title { font-family: var(--mns-serif); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--global-palette5); font-weight: 600; margin: 0; } .mns-section-action { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--global-palette3); text-decoration: none; border-bottom: 1px solid var(--global-palette6); padding-bottom: 2px; white-space: nowrap; } .mns-section-action:hover { border-bottom-color: var(--global-palette3); } /* The lone onward link on a gallery section that has no heading. */ .mns-gallery-viewall { text-align: right; margin: 0 0 1.2rem; } /* --- Justified photo gallery: uniform row heights, true proportions --- */ .mns-gallery { display: flex; flex-wrap: wrap; gap: 10px; } .mns-gallery-item { display: block; height: 260px; overflow: hidden; line-height: 0; background: var(--global-palette7); } .mns-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.2s ease; } .mns-gallery-item:hover img { opacity: 0.88; } /* Last row keeps its natural size rather than stretching oddly. */ .mns-gallery::after { content: ''; flex-grow: 999999999; } /* --- Article cards --- */ .mns-article-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 2rem; } .mns-article-card { display: block; text-decoration: none; color: inherit; } /* 3:2 — the native 35mm frame, so most photographs crop barely at all. * mns_article_thumb_id() also prefers a landscape source for this reason. */ .mns-card-media { display: block; overflow: hidden; background: var(--global-palette7); aspect-ratio: 3 / 2; margin-bottom: 0.9rem; } .mns-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.2s ease; } .mns-article-card:hover .mns-card-media img { opacity: 0.88; } .mns-card-title { display: block; font-family: var(--mns-serif); font-size: 1.3rem; line-height: 1.3; color: var(--global-palette3); font-weight: 500; } .mns-card-meta { display: block; margin-top: 0.4rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--global-palette5); } /* Article excerpt — shown beneath each card on the Articles archive. */ .mns-card-excerpt { display: block; margin-top: 0.55rem; font-family: var(--mns-serif); font-size: 1rem; line-height: 1.5; color: var(--global-palette4); } /* On the archive, give the cards more room so the excerpt reads well. */ .mns-article-cards--excerpt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 3rem; } @media (max-width: 640px) { .mns-article-cards--excerpt { grid-template-columns: 1fr; } } /* "Show more photographs" — quiet, centred, in the site's ink */ .mns-gallery-more { display: block; margin: 1.75rem auto 0; padding: 0.65rem 1.6rem; background: transparent; border: 1px solid var(--global-palette6); border-radius: 999px; font-family: var(--mns-serif); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--global-palette3); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } /* Every state reset, then hover re-applied only where a real pointer exists. * Two faults met here: Kadence's dark button chrome on :focus/:active (a tap * leaves the button focused, so it stayed dark with dark text on it — the * "illegible after clicking" Marwan hit), and touch browsers keeping :hover * applied after a tap until you touch something else. */ .mns-gallery-more, .mns-gallery-more:hover, .mns-gallery-more:focus, .mns-gallery-more:active { background: transparent; box-shadow: none; color: var(--global-palette3); } @media (hover: hover) { .mns-gallery-more:hover { border-color: var(--global-palette3); background: var(--global-palette7); } } .mns-gallery-item[hidden] { display: none; } .mns-term-empty { margin-top: 3rem; font-family: var(--mns-serif); font-size: 1.2rem; color: var(--global-palette5); } /* --- Film stock: provenance, spec strip, character profile --- */ /* "Most photographed in …" — a live cross-reference under the count line */ .mns-stock-provenance { font-family: var(--mns-serif); font-size: 1rem; color: var(--global-palette5); margin: 0.6rem 0 0; } .mns-stock-provenance a { color: var(--global-palette3); text-decoration: underline; text-decoration-color: var(--global-palette6); text-underline-offset: 3px; } .mns-stock-provenance a:hover { text-decoration-color: var(--global-palette3); } /* The spec strip is the stock's identity — kept tight under the header, * ahead of the photographs. */ .mns-stock-specs-section { margin-top: 1.5rem; } /* Tighten the gap between the ISO spec strip and the Photographs heading that * follows it, so the header area reads a touch more compact. */ .mns-stock-specs-section + .mns-term-section { margin-top: 2.5rem; } .mns-film-specs { display: flex; flex-wrap: wrap; justify-content: center; /* centered between the full-width rules on desktop */ gap: 0 3.5rem; margin: 0; padding: 1.3rem 0; border-top: 1px solid var(--global-palette3); border-bottom: 1px solid var(--global-palette6); } .mns-film-spec { display: flex; flex-direction: column; gap: 0.4rem; } .mns-film-spec dt { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--global-palette5); font-weight: 600; } .mns-film-spec dd { margin: 0; font-family: var(--mns-serif); font-size: 1.3rem; line-height: 1.1; color: var(--global-palette3); font-weight: 500; } /* A precise detail printed quietly beneath a spec value * (e.g. the exposure-latitude stop range under "Wide"). */ .mns-spec-detail { display: block; margin-top: 0.3rem; font-family: var(--mns-serif); font-size: 0.85rem; font-weight: 400; line-height: 1.2; color: var(--global-palette5); } /* --- Info icon + hover/focus definition tooltip (on spec labels) --- */ .mns-info { position: relative; display: inline-flex; vertical-align: middle; margin-left: 0.3rem; } .mns-info-btn { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; padding: 0; border: 0; background: transparent; color: var(--global-palette5); opacity: 0.75; cursor: help; border-radius: 50%; transition: opacity 0.15s ease, color 0.15s ease; } .mns-info-btn svg { display: block; } .mns-info-btn:hover, .mns-info-btn:focus-visible { color: var(--global-palette3); opacity: 1; } /* The popover. Reset the uppercase/tracked label styling it would inherit. */ .mns-info-pop { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 30; width: 250px; max-width: 78vw; padding: 0.8rem 0.9rem; background: #fdfbf6; border: 1px solid var(--global-palette6); border-radius: 5px; box-shadow: 0 8px 24px rgba(41, 38, 31, 0.12); font-family: var(--mns-serif); font-size: 0.82rem; font-weight: 400; line-height: 1.45; letter-spacing: normal; text-transform: none; color: var(--global-palette4); text-align: left; visibility: hidden; opacity: 0; transition: opacity 0.15s ease, visibility 0.15s ease; pointer-events: none; } /* Little caret joining the popover to its icon. */ .mns-info-pop::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-bottom-color: #fdfbf6; } .mns-info:hover .mns-info-pop, .mns-info:focus-within .mns-info-pop { visibility: visible; opacity: 1; pointer-events: auto; } @media (max-width: 900px) { /* Stack the spec strip into a single left-aligned column. Every item then * starts at the same left edge, which lets each definition popover anchor * to its item and open rightward without ever running off-screen. */ .mns-film-specs { flex-direction: column; align-items: flex-start; gap: 1.1rem; } .mns-film-spec { position: relative; } .mns-info { position: static; } .mns-info-pop { left: 0; right: auto; top: calc(100% + 10px); transform: none; width: min(300px, calc(100vw - 2rem)); max-width: none; } .mns-info-pop::before { display: none; /* caret can't reliably reach the icon once left-anchored */ } } /* --- Character block: structured rendering traits, as an ordered ledger. * Sits as its own section (below Photographs) with a standard section heading. * Each ordinal trait prints its FULL scale with the current value emphasized, * so the range is self-evident (Warm · Neutral · Cool) — no inference, no * cryptic marker. Aligned label/value columns + hairline rules give it order. */ /* Character heading + ledger both centered on the screen, as a deliberate * centered "profile" module (paired with the centered spec strip above). */ .mns-character-section .mns-section-head { justify-content: center; } .mns-character-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4.5rem; max-width: 1040px; margin-inline: auto; } .mns-trait { display: grid; grid-template-columns: 8.5rem 1fr; align-items: baseline; gap: 1.25rem; padding: 0.9rem 0; border-top: 1px dotted var(--global-palette6); } .mns-trait-label { font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--global-palette5); font-weight: 600; } /* The printed scale: full range visible, active step in ink. */ .mns-scale-steps { display: flex; flex-wrap: wrap; align-items: baseline; font-family: var(--mns-serif); font-size: 1.05rem; line-height: 1.3; } .mns-step { color: var(--global-palette5); } .mns-step--on { color: var(--global-palette3); font-weight: 600; } /* Trailing separator kept inside each step, so if the scale ever wraps, a new * line begins with a word — never an orphaned separator. */ .mns-step:not(:last-child)::after { content: '·'; color: var(--global-palette6); margin: 0 0.55rem; } .mns-trait-value { font-family: var(--mns-serif); font-size: 1.05rem; line-height: 1.3; color: var(--global-palette3); } @media (max-width: 782px) { .mns-character-grid { grid-template-columns: 1fr; column-gap: 0; max-width: none; } } @media (max-width: 600px) { /* Stack label above value so the scale gets the full width and reads on * one line rather than wrapping. */ .mns-trait { grid-template-columns: 1fr; gap: 0.3rem; padding: 0.85rem 0; } } @media (max-width: 900px) { .mns-article-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mns-gallery-item { height: 200px; } } @media (max-width: 600px) { .mns-article-cards { grid-template-columns: 1fr; gap: 2rem; } /* On a phone a justified row holds one photograph, stretched to the full * width of a narrow screen — and because the row height is fixed, a frame * whose proportions don't match gets cropped hard (a portrait shot arrived * as a wide band). One column at natural height instead: every photograph * whole, in its own proportions. The justified rows are untouched from * 601px up, so tablets and desktop keep the approved layout. */ .mns-gallery { display: grid; grid-template-columns: 1fr; } .mns-gallery-item { height: auto; } .mns-gallery-item img { height: auto; } } /* ================================================================== * INDEX PAGES — Film Stocks, Locations. * A directory of cards leading into the single-term pages. * ================================================================== */ .mns-index-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem 2rem; } .mns-index-card { display: block; text-decoration: none; color: inherit; } .mns-index-card-media { display: block; overflow: hidden; background: var(--global-palette7); aspect-ratio: 3 / 2; margin-bottom: 0.9rem; } .mns-index-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.2s ease; } .mns-index-card:hover .mns-index-card-media img { opacity: 0.88; } /* A quiet placeholder for stocks that don't have a sample photo yet. */ .mns-index-card-media.is-empty { display: flex; align-items: center; justify-content: center; border: 1px solid var(--global-palette6); background: transparent; } .mns-index-card-placeholder { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--global-palette5); opacity: 0.65; } .mns-index-card-title { display: block; font-family: var(--mns-serif); font-size: 1.3rem; line-height: 1.25; color: var(--global-palette3); font-weight: 500; } .mns-index-card-meta { display: block; margin-top: 0.35rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--global-palette5); } @media (max-width: 900px) { .mns-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .mns-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; } .mns-index-card-title { font-size: 1.1rem; } } /* ================================================================== * FILM STOCKS INDEX — searchable accordion directory. * ================================================================== */ /* --- Search --- */ .mns-stock-search { position: relative; margin-top: 2rem; } .mns-stock-search svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--global-palette5); pointer-events: none; } #mns-stock-search { width: 100%; font-family: var(--mns-serif); font-size: 1.15rem; color: var(--global-palette3); background: #fdfbf6; border: 1px solid var(--global-palette6); border-radius: 2px; padding: 0.95rem 1rem 0.95rem 2.9rem; } #mns-stock-search::placeholder { color: var(--global-palette5); } #mns-stock-search:focus { outline: none; border-color: var(--global-palette3); } /* --- Accordion directory --- */ .mns-directory { margin-top: 2.6rem; } .mns-maker { border-top: 1px solid var(--global-palette6); } .mns-maker:last-child { border-bottom: 1px solid var(--global-palette6); } .mns-maker.is-hidden { display: none; } /* Reset Kadence's default button chrome across every state so the header * stays a plain typographic row (its dark button background otherwise shows * on hover/focus/active). */ .mns-maker-btn, .mns-maker-btn:hover, .mns-maker-btn:focus, .mns-maker-btn:active { width: 100%; background: transparent; border: 0; box-shadow: none; cursor: pointer; font-family: var(--mns-serif); color: var(--global-palette3); display: flex; align-items: center; gap: 1rem; padding: 1.4rem 0; text-align: left; } .mns-maker-btn:focus { outline: none; } .mns-maker-btn:focus-visible { outline: 1px dotted var(--global-palette5); outline-offset: 4px; } .mns-maker-name { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 600; } .mns-maker-count { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--global-palette5); margin-left: auto; margin-right: 1.3rem; } .mns-maker-sign { width: 24px; height: 24px; position: relative; flex: none; } .mns-maker-sign::before, .mns-maker-sign::after { content: ""; position: absolute; background: var(--global-palette3); top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform 0.25s ease, opacity 0.2s ease; } .mns-maker-sign::before { width: 100%; height: 1.5px; } .mns-maker-sign::after { width: 1.5px; height: 100%; } /* The plus becomes a minus only on the group's OWN control. Written as a * descendant selector this turned every sign beneath an open country into a * minus, so a closed region advertised itself as open. */ .mns-maker.is-open > .mns-maker-btn .mns-maker-sign::after, .mns-maker.is-open > .mns-maker-head > .mns-maker-toggle .mns-maker-sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } /* Panels are open by default; only collapse once JS has enhanced the page, * so a no-JS visitor and search crawlers see every stock. */ .mns-maker-panel { overflow: hidden; } /* CHILD combinator, not descendant — this is the whole fix. With a descendant * selector an open country re-opened every panel beneath it, so a nested region * could never be collapsed: Washington's chevron flipped and its aria-expanded * changed, but Mount Rainier stayed on screen because the open USA group above * it kept matching the rule. A panel must answer to its own group and nothing * else. * * The ceiling stays a max-height rather than the grid 0fr/1fr technique: an fr * track collapses to its padding inside this auto-height, overflow-hidden panel, * which shows nothing at all. 2000px comfortably clears any group today; if a * country ever holds enough places to approach it, raise it here — the symptom * would be a group that stops part-way down. */ .mns-directory.is-enhanced .mns-maker > .mns-maker-panel { max-height: 0; transition: max-height 0.3s ease; } .mns-directory.is-enhanced .mns-maker.is-open > .mns-maker-panel { max-height: 2000px; } .mns-maker-rows { padding-bottom: 1rem; display: flex; flex-direction: column; } /* --- Curated group header: a link to its page + a chevron that expands it * ("both a destination and a dropdown"). Used for nested Location groups. --- */ .mns-maker-head { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 0; } .mns-maker-link { font-family: var(--mns-serif); font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 600; color: var(--global-palette3); text-decoration: none; } .mns-maker-link:hover { text-decoration: underline; text-decoration-color: var(--global-palette6); text-underline-offset: 4px; } .mns-maker-head .mns-maker-count { margin-left: auto; } /* Every state listed, exactly as .mns-maker-btn above: Kadence's default * button chrome otherwise paints a dark rounded background the moment this is * clicked, and because a click leaves the button focused, that shading stayed * behind the plus long after the pointer had moved away. */ .mns-maker-toggle, .mns-maker-toggle:hover, .mns-maker-toggle:focus, .mns-maker-toggle:active { background: transparent; border: 0; box-shadow: none; padding: 0; cursor: pointer; display: flex; align-items: center; flex: none; } .mns-maker-toggle:focus { outline: none; } .mns-maker-toggle:focus-visible { outline: 1px dotted var(--global-palette5); outline-offset: 4px; } /* --- Nested groups (region/state level): quieter, indented, dotted dividers * instead of the full-width country rule. --- */ .mns-maker .mns-maker { border-top: none; } /* Indent each nesting level's contents so depth reads at a glance (a place * under a state sits deeper than the state). Scoped to Locations so the flat * Film Stocks accordions are unaffected. */ .mns-location-directory .mns-maker-panel > .mns-maker-rows { padding-left: 1.5rem; } .mns-maker-rows > .mns-maker:not(:first-child) { border-top: 1px dotted var(--global-palette6); } .mns-maker .mns-maker > .mns-maker-btn, .mns-maker .mns-maker > .mns-maker-head { padding: 0.85rem 0; } .mns-maker .mns-maker .mns-maker-name, .mns-maker .mns-maker .mns-maker-link { font-size: 1.3rem; } .mns-maker .mns-maker .mns-maker-sign { width: 18px; height: 18px; } /* --- Destination row (Style A: contact-sheet) --- */ .mns-stock-row { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 1.25rem; padding: 0.85rem 1rem; margin: 0 -1rem; border-radius: 3px; color: inherit; text-decoration: none; transition: background 0.18s ease; } .mns-stock-row.is-hidden { display: none; } .mns-stock-row:hover { background: var(--global-palette7); } .mns-stock-thumb { width: 76px; height: 52px; border-radius: 2px; overflow: hidden; position: relative; flex: none; background: var(--global-palette7); } /* A filled thumbnail is dressed as a single frame of slide film: an ink * "film base" framing a window for the photo, with sprocket perforations * punched along the top and bottom edges. */ .mns-stock-thumb:not(.is-empty) { background: var(--global-palette3); padding: 6px 3px; } .mns-stock-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 1px; } .mns-stock-thumb:not(.is-empty)::before, .mns-stock-thumb:not(.is-empty)::after { content: ""; position: absolute; left: 4px; right: 4px; height: 3px; z-index: 1; background-image: repeating-linear-gradient(90deg, #ece4d3 0 3px, transparent 3px 7px); } .mns-stock-thumb:not(.is-empty)::before { top: 1.5px; } .mns-stock-thumb:not(.is-empty)::after { bottom: 1.5px; } /* Empty thumbs stay a plain frame until a photo exists. */ .mns-stock-thumb.is-empty { border: 1px solid var(--global-palette6); background: transparent; } /* A format search row shows its drawn negative-frame glyph, not a photo — so it * skips the ink slide-film dressing and just centres the mark on the cream. */ .mns-stock-thumb--glyph, .mns-stock-thumb--glyph:not(.is-empty) { background: #fdfbf6; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--global-palette6); } .mns-stock-thumb--glyph::before, .mns-stock-thumb--glyph::after { display: none; } .mns-stock-thumb--glyph svg { width: 100%; height: 100%; } /* A lens row's overview, shown on the index (its own page is pure photographs). */ .mns-stock-excerpt { display: block; font-family: var(--mns-serif); font-size: 0.98rem; line-height: 1.5; color: var(--global-palette4); margin-top: 0.5rem; max-width: 60ch; } .mns-stock-row.has-excerpt { align-items: flex-start; } .mns-stock-row.has-excerpt .mns-stock-thumb { margin-top: 2px; } /* ================================================================== * FORMATS INDEX — each format is its own panel: the negative drawn * true-to-scale, its facts, an overview, and a link to the photos. * ================================================================== */ .mns-format-entries { margin-top: 2.4rem; } /* Shared entry layout for the Format and Lens indexes: a design element on a * plate at left, then the detail (name, facts, overview, link) filling the row * so there is no dead space to the right. */ .mns-format-entry, .mns-lens-entry { display: grid; grid-template-columns: 240px 1fr; gap: 2.6rem; align-items: start; padding: 2.4rem 0; border-top: 1px solid var(--global-palette6); } .mns-format-entry:last-child, .mns-lens-entry:last-child { border-bottom: 1px solid var(--global-palette6); } .mns-lens-entry.is-hidden { display: none; /* search filter */ } /* The plate the format's negative diagram sits on. */ .mns-format-figure { display: flex; align-items: center; justify-content: center; min-height: 150px; padding: 1.4rem; background: #fdfbf6; border: 1px solid var(--global-palette6); border-radius: 2px; } .mns-format-svg { max-width: 100%; height: auto; } /* The lens entry now shows its chosen photo, framed like a matted print. */ .mns-lens-figure { aspect-ratio: 3 / 2; overflow: hidden; background: #efeae0; border: 1px solid var(--global-palette6); border-radius: 2px; } .mns-lens-figure img { display: block; width: 100%; height: 100%; object-fit: cover; } .mns-lens-figure.is-empty { display: flex; align-items: center; justify-content: center; background: #fdfbf6; } /* Shared detail column. */ .mns-entry-name { font-family: var(--mns-serif); font-size: clamp(1.5rem, 2.3vw, 1.95rem); font-weight: 600; line-height: 1.1; margin: 0; } .mns-entry-name a { color: var(--global-palette3); text-decoration: none; } .mns-entry-name a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--global-palette5); } .mns-entry-facts { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--global-palette5); margin: 0.6rem 0 0; } .mns-entry-overview { margin-top: 1rem; } .mns-entry-overview p { font-family: var(--mns-serif); font-size: 1.15rem; line-height: 1.62; color: var(--global-palette4); margin: 0 0 0.8rem; } .mns-entry-link { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--global-palette3); text-decoration: none; border-bottom: 1px solid var(--global-palette6); padding-bottom: 3px; } .mns-entry-link svg { width: 17px; height: 17px; transition: transform 0.2s ease; } .mns-entry-link:hover { border-bottom-color: var(--global-palette3); } .mns-entry-link:hover svg { transform: translateX(3px); } @media (max-width: 700px) { .mns-format-entry, .mns-lens-entry { grid-template-columns: 1fr; gap: 1.4rem; } .mns-format-figure, .mns-lens-figure { min-height: 0; } } .mns-stock-mid { min-width: 0; } .mns-stock-name { display: block; font-size: 1.3rem; line-height: 1.15; color: var(--global-palette3); } /* Alternate names on a directory / search row — small, muted, italic. */ .mns-stock-aka { display: block; font-family: var(--mns-serif); font-style: italic; font-size: 0.85rem; color: var(--global-palette5); margin-top: 0.2rem; } .mns-stock-specs { display: block; font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--global-palette5); margin-top: 0.28rem; } .mns-stock-tail { display: flex; align-items: center; gap: 1rem; white-space: nowrap; } .mns-stock-holds { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--global-palette5); } .mns-stock-arrow { width: 20px; height: 20px; stroke: var(--global-palette5); flex: none; transition: transform 0.18s ease, stroke 0.18s ease; } .mns-stock-row:hover .mns-stock-arrow { transform: translateX(4px); stroke: var(--global-palette3); } .mns-stock-name mark { background: #efe4c4; color: inherit; padding: 0 0.05em; border-radius: 2px; } @media (max-width: 600px) { .mns-stock-row { grid-template-columns: 60px 1fr; gap: 0.9rem; } .mns-stock-thumb { width: 60px; height: 40px; } .mns-stock-thumb:not(.is-empty) { padding: 5px 2px; } .mns-stock-tail { grid-column: 1 / -1; justify-content: flex-start; margin-top: 0.15rem; } .mns-maker-count { display: none; } } @media (prefers-reduced-motion: reduce) { .mns-maker-panel, .mns-stock-arrow, .mns-maker-sign::before, .mns-maker-sign::after { transition: none; } } /* Photographs are not draggable — see the matching handler in functions.php. * Stops a drag straight to the desktop; not an attempt at right-click blocking, * which breaks ordinary browsing and protects nothing. */ img { -webkit-user-drag: none; -khtml-user-drag: none; user-drag: none; } /* ================================================================== * LOCATIONS MAP ATLAS — interactive map (Leaflet + warm-tinted basemap) * ================================================================== */ /* The colour the sea comes out AFTER the tile-pane filter below. Used for the * map's own background so the letterbox band a tall phone frame leaves above * and below the world reads as more ocean rather than as empty page. Measured, * not guessed: CARTO's sea samples rgb(207,228,232), which the filter turns * into this. Recompute it if that filter changes. */ :root:root { --mns-map-water: #e7f0ea; } .mns-map { height: clamp(360px, 52vh, 560px); margin-top: 2rem; border: 1px solid var(--global-palette6); border-radius: 3px; background: var(--mns-map-water); position: relative; z-index: 0; } .mns-map-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--global-palette5); } /* Leaflet sets .leaflet-container on the map element itself, so this must be a * compound selector (not a descendant) to beat Leaflet's default grey. */ .mns-map.leaflet-container { background: var(--mns-map-water); font-family: var(--mns-serif); } /* Gently warm the basemap so it belongs to the site, while keeping the country * names and borders clearly legible. */ .mns-map .leaflet-tile-pane { filter: sepia(0.16) saturate(0.9) brightness(1.02) hue-rotate(-6deg); } .mns-map .leaflet-control-zoom a { color: var(--global-palette3); background: #fdfbf6; border-color: var(--global-palette6); } .mns-map .leaflet-control-attribution { background: rgba(253, 251, 246, 0.8); font-size: 10px; } /* --- Pins --- */ .mns-pin-dot { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--global-palette3); border: 2px solid #fdfbf6; box-shadow: 0 0 0 1px rgba(41, 38, 31, 0.25), 0 1px 5px rgba(41, 38, 31, 0.4); transition: transform 0.15s ease; } .mns-pin:hover .mns-pin-dot { transform: scale(1.25); } /* --- Pin preview popup --- */ .leaflet-popup.mns-pin-popwrap .leaflet-popup-content-wrapper { background: #fdfbf6; border: 1px solid var(--global-palette6); border-radius: 4px; box-shadow: 0 8px 24px rgba(41, 38, 31, 0.14); padding: 0; overflow: hidden; } .leaflet-popup.mns-pin-popwrap .leaflet-popup-content { margin: 0; width: auto !important; } .leaflet-popup.mns-pin-popwrap .leaflet-popup-tip { background: #fdfbf6; } .mns-pin-pop { display: flex; gap: 0.7rem; align-items: center; text-decoration: none; color: inherit; padding: 0.5rem 0.75rem 0.5rem 0.5rem; width: 214px; } .mns-pin-thumb { width: 64px; height: 44px; flex: none; border-radius: 2px; background-size: cover; background-position: center; background-color: var(--global-palette7); } .mns-pin-name { display: block; font-family: var(--mns-serif); font-size: 1.02rem; line-height: 1.15; color: var(--global-palette3); } .mns-pin-region, .mns-pin-count { display: block; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--global-palette5); margin-top: 0.22rem; } @media (max-width: 600px) { .mns-map { height: 340px; } } /* ================================================================== * HOME PAGE — statement, search, recent articles, the two ways to * browse, and a closing hero photograph. Same quiet gallery-wall * language as the rest of the site; the photography carries the colour. * ================================================================== */ .mns-home .site-main { padding-bottom: 4rem; } /* --- Opening statement + search --- */ .mns-home-lead { max-width: 900px; margin: 2.5rem auto 0; text-align: center; } .mns-home-statement { font-family: var(--mns-serif); font-size: clamp(2.3rem, 5.2vw, 4rem); line-height: 1.1; font-weight: 600; color: var(--global-palette3); letter-spacing: -0.015em; margin: 0; text-wrap: balance; } .mns-home-sub { font-family: var(--mns-serif); font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--global-palette5); max-width: 830px; /* wide enough to settle onto two lines */ margin: 1.3rem auto 0; text-wrap: balance; } .mns-home-search { position: relative; max-width: 560px; margin: 2.2rem auto 0; } .mns-home-search svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--global-palette5); pointer-events: none; } .mns-home-search input[type="search"] { width: 100%; font-family: var(--mns-serif); font-size: 1.1rem; color: var(--global-palette3); background: #fdfbf6; border: 1px solid var(--global-palette6); border-radius: 2px; /* !important: Kadence resets input padding with high specificity. */ padding: 0.9rem 1rem 0.9rem 2.9rem !important; text-align: left; } .mns-home-search input::placeholder { color: var(--global-palette5); } .mns-home-search input:focus { outline: none; border-color: var(--global-palette3); } /* --- Section rhythm --- */ .mns-home-section { margin-top: 5rem; } /* An onward arrow on the "All articles" link. */ .mns-home-articles .mns-section-action::after { content: "\2192"; margin-left: 0.5em; display: inline-block; transition: transform 0.2s ease; } .mns-home-articles .mns-section-action:hover::after { transform: translateX(3px); } /* --- The two ways to browse --- */ .mns-browse-intro { font-family: var(--mns-serif); font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.5; color: var(--global-palette4); max-width: 760px; margin: 0 0 2.5rem; } .mns-browse-intro em { font-style: italic; color: var(--global-palette3); } .mns-doorways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; } /* Each primary doorway is a horizontal card: a photograph held to the left as a * supporting accent, with the wayfinding text in ink beside it on the cream * ground — always legible, image never dominating. */ .mns-doorway { display: flex; align-items: stretch; min-height: 190px; text-decoration: none; color: inherit; border: 1px solid var(--global-palette6); border-radius: 2px; overflow: hidden; background: #fdfbf6; transition: border-color 0.2s ease; } .mns-doorway:hover { border-color: var(--global-palette5); } .mns-doorway-thumb { flex: none; width: 42%; max-width: 260px; overflow: hidden; background: var(--global-palette7); } .mns-doorway-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); } .mns-doorway:hover .mns-doorway-thumb img { transform: scale(1.04); } .mns-doorway-body { display: flex; flex-direction: column; justify-content: center; padding: 1.5rem 1.6rem; min-width: 0; } .mns-doorway-meta { display: block; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--global-palette5); margin-bottom: 0.5rem; } .mns-doorway-title { display: flex; align-items: center; gap: 0.5rem; font-family: var(--mns-serif); font-size: clamp(1.4rem, 2.1vw, 1.75rem); line-height: 1.12; font-weight: 600; color: var(--global-palette3); } .mns-doorway-arrow { width: 22px; height: 22px; flex: none; transition: transform 0.25s ease; } .mns-doorway:hover .mns-doorway-arrow { transform: translateX(4px); } .mns-doorway-blurb { display: block; font-family: var(--mns-serif); font-size: 1rem; line-height: 1.5; color: var(--global-palette5); margin-top: 0.6rem; } /* A quiet lead-in to the secondary paths, echoing the primary intro line. */ .mns-browse-subline { margin: 2.2rem 0 0; font-family: var(--mns-serif); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.5; color: var(--global-palette5); } /* The two secondary paths — a pair of quiet chips beneath the primary doorways: * smaller and lighter than the doorways, but designed enough to invite a click. */ .mns-browse-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; /* The pair sat tight under its lead-in line (16px) with a large drop to the * hero heading below (80px), which read as top-heavy. Adding 16px above and * taking the same 16px off below settles the chips nearer the middle of that * space — 32px above, 64px below — while the total height the block occupies * is unchanged, so the hero section beneath does not move at all. */ margin: 2rem 0 -1rem; } .mns-secondary-card { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1.1rem; text-decoration: none; color: var(--global-palette3); border: 1px solid var(--global-palette6); border-radius: 2px; background: transparent; transition: border-color 0.2s ease, background 0.2s ease; } .mns-secondary-card:hover { border-color: var(--global-palette5); background: #fdfbf6; } .mns-secondary-icon { flex: none; display: flex; color: var(--global-palette3); } .mns-secondary-icon svg { width: 26px; height: 26px; } .mns-secondary-text { display: flex; flex-direction: column; min-width: 0; margin-right: auto; } .mns-secondary-label { font-family: var(--mns-serif); font-size: 1.15rem; font-weight: 600; line-height: 1.2; color: var(--global-palette3); } .mns-secondary-count { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--global-palette5); margin-top: 0.15rem; } .mns-secondary-arrow { flex: none; width: 18px; height: 18px; color: var(--global-palette5); transition: transform 0.2s ease, color 0.2s ease; } .mns-secondary-card:hover .mns-secondary-arrow { transform: translateX(3px); color: var(--global-palette3); } /* --- Recent articles: one at a time on a phone --------------------------- * A desktop row shows three cards side by side at no cost. Stacked on a phone * the same three fill most of the screen before the archive is even in view, * so only the newest is shown and the rest are a tap away. The control and the * hiding both live in the phone breakpoint further down; here it is simply * absent, leaving the approved desktop row exactly as it was. */ .mns-articles-reveal { display: none; } /* --- Closing hero photograph --- * Its own section (heading + hairline) sets it apart from the browse block. The * photograph is shown whole — never cropped — centred like a matted print, with * a capped height so it never dominates a short screen. */ .mns-home-hero { margin: 0; } .mns-home-hero-frame { display: block; text-align: center; line-height: 0; } .mns-home-hero-frame img { display: inline-block; width: auto; max-width: 100%; height: auto; max-height: 64vh; } .mns-home-hero-caption { margin-top: 0.9rem; text-align: center; font-family: var(--mns-serif); font-size: 1rem; line-height: 1.4; color: var(--global-palette3); } .mns-home-hero-caption a { color: var(--global-palette3); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--global-palette5); transition: text-decoration-color 0.15s ease; } .mns-home-hero-caption a:hover { text-decoration-color: var(--global-palette3); } @media (max-width: 900px) { .mns-home-section { margin-top: 3.8rem; } .mns-doorways { gap: 1.2rem; } .mns-doorway { min-height: 160px; } } @media (max-width: 700px) { .mns-doorways { grid-template-columns: 1fr; gap: 1.2rem; } /* Side-by-side leaves the photograph a tall narrow slot on a phone, so a 3:2 * frame is cropped to a sliver. Stack instead — words first, then the * photograph whole beneath them at its own proportions. DOM order is thumb * then body, so `order` does the swap rather than column-reverse, which * would leave the reading order disagreeing with the markup. */ .mns-doorway { flex-direction: column; min-height: 0; } .mns-doorway-body { order: 1; padding: 1.3rem 1.3rem 1.15rem; } .mns-doorway-thumb { order: 2; width: 100%; max-width: none; } .mns-doorway-thumb img { height: auto; } .mns-browse-secondary { grid-template-columns: 1fr; gap: 0.8rem; } /* Everything after the newest article waits to be asked for. */ .mns-home-articles .mns-article-card:not(:first-child) { display: none; } .mns-home-articles.is-expanded .mns-article-card { display: block; } .mns-articles-reveal { display: block; margin-top: 1.6rem; text-align: center; } /* Same quiet pill as the gallery's show-more, and reset across every state * for the same reason: Kadence's chrome would otherwise darken it the moment * it is tapped, and a tap leaves a button focused. */ .mns-articles-reveal-btn, .mns-articles-reveal-btn:hover, .mns-articles-reveal-btn:focus, .mns-articles-reveal-btn:active, .mns-articles-reveal-all { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.5rem; background: transparent; box-shadow: none; border: 1px solid var(--global-palette6); border-radius: 999px; font-family: var(--mns-serif); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--global-palette3); text-decoration: none; cursor: pointer; } /* A chevron drawn from a rotated corner, so it needs no image. */ .mns-articles-chevron { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); } /* 1rem is a floor, not a preference: iOS Safari zooms the whole page when a * focused input is under 16px. The placeholder is shortened by script for * narrow screens instead — see mns-placeholders in functions.php. */ .mns-home-search input[type="search"] { font-size: 1rem; padding-left: 2.6rem !important; } .mns-home-hero-frame img { max-height: 56vh; } .mns-home-hero-caption { font-size: 0.95rem; } } /* ================================================================== * PHOTO DETAIL — beneath each photograph in the lightbox, its place, * film, format and lens as links onward. Styled on GLightbox's own * description element, because it sanitises slide descriptions and * strips any wrapper of ours. Cream on the dark overlay. * ================================================================== */ .glightbox-container .gdesc-inner { padding: 1.1rem 1.25rem 1.35rem; } .glightbox-container .gslide-desc { font-family: var(--mns-serif); font-size: 1rem; line-height: 1.5; text-align: center; color: rgba(246, 244, 239, 0.72); } .glightbox-container .gslide-desc a { color: #f6f4ef; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(246, 244, 239, 0.4); transition: text-decoration-color 0.15s ease; white-space: nowrap; } .glightbox-container .gslide-desc a:hover, .glightbox-container .gslide-desc a:focus { text-decoration-color: #f6f4ef; } @media (max-width: 700px) { .glightbox-container .gslide-desc { font-size: 0.9rem; } /* The tags sit BESIDE the photograph, not on it. * * GLightbox positions the description absolutely over the bottom of the * slide. On a laptop the image is matted with space to spare, so it never * shows; on a phone the photograph fills the frame and the tags covered the * bottom of the picture. Putting the description back into normal flow, in a * column, gives it its own band and leaves the image the rest. */ .glightbox-container .ginner-container.desc-bottom { flex-direction: column; justify-content: center; } /* GLightbox measures its frame with 100vh. On iOS Safari that is the LARGE * viewport — the height the page would have if the browser's toolbars were * hidden — so on a real phone the frame runs roughly 180px past the bottom * of what is actually on screen. The photograph gets cut off behind the * toolbar and the tags are pushed into it. That is the fault Marwan kept * seeing and this pane cannot reproduce, because here 100vh and the visible * height are the same number. dvh tracks the VISIBLE viewport, toolbars * included, so the frame is the screen. The vh line stays first as a * fallback for anything that doesn't know dvh. */ .glightbox-container .gslide .ginner-container { height: 100vh; height: 100dvh; } /* On a touch device GLightbox adds .glightbox-mobile to and re-pins * the description over the image from there. That selector carries the same * specificity as ours and its stylesheet prints after ours (it is enqueued * at footer time), so an equal-specificity rule of ours loses the tie. Both * selectors are listed so the band wins on a phone as well as in a narrow * desktop window. */ .glightbox-container .gslide-description.description-bottom, .glightbox-mobile .glightbox-container .gslide-description.description-bottom { position: relative; top: auto; bottom: auto; flex: 0 0 auto; /* Their mobile rule adds 50px of dead space under the tags. */ padding: 0; max-height: none; } .glightbox-container .gslide-media.gslide-image { flex: 0 1 auto; min-height: 0; } /* Shrink to whatever the description leaves, and never crop to do it. */ .glightbox-container .gslide-media.gslide-image img { max-height: 100%; object-fit: contain; } /* Arrows rest after a moment so the photograph has the screen, and wake at a * touch — see armArrowFade() in mns-lightbox.js. */ .glightbox-container .gnext, .glightbox-container .gprev { transition: opacity 0.45s ease; } /* .gbtn is on the same element and buys one more class of specificity. * Without it this ties Kadence's own `.glightbox-container:not(.specificity) * .gprev { opacity: .4 }` — a deliberate specificity hack on their side — * and loses on source order, so the class went on and nothing faded. That * is why the arrows never left the picture. */ .glightbox-container.mns-arrows-idle .gnext.gbtn, .glightbox-container.mns-arrows-idle .gprev.gbtn { opacity: 0; pointer-events: none; } } /* ================================================================== * ABOUT — long-form prose. The rest of the site runs text the full * width of the frame, but this page is nothing but paragraphs, so the * measure is held to a comfortable reading length instead. Raise * max-width to let it run wider. * ================================================================== */ /* No top-margin override here: the About page keeps the same generous space * above its title as the Film Stocks / Locations / Formats index pages, so the * masthead-to-title rhythm matches across the site. */ .mns-about .mns-term-header { border-bottom: 1px solid var(--global-palette6); padding-bottom: 1.4rem; margin-bottom: 2.6rem; } /* Prose left, portrait right, divided by a hairline that runs the full height * of the block — a newspaper column rule. The two columns are sized so the * space either side of that rule is equal, which is what stops the photograph * reading as though it's floating in the margin. */ .mns-about-layout { display: grid; grid-template-columns: minmax(0, 42rem) 1fr; /* Equal to the portrait's padding-left below, so the rule sits exactly * midway between the text and the photograph at any screen width. */ gap: 5.5rem; align-items: stretch; } .mns-about-layout.is-textonly { grid-template-columns: minmax(0, 46rem); } .mns-about-body { grid-column: 1; grid-row: 1; } .mns-about-portrait { grid-column: 2; grid-row: 1; width: 100%; margin: 0; border-left: 1px solid var(--global-palette6); padding-left: 5.5rem; } .mns-about-portrait img { display: block; width: 100%; height: auto; } .mns-about-portrait-caption { margin-top: 0.8rem; font-family: var(--mns-serif); font-size: 0.95rem; line-height: 1.45; color: var(--global-palette5); } .mns-about-portrait-caption a { color: var(--global-palette3); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--global-palette6); } .mns-about-portrait-caption a:hover { text-decoration-color: var(--global-palette3); } .mns-about-body p { font-family: var(--mns-serif); font-size: 1.3rem; line-height: 1.66; color: var(--global-palette4); margin: 0 0 1.5rem; } /* The opening paragraph sets up what follows, so it reads a step heavier than * the body — a standfirst, not quite a heading. */ .mns-about-body > p:first-of-type { font-size: 1.5rem; line-height: 1.5; font-weight: 500; color: var(--global-palette3); } .mns-about-body a { color: var(--global-palette3); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--global-palette5); } .mns-about-body a:hover { text-decoration-color: var(--global-palette3); } .mns-about-onward-line { font-family: var(--mns-serif); font-size: 1.3rem; line-height: 1.6; color: var(--global-palette4); margin: 0; } .mns-about-onward-line a { color: var(--global-palette3); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--global-palette5); } .mns-about-onward-line a:hover { text-decoration-color: var(--global-palette3); } /* Below the two-column threshold the portrait leads, like the author photo at * the top of a magazine piece, and the prose follows beneath it. */ @media (max-width: 1000px) { .mns-about-layout, .mns-about-layout.is-textonly { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; } .mns-about-portrait, .mns-about-body { grid-column: 1; } /* Stacked: the rule and its indent belong to the two-column layout only. */ .mns-about-portrait { grid-row: 1; justify-self: start; width: auto; max-width: 24rem; border-left: 0; padding-left: 0; } .mns-about-body { grid-row: 2; } } @media (max-width: 700px) { .mns-about-body > p:first-of-type { font-size: 1.35rem; } .mns-about-body p { font-size: 1.2rem; } .mns-about-onward-line { font-size: 1.2rem; } .mns-about-portrait { max-width: none; } } /* ================================================================== * ARTICLES ARCHIVE — the "All articles" page (posts index). Same * cream frame and hairline language as the Locations / Film Stocks * indexes, so the three directories match. * ================================================================== */ body.blog .content-area, .mns-archive.content-area { margin-top: 0.75rem !important; padding-top: 0 !important; } /* A hairline under the header gives the page structure. */ .mns-archive .mns-term-header { border-bottom: 1px solid var(--global-palette6); padding-bottom: 1.4rem; } .mns-archive-search { max-width: none; /* full page width, like the Locations / Film Stocks search */ margin: 1.8rem 0 0; } .mns-archive-list { margin-top: 2.6rem; } /* ================================================================== * SEARCH RESULTS — the library in one page. Curated destinations * (film stocks, places, lenses, formats) come first as the same * rows their own directories use, so a result looks like the page * it leads to; the articles follow as ordinary cards. * ================================================================== */ .mns-search-group { margin-top: 3.2rem; } /* The first group sits closer to the search field: the heading is already * doing the separating, so the full gap reads as a hole. */ .mns-search-group:first-of-type { margin-top: 2.4rem; } /* Rows carry their own hairline separators, so the group only needs to open * a little air beneath its heading. */ .mns-search-rows { margin-top: 0.4rem; border-top: 1px solid var(--global-palette7); } /* Inside a results group the cards are already under a heading, so they don't * need the archive's extra top margin as well. */ .mns-search-group .mns-archive-list { margin-top: 1.8rem; } .mns-search-widen { margin-top: 2.6rem; font-family: var(--mns-serif); font-size: 1rem; color: var(--global-palette5); } .mns-search-widen a { color: var(--global-palette3); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--global-palette6); } .mns-search-widen a:hover { text-decoration-color: var(--global-palette3); } .mns-search .mns-term-empty a { color: var(--global-palette3); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--global-palette6); } /* --- Type-ahead suggestions under the search field --------------------- */ /* The field is the positioning context for the panel. */ .mns-home-search { position: relative; } .mns-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; background: #fdfbf6; border: 1px solid var(--global-palette6); border-radius: 3px; box-shadow: 0 8px 24px rgba(41, 38, 31, 0.08); overflow: hidden; } .mns-suggest-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 0.7rem 1.1rem; text-decoration: none; border-bottom: 1px solid var(--global-palette7); } /* The name and, for a film stock, its "also sold as" line — stacked, taking the * left of the row while the kind label stays at the right. */ .mns-suggest-main { display: flex; flex-direction: column; align-items: flex-start; /* left-align the name with the alias line beneath */ gap: 0.1rem; min-width: 0; } /* One line, always. Article titles here run long — "UltraMax 400 in Mount * Rainier National Park" — and a wrapped title turns a tidy list of rows into * ragged blocks. Truncating keeps every row the same height and lets the * opening words, which carry the film and the place, do the identifying. * min-width:0 is what allows a flex item to shrink far enough to ellipsis. */ .mns-suggest-label { font-family: var(--mns-serif); font-size: 1.05rem; color: var(--global-palette3); min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Shows WHY a row is being offered — same idiom as the directory search. */ .mns-suggest-label mark { background: none; color: var(--global-palette3); font-weight: 600; } /* The alternate names, small and quiet under the name — the film-stock page's * treatment, in miniature. Truncates rather than pushing the row taller. */ .mns-suggest-aka { font-family: var(--mns-serif); font-style: italic; font-size: 0.8rem; color: var(--global-palette5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mns-suggest-kind { flex: none; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--global-palette5); padding-top: 0.2rem; /* optically level with the serif name under flex-start */ } /* One highlight style for hover and keyboard alike, so arrowing through the * list looks exactly like moving the mouse down it. */ .mns-suggest-row.is-active, .mns-suggest-row:hover, .mns-suggest-row:focus { background: var(--global-palette8, #f1eee6); } /* The way out to the full results page. Deliberately styled as the footer of * the list rather than another result, so it reads as "there is more". */ .mns-suggest-all { display: block; width: 100%; padding: 0.7rem 1.1rem; border: 0; border-top: 1px solid var(--global-palette6); background: transparent; font-family: var(--mns-serif); font-size: 0.95rem; color: var(--global-palette5); text-align: left; cursor: pointer; } .mns-suggest-all.is-active, .mns-suggest-all:hover, .mns-suggest-all:focus { background: var(--global-palette8, #f1eee6); color: var(--global-palette3); } /* On a phone the two halves of a row can't share a line — a name like "Mount * Rainier National Park" wraps and then reads as if it were centred. Stack * them instead, name first, so every row starts at the same left edge. */ @media (max-width: 600px) { .mns-suggest-row { flex-direction: column; align-items: flex-start; gap: 0.15rem; } /* Full width so a long article title truncates with an ellipsis at the panel * edge instead of running off the screen. */ .mns-suggest-main { width: 100%; } .mns-suggest-label, .mns-suggest-kind { text-align: left; } /* Stacked rows give the title the full width, so it only truncates when it * genuinely cannot fit. */ .mns-suggest-label { max-width: 100%; } } /* Pagination: quiet ink numerals, centred. */ .mns-pagination { margin-top: 3.5rem; } .mns-pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.3rem 0.9rem; } .mns-pagination .page-numbers { font-family: var(--mns-serif); font-size: 1rem; color: var(--global-palette5); text-decoration: none; padding: 0.2rem 0.3rem; } .mns-pagination a.page-numbers:hover { color: var(--global-palette3); } .mns-pagination .page-numbers.current { color: var(--global-palette3); border-bottom: 1px solid var(--global-palette3); } /* ================================================================== * HEADER NAV + MOBILE DRAWER * * Two things sat outside the design language: the primary nav rendered * in the system sans (unlike the serif everywhere else), and the mobile * menu opened as a near-black panel with white text — clinical against * the cream-and-serif site. This brings both home: the editorial serif * for the links, and a cream drawer with ink text and hairline rules. * ================================================================== */ /* Nav links in the site's serif — desktop header and mobile drawer alike. * The site-name link (a.brand, inside the serif .site-title) is included: the * .site-title wrapper is serif but Kadence sets the link's own font to the * system sans, so without this the name in the masthead rendered in sans while * the rest of the site is serif. */ .main-navigation .menu-item a, .header-navigation .menu-item a, #mobile-drawer .menu-item a, .site-branding .site-title a, .site-branding a.brand { font-family: var(--mns-serif); } /* The mobile drawer: cream ground, ink text, hairline dividers. */ #mobile-drawer .drawer-inner { background: var(--mns-cream) !important; } #mobile-drawer .drawer-content, #mobile-drawer .mobile-navigation .menu-item a, #mobile-drawer .mobile-navigation .menu-item a:hover, #mobile-drawer .mobile-navigation .menu-item a:focus { color: var(--global-palette3) !important; } #mobile-drawer .mobile-navigation .menu-item a { border-bottom-color: var(--global-palette6) !important; font-size: 1.2rem; } /* The close (X) drawn in ink so it reads on the cream. The visible lines are * the spans' own background, so colour those (not just the pseudo-elements). */ #mobile-drawer .menu-toggle-close .toggle-close-bar, #mobile-drawer .menu-toggle-close .toggle-close-bar::before, #mobile-drawer .menu-toggle-close .toggle-close-bar::after { background-color: var(--global-palette3) !important; } /* ================================================================== * GAP ABOVE THE FOOTER * * Kadence stacks two spacers before the footer — .site-main's 64px bottom * padding and .content-area's bottom margin (80 / 48 / 32px by breakpoint) — * totalling 144px on desktop, which reads a touch generous. Zero both and set * the gap in ONE place, on the footer itself, about 20% tighter and closer to a * standard footer: ~115px desktop, tapering down on smaller screens. One knob, * uniform on every page. * ================================================================== */ .site-main { padding-bottom: 0 !important; } .content-area { margin-bottom: 0 !important; } .mns-footer { margin-top: 5.76rem; /* ~92px — the footer sits ~20% higher, less gap above */ } @media (max-width: 1024px) { .mns-footer { margin-top: 4.48rem; /* ~72px */ } } @media (max-width: 767px) { .mns-footer { margin-top: 3.84rem; /* ~61px */ } } /* ================================================================== * SITE FOOTER * * Centred on a single axis. An earlier version split the links into * two headed columns and pinned them right, which left a wide empty * middle, set four items against two, and implied that "Browse" and * "This site" were different places — they aren't. One centred row * reads as one library, and stays symmetrical however many pages it * eventually holds. * * Same cream ground as the page, so the site ends the way it reads. * ================================================================== */ .mns-footer { border-top: 1px solid var(--global-palette6); } /* Kadence caps its own footer container at 1290px; the rest of the site runs * to 1520px, so without this the footer sat 51px inside every other edge on a * 1440px screen. Same figure and same !important as the content override. */ .mns-footer .site-container { max-width: 1520px !important; } /* Scoped through .mns-footer on purpose. Kadence's `.site-container` sets * `padding: 0 var(--global-content-edge-padding)` — a shorthand, so it zeroes * the vertical padding too, and it lands after this stylesheet at equal * specificity. A bare `.mns-footer-inner` rule therefore had no vertical * padding at all, which is what left the name sitting on the hairline. */ .mns-footer .mns-footer-inner { /* ~48px above the name, matched below the signup (footer-bottom margin-top) * so the name-to-signup block sits centred in the footer. */ padding-top: 2.75rem; /* Even the copyright between the hairline above it and the page bottom: * this matches the 1.5rem the hairline sits above the copyright (the * .mns-footer-bottom padding-top), so the line reads centred at the base. */ padding-bottom: 1.5rem; text-align: center; } .mns-footer-name { font-family: var(--mns-serif); font-size: 1.5rem; font-weight: 500; color: var(--global-palette3); text-decoration: none; letter-spacing: 0.01em; } .mns-footer-name:hover { color: var(--global-palette3); text-decoration: none; } /* The links take the position the intro line used to hold — the same 0.85rem * below the name — so removing that line closed the gap rather than leaving a * hole, and everything below shifted up with it. */ .mns-footer-nav { margin-top: 0.85rem; } .mns-footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.75rem; } .mns-footer-list a { font-family: var(--mns-serif); font-size: 1.05rem; color: var(--global-palette4); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; } /* Hover is a pointer idea. Guarded so a phone doesn't keep the state * stuck on after a tap — the pattern used everywhere on this site. */ @media (hover: hover) { .mns-footer-list a:hover { color: var(--global-palette3); border-bottom-color: var(--global-palette6); } } /* --- Email signup --- * Centred beneath the links, in the same field styling as the site's search * boxes. The button is outlined rather than filled: nothing else on this site * is a solid block of colour, and a filled button here would be the loudest * thing on the page. */ .mns-footer-signup { margin-top: 2.75rem; } .mns-signup-line { font-family: var(--mns-serif); margin: 0 0 1rem; font-size: 1rem; color: var(--global-palette5); } .mns-signup-form { display: flex; justify-content: center; gap: 0.6rem; max-width: 30rem; margin: 0 auto; } .mns-signup-form input[type="email"] { flex: 1 1 auto; min-width: 0; font-family: var(--mns-serif); font-size: 1.05rem; color: var(--global-palette3); background: #fdfbf6; border: 1px solid var(--global-palette6); border-radius: 2px; /* !important: Kadence resets input padding with high specificity. */ padding: 0.75rem 1rem !important; text-align: left; } .mns-signup-form input::placeholder { color: var(--global-palette5); } .mns-signup-form input:focus { outline: none; border-color: var(--global-palette3); } /* Every state reset: Kadence's default button chrome otherwise paints a dark * background on hover, focus and active — and a click leaves a button focused, * so the shading would stay behind after the pointer left. */ .mns-signup-form button, .mns-signup-form button:hover, .mns-signup-form button:focus, .mns-signup-form button:active { flex: 0 0 auto; font-family: var(--mns-serif); font-size: 1.05rem; color: var(--global-palette3); background: transparent; border: 1px solid var(--global-palette3); border-radius: 2px; box-shadow: none; padding: 0.75rem 1.4rem; cursor: pointer; } @media (hover: hover) { .mns-signup-form button:hover { background: var(--global-palette3); color: var(--mns-cream); } } .mns-signup-form.is-sending button { opacity: 0.55; cursor: default; } .mns-signup-status { font-family: var(--mns-serif); margin: 0.9rem 0 0; font-size: 0.95rem; color: var(--global-palette5); } .mns-signup-status.is-error { color: var(--global-palette3); } /* No message, no gap. */ .mns-signup-status:empty { display: none; } .mns-footer-bottom { /* Match the space above the name (footer padding-top) so the name-to-signup * block sits centred between the top of the footer and the copyright rule. */ margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--global-palette6); } .mns-footer-copy { font-family: var(--mns-serif); margin: 0; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--global-palette5); } /* On a phone the row of links becomes two or three centred rows, which stays * symmetrical; only the breathing room comes in. */ @media (max-width: 700px) { .mns-footer .mns-footer-inner { padding-top: 2.75rem; padding-bottom: 1.5rem; } .mns-footer-name { font-size: 1.35rem; } .mns-footer-list { gap: 0.9rem 2rem; } .mns-footer-signup { margin-top: 2.25rem; } /* Stacked so the field keeps the full width — the type cannot shrink to * make room (iOS Safari zooms the page for any focused input under 16px), * and a half-width field clips the placeholder. */ .mns-signup-form { flex-direction: column; align-items: stretch; gap: 1.2rem; /* a little more room between the field and the Sign up button */ } .mns-signup-form button, .mns-signup-form button:hover, .mns-signup-form button:focus, .mns-signup-form button:active { align-self: center; } .mns-footer-bottom { /* Trimmed by the same amount added to the signup gap above, so the button * shifts down but the footer's overall height is unchanged. */ margin-top: 2.5rem; } } /* ================================================================== * PHONE HELD SIDEWAYS (landscape). * * A phone in landscape is a SHORT, WIDE viewport — an iPhone 14 Pro is * 852x393. That width is wide enough to slip past every phone breakpoint * (<=600 / 700 / 781px) and land on the tablet rules, even though it is * still a phone. The short height is what tells a sideways phone apart * from a real tablet or a desktop window, both of which are far taller — * so `max-height: 500px` selects the phone case without touching either. * * GOVERNING IDEA: the short dimension here is the HEIGHT (~393px), so * anything sized to the full WIDTH (852px) turns out far too tall and reads * as "zoomed in". So photographs are sized to fit the screen HEIGHT and sit * matted in cream — like the homepage hero — rather than filling the width. * * Everything here is scoped to that case. The approved portrait-phone and * desktop layouts are, by construction, untouched. * ================================================================== */ @media (orientation: landscape) and (max-height: 500px) { /* --- Homepage browse cards: compact horizontal cards, one per row, with * the photograph held to the left and shown WHOLE (no crop). A full-width * stacked photo was far too tall to see the whole card on a short screen. */ .mns-doorways { grid-template-columns: 1fr; gap: 1rem; } .mns-doorway { flex-direction: row; align-items: flex-start; min-height: 0; } .mns-doorway-body { order: 0; padding: 1.15rem 1.4rem; } .mns-doorway-thumb { order: 0; width: 38%; max-width: 290px; } .mns-doorway-thumb img { height: auto; } .mns-browse-secondary { grid-template-columns: 1fr; gap: 0.8rem; } /* --- Article: the body text still spreads to the full frame (lining up * with the photo strip), but the photographs are capped by HEIGHT so each * one fits the short screen whole instead of filling the width and running * off the bottom. Lining the photo edges up with the text is deliberately * given up here for legible sizing. --- */ :root:root { --mns-photo-h: 2000px; } .single .entry-content-wrap { padding-left: 0 !important; padding-right: 0 !important; } .single .entry-content .alignwide { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; } .single .entry-content > figure.wp-block-image img { max-height: min(62vh, 260px) !important; width: auto !important; } /* Image-beside-text rows stack here (small photo, then its text), so the * photo can be small enough to take in at a glance. */ .single .entry-content .wp-block-columns { flex-direction: column !important; gap: 1rem !important; } .single .entry-content .wp-block-column { width: 100% !important; flex-basis: auto !important; } .single .entry-content .wp-block-column > figure.wp-block-image { text-align: center; } .single .entry-content .wp-block-column img { max-height: min(52vh, 220px) !important; width: auto !important; margin-left: auto; margin-right: auto; } /* --- Term-page photo galleries (locations, film stocks, lenses, * formats): a uniform-height contact sheet. Every photo is the same height * at its own natural width, so nothing is cropped, rows pack with no empty * blocks, and the height is small enough to see whole frames on screen. * * Centred as inline-blocks rather than a flex row: `justify-content: center` * on a wrapped flex container leaves the wider rows packed to the left here * (only the narrowest row centres), so the sheet drifted off to the left. * `text-align: center` on inline-blocks centres EVERY row the same way, on * every browser. `font-size: 0` removes the whitespace between inline items * (the frames are the gallery's only children — the "Show more" button is a * sibling — so nothing legible is zeroed); the 4px margins give the 8px * between-frame gap back. * * This centres each row, which floats a lone last frame in the middle. The * script (mns-gallery.js) refines it: it centres the whole BLOCK and left- * aligns the rows, so a short final row sits at the left. `text-align: * center` here is the no-script fallback. --- */ .mns-gallery { display: block; text-align: center; font-size: 0; } .mns-gallery-item { display: inline-block; vertical-align: top; height: 158px !important; width: auto !important; margin: 4px !important; } .mns-gallery-item img { height: 158px; width: auto; object-fit: contain; } /* --- Film-stock spec strip: all five specs on one centred row. --- */ .mns-film-specs { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 1rem 1.5rem; } .mns-film-spec { align-items: center; text-align: center; } /* --- About: the portrait floats to the left and the opening paragraph * wraps around it, filling what was empty space to its right. --- */ .mns-about-layout, .mns-about-layout.is-textonly { display: block !important; } .mns-about-portrait { float: left; width: auto; max-width: 40%; margin: 0.3rem 1.7rem 0.6rem 0 !important; border-left: 0 !important; padding-left: 0 !important; } .mns-about-portrait img { width: auto; height: auto; max-height: min(66vh, 300px); max-width: 100%; } .mns-about-body { display: block; } } /* Site name in the header across the tablet range (720–1024px). Kadence * hides the site title there by default (a `.vs-md-false` visibility class), * which is why the name vanished on a phone held sideways — and on a * tablet in portrait. Show it again in that band; scoped to the mobile * header so it can never double up with the desktop header's own title. */ @media screen and (min-width: 720px) and (max-width: 1024px) { #mobile-header .site-title.vs-md-false { display: block !important; } }