inside the theme on * /journal/ and /journal//, and the itself * on the standalone ?pdf=1 print route. * .gufo-doc--themed → only when nested in the theme. * * Fonts and colours mirror the MyListing child theme (Montserrat, #ac2c3d). * * 1. Tokens * 2. Journals index grid * 3. Journal views * 3b. Themed-mode overrides * 4. Print / PDF */ /* ===================================================================== * 1. Tokens * ================================================================== */ :root { /* Palette lifted from the MyListing child theme's own style.css. */ --gufo-brand: #ac2c3d; --gufo-brand-dark: #a51c30; --gufo-brand-tint: rgba( 172, 44, 61, 0.08 ); --gufo-ink: #1f2937; --gufo-ink-soft: #374151; --gufo-muted: #6b7280; --gufo-paper: #ffffff; --gufo-paper-alt: #f8f9fa; --gufo-line: #e9ecef; /* * The site is single-family Montserrat, so prose and UI share a stack. * They stay separate tokens so body copy could diverge later without * touching every rule. The face itself comes from the theme on the themed * views, and from the webfont on the standalone print route. */ --gufo-font-ui: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --gufo-font-prose: var( --gufo-font-ui ); --gufo-measure: 46rem; --gufo-radius: 6px; --gufo-ease: cubic-bezier( 0.22, 0.61, 0.36, 1 ); } /* ===================================================================== * 2. Journals index — lives inside the theme, so keep it self-contained * ================================================================== */ .gufo-journals { --gufo-cols: 3; font-family: var( --gufo-font-ui ); margin: 0 auto; max-width: 1240px; } .gufo-journals__grid { display: grid; grid-template-columns: repeat( var( --gufo-cols, 3 ), minmax( 0, 1fr ) ); gap: 2.75rem 2rem; margin: 0; padding: 0; list-style: none; } .gufo-journals__empty { color: var( --gufo-muted ); font-family: var( --gufo-font-prose ); font-size: 1.125rem; font-style: italic; margin: 2rem 0; text-align: center; } .gufo-journals .gufo-card { margin: 0; padding: 0; min-width: 0; } .gufo-journals .gufo-card__link { border: 0; box-shadow: none; color: inherit; display: block; text-decoration: none; outline-offset: 4px; } .gufo-journals .gufo-card__cover { aspect-ratio: 3 / 4; background: var( --gufo-paper-alt ); border-radius: var( --gufo-radius ); box-shadow: 0 1px 2px rgba( 31, 41, 55, 0.08 ), 0 12px 28px -12px rgba( 31, 41, 55, 0.28 ); display: block; overflow: hidden; position: relative; transition: transform 0.45s var( --gufo-ease ), box-shadow 0.45s var( --gufo-ease ); will-change: transform; } .gufo-journals .gufo-card__cover img { display: block; height: 100%; width: 100%; object-fit: cover; transition: transform 0.7s var( --gufo-ease ); border-radius: 0; max-width: none; } .gufo-journals .gufo-card__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba( 31, 41, 55, 0.55 ) 0%, rgba( 31, 41, 55, 0 ) 42% ); opacity: 0.85; pointer-events: none; } .gufo-journals .gufo-card__cover--empty { align-items: center; background: radial-gradient( 120% 90% at 20% 0%, #fff 0%, var( --gufo-paper-alt ) 70% ); display: flex; justify-content: center; } .gufo-journals .gufo-card__cover--empty::after { display: none; } .gufo-journals .gufo-card__initial { color: var( --gufo-brand ); font-family: var( --gufo-font-prose ); font-size: 5rem; line-height: 1; opacity: 0.35; } .gufo-journals .gufo-card__badge { background: rgba( 255, 255, 255, 0.94 ); border-radius: 100px; bottom: 0.85rem; color: var( --gufo-ink ); font-size: 0.6875rem; font-weight: 600; left: 0.85rem; letter-spacing: 0.06em; padding: 0.3rem 0.7rem; position: absolute; text-transform: uppercase; z-index: 2; } .gufo-journals .gufo-card__body { display: block; padding: 1.1rem 0.15rem 0; } .gufo-journals .gufo-card__title { color: var( --gufo-ink ); display: block; font-family: var( --gufo-font-prose ); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; transition: color 0.25s var( --gufo-ease ); } .gufo-journals .gufo-card__subtitle { color: var( --gufo-muted ); display: block; font-size: 0.9375rem; line-height: 1.5; margin-top: 0.35rem; } .gufo-journals .gufo-card__more { color: var( --gufo-brand ); display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.09em; margin-top: 0.7rem; opacity: 0; text-transform: uppercase; transform: translateY( 4px ); transition: opacity 0.3s var( --gufo-ease ), transform 0.3s var( --gufo-ease ); } .gufo-journals .gufo-card__link:hover .gufo-card__cover, .gufo-journals .gufo-card__link:focus-visible .gufo-card__cover { box-shadow: 0 2px 4px rgba( 31, 41, 55, 0.1 ), 0 26px 48px -18px rgba( 31, 41, 55, 0.42 ); transform: translateY( -6px ); } .gufo-journals .gufo-card__link:hover .gufo-card__cover img, .gufo-journals .gufo-card__link:focus-visible .gufo-card__cover img { transform: scale( 1.04 ); } .gufo-journals .gufo-card__link:hover .gufo-card__title, .gufo-journals .gufo-card__link:focus-visible .gufo-card__title { color: var( --gufo-brand ); } .gufo-journals .gufo-card__link:hover .gufo-card__more, .gufo-journals .gufo-card__link:focus-visible .gufo-card__more { opacity: 1; transform: none; } @media ( max-width: 900px ) { .gufo-journals__grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 2rem 1.25rem; } } @media ( max-width: 520px ) { .gufo-journals__grid { grid-template-columns: 1fr; } } /* ===================================================================== * 3. Journal views * ================================================================== */ /* Scoped with :has() so pages without a journal view are untouched. */ :root:has( .gufo-doc ) { scroll-behavior: smooth; } .gufo-doc { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; background: var( --gufo-paper ); color: var( --gufo-ink ); font-family: var( --gufo-font-prose ); /* Montserrat has a tall x-height; 17px here reads like 18px of a serif. */ font-size: 17px; line-height: 1.7; margin: 0; padding: 0; text-rendering: optimizeLegibility; } .gufo-doc *, .gufo-doc *::before, .gufo-doc *::after { box-sizing: border-box; } .gufo-doc img { display: block; height: auto; max-width: 100%; } /* * Branded link colour is scoped to prose only. A blanket `.gufo-doc a` rule * (specificity 0,1,1) would outrank single-class components like * .gufo-btn--primary and .gufo-cover__back (0,1,0) and repaint them red. */ .gufo-intro a, .gufo-entry__excerpt a, .gufo-entry__facts a, .gufo-entry__more a { color: var( --gufo-brand ); text-decoration-color: rgba( 172, 44, 61, 0.35 ); text-underline-offset: 0.18em; transition: color 0.2s var( --gufo-ease ), text-decoration-color 0.2s var( --gufo-ease ); } .gufo-intro a:hover, .gufo-entry__excerpt a:hover, .gufo-entry__facts a:hover, .gufo-entry__more a:hover { color: var( --gufo-brand-dark ); text-decoration-color: currentColor; } .gufo-doc ::selection { background: rgba( 172, 44, 61, 0.16 ); } /* --- Cover ---------------------------------------------------------- */ .gufo-cover { align-items: flex-end; background: var( --gufo-ink ); display: flex; isolation: isolate; min-height: min( 88vh, 860px ); overflow: hidden; padding: 3rem clamp( 1.25rem, 5vw, 4rem ) clamp( 2.5rem, 6vw, 4.5rem ); position: relative; } /* .gufo-doc scope needed: the blanket `.gufo-doc img` rule outranks a bare single-class selector and would force height:auto here. */ .gufo-doc .gufo-cover__img { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; z-index: -2; } /* * Cover legibility. * * The title is always white, so the scrim — not the text colour — is what has * to adapt. Three tiers: * base safety net, assumes nothing about the photo. Strong * enough for white text over a mid-bright image even * when GD is missing and no tone was detected. * .gufo-cover--tone-dark image already dark; ease off so it stays a photo. * .gufo-cover--dim image is bright; push hard behind the text band. * * Switching to dark text on light images was the other option, but it fails on * the common case of a photo that is bright in one corner and dark in another. * A sufficient scrim always works. */ .gufo-cover__scrim { background: linear-gradient( to top, rgba( 17, 24, 39, 0.94 ) 0%, rgba( 17, 24, 39, 0.82 ) 26%, rgba( 17, 24, 39, 0.52 ) 55%, rgba( 17, 24, 39, 0.22 ) 78%, rgba( 17, 24, 39, 0.42 ) 100% ); inset: 0; position: absolute; z-index: -1; } .gufo-cover--tone-dark .gufo-cover__scrim { background: linear-gradient( to top, rgba( 17, 24, 39, 0.86 ) 0%, rgba( 17, 24, 39, 0.68 ) 28%, rgba( 17, 24, 39, 0.34 ) 58%, rgba( 17, 24, 39, 0.1 ) 80%, rgba( 17, 24, 39, 0.34 ) 100% ); } .gufo-cover--dim .gufo-cover__scrim { background: linear-gradient( to top, rgba( 17, 24, 39, 0.97 ) 0%, rgba( 17, 24, 39, 0.9 ) 30%, rgba( 17, 24, 39, 0.68 ) 60%, rgba( 17, 24, 39, 0.4 ) 82%, rgba( 17, 24, 39, 0.5 ) 100% ); } .gufo-cover__inner { color: #fff; margin: 0 auto; max-width: 62rem; position: relative; width: 100%; } .gufo-cover__back { color: rgba( 255, 255, 255, 0.9 ); text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.5 ); display: inline-block; font-family: var( --gufo-font-ui ); font-size: 0.75rem; font-weight: 600; left: 0; letter-spacing: 0.12em; position: absolute; text-decoration: none; text-transform: uppercase; top: -3.5rem; transition: color 0.2s var( --gufo-ease ), transform 0.2s var( --gufo-ease ); } .gufo-cover__back:hover { color: #fff; transform: translateX( -3px ); } .gufo-cover__eyebrow { color: rgba( 255, 255, 255, 0.82 ); font-family: var( --gufo-font-ui ); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.22em; margin: 0 0 1.25rem; text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.5 ); text-transform: uppercase; } .gufo-cover__eyebrow::after { background: var( --gufo-brand ); content: ""; display: block; height: 3px; margin-top: 1rem; width: 56px; } /* * Last line of defence. The tight shadow keeps the glyph edges readable even * against a blown-out highlight the scrim did not fully cover; the wide one * lifts the whole block off the photo. */ .gufo-cover__title { font-size: clamp( 2.5rem, 7.2vw, 5.25rem ); font-weight: 700; letter-spacing: -0.025em; line-height: 1.03; margin: 0; max-width: 18ch; text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.55 ), 0 4px 32px rgba( 0, 0, 0, 0.45 ); } .gufo-cover__subtitle { color: rgba( 255, 255, 255, 0.92 ); font-size: clamp( 1.0625rem, 2.1vw, 1.4375rem ); font-style: italic; line-height: 1.5; margin: 1.25rem 0 0; max-width: 46ch; text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.5 ); } .gufo-cover__meta { color: rgba( 255, 255, 255, 0.78 ); text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.5 ); display: flex; flex-wrap: wrap; font-family: var( --gufo-font-ui ); font-size: 0.8125rem; gap: 0.6rem; letter-spacing: 0.06em; margin: 2rem 0 0; text-transform: uppercase; } /* Cover fallback when no featured image is set. */ .gufo-doc--nocover .gufo-cover { background: radial-gradient( 130% 100% at 15% 0%, #fff 0%, var( --gufo-paper-alt ) 65%, #eef1f4 100% ); border-bottom: 1px solid var( --gufo-line ); min-height: min( 62vh, 620px ); } .gufo-doc--nocover .gufo-cover__inner { color: var( --gufo-ink ); } .gufo-doc--nocover .gufo-cover__title { text-shadow: none; } .gufo-doc--nocover .gufo-cover__back, .gufo-doc--nocover .gufo-cover__eyebrow { color: var( --gufo-brand ); } .gufo-doc--nocover .gufo-cover__subtitle { color: var( --gufo-ink-soft ); } .gufo-doc--nocover .gufo-cover__meta { color: var( --gufo-muted ); } /* --- Index masthead (/journal/) ------------------------------------- */ .gufo-masthead { background: radial-gradient( 130% 110% at 50% 0%, #fff 0%, var( --gufo-paper-alt ) 70%, #eef1f4 100% ); border-bottom: 1px solid var( --gufo-line ); padding: clamp( 2.5rem, 7vw, 5rem ) clamp( 1.25rem, 5vw, 2rem ) clamp( 2.5rem, 6vw, 4rem ); position: relative; text-align: center; } .gufo-masthead__inner { margin: 0 auto; max-width: 62rem; } .gufo-masthead__back { color: var( --gufo-brand ); display: inline-block; font-family: var( --gufo-font-ui ); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; margin-bottom: 2rem; text-decoration: none; text-transform: uppercase; transition: transform 0.2s var( --gufo-ease ), color 0.2s var( --gufo-ease ); } .gufo-masthead__back:hover { color: var( --gufo-brand-dark ); transform: translateX( -3px ); } .gufo-masthead__eyebrow { color: var( --gufo-muted ); font-family: var( --gufo-font-ui ); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.22em; margin: 0 0 1rem; text-transform: uppercase; } .gufo-masthead__title { font-size: clamp( 2.25rem, 6vw, 4rem ); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; margin: 0; } .gufo-masthead__title::after { background: var( --gufo-brand ); content: ""; display: block; height: 3px; margin: 1.5rem auto 0; width: 56px; } .gufo-masthead__meta { color: var( --gufo-muted ); font-family: var( --gufo-font-ui ); font-size: 0.8125rem; letter-spacing: 0.06em; margin: 1.25rem 0 0; text-transform: uppercase; } /* The index is a grid, not a reading column — let it breathe wider. */ .gufo-main--index { max-width: 1240px; } /* --- Floating actions ---------------------------------------------- */ .gufo-actions { display: flex; gap: 0.5rem; position: fixed; right: clamp( 1rem, 3vw, 2rem ); top: clamp( 1rem, 3vw, 2rem ); z-index: 30; } .gufo-btn { -webkit-backdrop-filter: blur( 10px ); backdrop-filter: blur( 10px ); align-items: center; border: 1px solid transparent; border-radius: 100px; cursor: pointer; display: inline-flex; font-family: var( --gufo-font-ui ); font-size: 0.8125rem; font-weight: 600; gap: 0.45rem; letter-spacing: 0.02em; line-height: 1; padding: 0.7rem 1.15rem; text-decoration: none; transition: transform 0.2s var( --gufo-ease ), box-shadow 0.2s var( --gufo-ease ), background 0.2s var( --gufo-ease ); white-space: nowrap; } .gufo-btn__icon { font-size: 0.95em; line-height: 1; } .gufo-btn--primary { background: var( --gufo-brand ); box-shadow: 0 4px 16px -4px rgba( 172, 44, 61, 0.6 ); color: #fff; } .gufo-btn--primary:hover { background: var( --gufo-brand-dark ); box-shadow: 0 8px 22px -6px rgba( 172, 44, 61, 0.7 ); color: #fff; transform: translateY( -2px ); } .gufo-btn--ghost { background: rgba( 255, 255, 255, 0.82 ); border-color: rgba( 31, 41, 55, 0.12 ); color: var( --gufo-ink ); } .gufo-btn--ghost:hover { background: #fff; color: var( --gufo-ink ); transform: translateY( -2px ); } /* --- Main column ---------------------------------------------------- */ .gufo-main { margin: 0 auto; max-width: 900px; padding: clamp( 3rem, 8vw, 6rem ) clamp( 1.25rem, 5vw, 2rem ) clamp( 3rem, 7vw, 5rem ); } .gufo-intro { border-bottom: 1px solid var( --gufo-line ); color: var( --gufo-ink-soft ); font-size: 1.1875rem; line-height: 1.8; margin: 0 auto clamp( 3rem, 7vw, 4.5rem ); max-width: var( --gufo-measure ); padding-bottom: clamp( 2.5rem, 6vw, 3.5rem ); } /* Drop cap sized for Montserrat's larger x-height and heavier form. */ .gufo-intro > p:first-of-type::first-letter { color: var( --gufo-brand ); float: left; font-size: 3.1em; font-weight: 700; line-height: 0.9; margin: 0.04em 0.1em 0 0; } .gufo-intro p { margin: 0 0 1.35em; } .gufo-intro p:last-child { margin-bottom: 0; } .gufo-intro a { text-decoration: underline; } .gufo-blank { color: var( --gufo-muted ); font-style: italic; text-align: center; } /* --- Password gate -------------------------------------------------- */ .gufo-locked { border: 1px solid var( --gufo-line ); border-radius: var( --gufo-radius ); margin: 0 auto; max-width: 34rem; padding: clamp( 2rem, 5vw, 3rem ); text-align: center; } .gufo-locked__note { color: var( --gufo-ink-soft ); font-size: 1.0625rem; font-style: italic; margin: 0 0 1.25rem; } .gufo-locked form { align-items: center; display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; } .gufo-locked label { color: var( --gufo-muted ); display: block; flex: 1 1 100%; font-family: var( --gufo-font-ui ); font-size: 0.8125rem; margin-bottom: 0.4rem; } .gufo-locked input[type="password"] { background: #fff; border: 1px solid var( --gufo-line ); border-radius: var( --gufo-radius ); font-family: var( --gufo-font-ui ); font-size: 1rem; padding: 0.65rem 0.85rem; } .gufo-locked input[type="password"]:focus { border-color: var( --gufo-brand ); box-shadow: 0 0 0 3px var( --gufo-brand-tint ); outline: none; } .gufo-locked input[type="submit"] { background: var( --gufo-brand ); border: 0; border-radius: 100px; color: #fff; cursor: pointer; font-family: var( --gufo-font-ui ); font-size: 0.8125rem; font-weight: 600; padding: 0.72rem 1.3rem; transition: background 0.2s var( --gufo-ease ); } .gufo-locked input[type="submit"]:hover { background: var( --gufo-brand-dark ); } /* --- Table of contents ---------------------------------------------- */ .gufo-toc { background: rgba( 255, 255, 255, 0.6 ); border: 1px solid var( --gufo-line ); border-radius: var( --gufo-radius ); margin: 0 auto clamp( 3rem, 7vw, 4.5rem ); max-width: var( --gufo-measure ); } .gufo-toc__summary { align-items: center; color: var( --gufo-ink ); cursor: pointer; display: flex; font-family: var( --gufo-font-ui ); font-size: 0.75rem; font-weight: 700; gap: 0.75rem; letter-spacing: 0.16em; list-style: none; padding: 1rem 1.25rem; text-transform: uppercase; -webkit-user-select: none; user-select: none; } /* Hide the native disclosure triangle in every engine. */ .gufo-toc__summary::-webkit-details-marker { display: none; } .gufo-toc__summary::marker { content: ""; } .gufo-toc__summary:hover .gufo-toc__label { color: var( --gufo-brand ); } .gufo-toc__label { transition: color 0.2s var( --gufo-ease ); } .gufo-toc__count { color: var( --gufo-muted ); font-weight: 500; letter-spacing: 0.06em; margin-left: auto; text-transform: none; } /* Chevron */ .gufo-toc__summary::after { border-bottom: 2px solid var( --gufo-brand ); border-right: 2px solid var( --gufo-brand ); content: ""; flex: 0 0 auto; height: 7px; margin-left: 0.15rem; transform: rotate( 45deg ) translate( -2px, -2px ); transition: transform 0.25s var( --gufo-ease ); width: 7px; } .gufo-toc[open] .gufo-toc__summary::after { transform: rotate( -135deg ) translate( -2px, -2px ); } .gufo-toc__list { list-style: none; margin: 0; padding: 0 1.25rem 0.5rem; } .gufo-toc__item + .gufo-toc__item { border-top: 1px solid var( --gufo-line ); } .gufo-toc__link { align-items: baseline; color: var( --gufo-ink ); display: flex; gap: 0.9rem; padding: 0.62rem 0; text-decoration: none; transition: color 0.2s var( --gufo-ease ); } .gufo-toc__num { color: var( --gufo-brand ); flex: 0 0 auto; font-family: var( --gufo-font-ui ); font-size: 0.6875rem; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: 0.08em; opacity: 0.75; } .gufo-toc__text { font-size: 1.0625rem; line-height: 1.4; } .gufo-toc__link:hover { color: var( --gufo-brand ); } .gufo-toc__link:hover .gufo-toc__text { text-decoration: underline; text-underline-offset: 0.16em; } /* --- Entries -------------------------------------------------------- */ .gufo-entries { display: flex; flex-direction: column; gap: clamp( 3.5rem, 8vw, 6rem ); } .gufo-entry { break-inside: avoid; margin: 0 auto; max-width: var( --gufo-measure ); page-break-inside: avoid; position: relative; scroll-margin-top: 2rem; width: 100%; } .gufo-entry + .gufo-entry { border-top: 1px solid var( --gufo-line ); padding-top: clamp( 3.5rem, 8vw, 6rem ); } .gufo-entry__num { color: var( --gufo-brand ); display: block; font-family: var( --gufo-font-ui ); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; margin-bottom: 1.1rem; opacity: 0.75; } .gufo-entry__media { background: var( --gufo-paper-alt ); border-radius: var( --gufo-radius ); margin: 0 0 1.75rem; overflow: hidden; } .gufo-entry__media img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; } .gufo-entry__title { font-size: clamp( 1.5rem, 3.4vw, 2.125rem ); font-weight: 600; letter-spacing: -0.018em; line-height: 1.18; margin: 0 0 0.9rem; } .gufo-entry__title a { color: var( --gufo-ink ); text-decoration: none; background-image: linear-gradient( var( --gufo-brand ), var( --gufo-brand ) ); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 2px; transition: background-size 0.35s var( --gufo-ease ), color 0.25s var( --gufo-ease ); } .gufo-entry__title a:hover { background-size: 100% 2px; color: var( --gufo-brand ); } .gufo-terms { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0 0 1.35rem; padding: 0; } .gufo-terms__item { background: var( --gufo-brand-tint ); border-radius: 100px; color: var( --gufo-brand-dark ); font-family: var( --gufo-font-ui ); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.07em; padding: 0.32rem 0.7rem; text-transform: uppercase; } .gufo-entry__excerpt { color: var( --gufo-ink-soft ); font-size: 1.0625rem; line-height: 1.8; } .gufo-entry__excerpt p { margin: 0 0 1.2em; } .gufo-entry__excerpt p:last-child { margin-bottom: 0; } .gufo-entry__facts { border-left: 2px solid var( --gufo-line ); display: grid; font-family: var( --gufo-font-ui ); gap: 0.35rem 1rem; grid-template-columns: auto 1fr; margin: 1.6rem 0 0; padding: 0.25rem 0 0.25rem 1.1rem; } .gufo-entry__facts dt { color: var( --gufo-muted ); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.07em; margin: 0; text-transform: uppercase; white-space: nowrap; } .gufo-entry__facts dd { color: var( --gufo-ink-soft ); font-size: 0.9375rem; margin: 0; } .gufo-entry__more { font-family: var( --gufo-font-ui ); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.05em; margin: 1.6rem 0 0; } .gufo-entry__more a { text-decoration: none; } .gufo-entry__more a:hover { text-decoration: underline; } .gufo-entry__url { color: var( --gufo-muted ); font-size: 0.75rem; font-weight: 400; letter-spacing: 0; word-break: break-all; } /* --- Footer --------------------------------------------------------- */ .gufo-foot { border-top: 1px solid var( --gufo-line ); color: var( --gufo-muted ); font-family: var( --gufo-font-ui ); font-size: 0.75rem; letter-spacing: 0.05em; margin: 0 auto; max-width: 900px; padding: 2.25rem clamp( 1.25rem, 5vw, 2rem ) 3.5rem; text-align: center; } .gufo-foot__line { margin: 0 0 0.4rem; } .gufo-foot__line--url { opacity: 0.6; word-break: break-all; } @media ( max-width: 640px ) { .gufo-doc { font-size: 17px; } .gufo-actions { background: linear-gradient( to top, rgba( 255, 255, 255, 0.98 ) 55%, rgba( 255, 255, 255, 0 ) ); bottom: 0; justify-content: center; left: 0; padding: 0.9rem 1rem calc( 0.9rem + env( safe-area-inset-bottom, 0px ) ); right: 0; top: auto; } .gufo-cover__back { position: static; margin-bottom: 1.75rem; } } @media ( prefers-reduced-motion: reduce ) { :root:has( .gufo-doc ) { scroll-behavior: auto; } .gufo-doc *, .gufo-journals * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ===================================================================== * 3b. Themed mode — the view is nested in the theme, not a standalone page * ================================================================== */ /* Let the theme's page background show through. */ .gufo-doc--themed { background: transparent; } /* A full-height hero is wrong under a site header — shorten it. */ .gufo-doc--themed .gufo-cover { min-height: min( 62vh, 560px ); } .gufo-doc--themed.gufo-doc--nocover .gufo-cover { min-height: 0; padding-top: clamp( 2.5rem, 6vw, 4rem ); } /* * The standalone view floats the actions top-right. Inside the theme that * collides with the site header (and any sticky nav), so they become a normal * right-aligned row in the content flow instead. */ .gufo-doc--themed .gufo-actions { background: none; justify-content: flex-end; margin: 0 auto; max-width: 1240px; padding: 1.25rem clamp( 1.25rem, 5vw, 2rem ) 0; position: static; } /* The masthead already carries a back link on the index. */ .gufo-doc--themed .gufo-main--index { padding-top: clamp( 2rem, 5vw, 3rem ); } @media ( max-width: 640px ) { .gufo-doc--themed .gufo-actions { bottom: auto; justify-content: flex-start; left: auto; padding: 1rem clamp( 1.25rem, 5vw, 2rem ) 0; position: static; right: auto; } } /* ===================================================================== * 4. Print / PDF * ================================================================== */ @media print { @page { size: A4; margin: 15mm; } .gufo-doc, .gufo-doc * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; box-shadow: none !important; text-shadow: none !important; } .gufo-doc { background: #fff !important; color: #111 !important; font-size: 11pt; line-height: 1.55; } /* No navigation chrome in the print output. */ .gufo-actions, .gufo-cover__back, .gufo-btn { display: none !important; } /* Cover fills the first sheet, then we break. */ .gufo-cover { break-after: page; page-break-after: always; break-inside: avoid; min-height: 0; height: 235mm; padding: 0 0 18mm; } .gufo-cover__inner { max-width: none; } .gufo-cover__title { font-size: 34pt; line-height: 1.05; } .gufo-cover__subtitle { font-size: 13pt; } .gufo-cover__eyebrow, .gufo-cover__meta { font-size: 8pt; } .gufo-doc--nocover .gufo-cover { background: #fff !important; border-bottom: 1pt solid #ccc; height: auto; padding: 0 0 12mm; } .gufo-main { max-width: none; padding: 0; } .gufo-intro { break-after: auto; font-size: 11pt; max-width: none; padding-bottom: 8mm; } /* * Contents page. The ?pdf=1 route already ships the

with `open`; * this override also covers a plain Ctrl+P from the reading view, where a * collapsed

would otherwise hide its own list via the UA sheet. */ .gufo-toc { background: none !important; border: 1pt solid #ddd; break-inside: avoid; page-break-inside: avoid; margin: 0 0 10mm; max-width: none; } .gufo-toc > .gufo-toc__list { display: block !important; padding: 0 6mm 3mm; } .gufo-toc__summary { font-size: 9pt; padding: 4mm 6mm; } .gufo-toc__summary::after { display: none; } .gufo-toc__count { color: #666 !important; } .gufo-toc__link { color: #111 !important; font-size: 10.5pt; padding: 1.6mm 0; } .gufo-toc__text { font-size: 10.5pt; } .gufo-toc__item + .gufo-toc__item { border-top: 1pt solid #eee; } .gufo-entries { display: block; } .gufo-entry { break-inside: avoid; page-break-inside: avoid; max-width: none; padding-top: 8mm !important; } .gufo-entry + .gufo-entry { border-top: 1pt solid #ddd; } .gufo-entry__title, .gufo-entry__title a { background: none !important; color: #111 !important; font-size: 16pt; } .gufo-entry__excerpt, .gufo-entry__facts dd { color: #222 !important; font-size: 10.5pt; } /* Keep the heading with its image and opening lines. */ .gufo-entry__media { break-after: avoid; page-break-after: avoid; } .gufo-entry__media img { aspect-ratio: auto; max-height: 95mm; object-fit: contain; width: auto; max-width: 100%; } .gufo-entry__title { break-after: avoid; page-break-after: avoid; } .gufo-terms__item { background: #f2f2f2 !important; color: #444 !important; font-size: 7.5pt; } .gufo-entry__url { color: #666 !important; font-size: 8pt; } /* Never expand link URLs — the print URL line is already explicit. */ .gufo-doc a[href]::after { content: "" !important; } .gufo-doc a { color: #111 !important; text-decoration: none !important; } .gufo-foot { border-top: 1pt solid #ddd; color: #777 !important; font-size: 8pt; max-width: none; padding: 6mm 0 0; } .gufo-doc img { max-width: 100% !important; } }