/* othernigel.com: the 1.0 look (live site as of 2026-10-26), rebuilt on the new CMS.
   The first block is the live site's own stylesheet; the rest replaces its inline styles. */
:root{--color-bg:#faf9f6;--color-surface:#fff;--color-paper:#f4f1eb;--color-ink:#1a1a2e;--color-text:#3d3d3d;--color-text-secondary:#888;--color-accent:#8b2c2c;--color-accent-light:#a63d3d;--color-border:#e2ded6;--color-rule:#d8d3c8;--color-hover:#1a1a2e;--color-error:#dc2626;--color-success:#16a34a;--font-serif:"Playfair Display", Georgia, "Times New Roman", serif;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", "Fira Code", "Consolas", monospace;--max-width:780px;--max-width-wide:1080px;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:4rem;--radius:4px;--shadow-sm:0 1px 3px #1a1a2e0a;--shadow-md:0 2px 10px #1a1a2e12}
*,:before,:after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;font-size:16px}
body{font-family:var(--font-sans);color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:1rem;line-height:1.7}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{cursor:pointer;font-family:inherit;font-size:inherit;background:0 0;border:none}
input,textarea{font-family:inherit;font-size:inherit;border:none;outline:none}
h1,h2,h3,h4,h5,h6{color:var(--color-ink);font-weight:700;line-height:1.3}
.container{width:100%;max-width:var(--max-width);padding:0 var(--spacing-lg);margin:0 auto}
.container--wide{max-width:var(--max-width-wide)}
.btn{justify-content:center;align-items:center;gap:var(--spacing-sm);border-radius:var(--radius);white-space:nowrap;padding:.625rem 1.25rem;font-size:.875rem;font-weight:500;transition:all .15s;display:inline-flex}
.btn--primary{background-color:var(--color-accent);color:#fff}
.btn--primary:hover{background-color:var(--color-accent-light)}
.btn--secondary{background-color:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}
.btn--secondary:hover{border-color:var(--color-text)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.input{border:1px solid var(--color-border);border-radius:var(--radius);background-color:var(--color-surface);width:100%;color:var(--color-text);padding:.625rem .875rem;transition:border-color .15s}
.input:focus{border-color:var(--color-accent);box-shadow:0 0 0 2px #8b2c2c14}
.input::placeholder{color:var(--color-text-secondary)}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
::selection{color:var(--color-ink);background-color:#8b2c2c1f}
.bio{padding-top:var(--spacing-2xl);padding-bottom:var(--spacing-xl);align-items:flex-start;gap:2.5rem;display:flex}
.bio-photo{background-color:var(--color-paper);border:1px solid var(--color-rule);width:160px;height:160px;color:var(--color-text-secondary);letter-spacing:.04em;text-transform:uppercase;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.75rem;font-weight:500;display:flex}
.article-meta{color:var(--color-text-secondary);flex-wrap:wrap;align-items:center;gap:1rem;font-size:.9375rem;display:flex}
@media (width<=640px){.container{padding:0 var(--spacing-md)}
.bio{text-align:center;flex-direction:column;align-items:center;gap:1.25rem}
.bio-photo{width:120px;height:120px}
}


/* Aliases so the shared video player styles (copied from ../site) pick up this palette. */
:root{--navy:var(--color-ink);--red:var(--color-accent);--white:#fff;--rule:var(--color-rule);--muted:var(--color-text-secondary);--sans:var(--font-sans)}

hr.rule{border:0;border-top:1px solid var(--color-rule);margin:0}

/* Header */
.site-header{padding:2rem 0 0}
.site-header .top{max-width:var(--max-width);margin:0 auto;padding:0 var(--spacing-lg);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.brand{font-family:var(--font-serif);font-size:1.75rem;font-weight:900;letter-spacing:-.02em;color:var(--color-ink);white-space:nowrap}
.search{position:relative;width:100%;max-width:400px}
.search .icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);font-size:.8125rem;color:var(--color-text-secondary);pointer-events:none}
.search-input{width:100%;padding:.5rem .875rem .5rem 2rem;font-size:.875rem;border:1px solid var(--color-border);border-radius:100px;background-color:var(--color-surface);color:var(--color-text);transition:border-color .15s,box-shadow .15s}
.search-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 2px rgba(139,44,44,.08)}
.search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:20;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-md);overflow:hidden}
.search-result{display:block;padding:.75rem 1rem}
.search-result + .search-result{border-top:1px solid var(--color-border)}
.search-result:hover,.search-result:focus{background-color:var(--color-paper)}
.search-result strong{display:block;font-family:var(--font-serif);font-size:.9375rem;color:var(--color-ink)}
.search-result span{display:block;font-size:.8125rem;color:var(--color-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-empty{padding:.75rem 1rem;font-size:.875rem;color:var(--color-text-secondary)}
.site-nav{max-width:var(--max-width);margin:0 auto;padding:.75rem var(--spacing-lg) 1.5rem;display:flex;align-items:center;gap:1.5rem}
.site-nav a{font-size:.8125rem;font-weight:500;color:var(--color-accent);letter-spacing:.04em;text-transform:uppercase;transition:color .15s}
.site-nav a:hover{color:var(--color-ink)}
main{min-height:calc(100vh - 200px);padding-top:var(--spacing-xl);padding-bottom:var(--spacing-2xl)}

/* Home: bio and article list */
.bio img.bio-photo{object-fit:cover;object-position:center 20%}
.bio-text{padding-top:.5rem}
.bio-name{font-family:var(--font-serif);font-size:1.375rem;font-weight:700;color:var(--color-ink);margin-bottom:.625rem}
.bio-text p:not(.bio-name){font-size:.9375rem;color:var(--color-text);line-height:1.8}
.bio-text p + p:not(.bio-name){margin-top:.75rem}
.article-entry{display:block;padding:1.75rem 0}
.article-entry img{width:100%;height:280px;object-fit:cover;border-radius:var(--radius);margin-bottom:1.25rem}
.entry-date{font-size:.8125rem;color:var(--color-text-secondary);font-weight:500;margin-bottom:.375rem}
.article-title{font-family:var(--font-serif);font-size:1.375rem;font-weight:700;color:var(--color-ink);line-height:1.3;letter-spacing:-.01em;margin-bottom:.5rem}
.article-entry:hover .article-title{text-decoration:underline;text-underline-offset:3px}
.entry-excerpt{font-size:.9375rem;color:var(--color-text);line-height:1.7;margin-bottom:.75rem}
.read-more{font-size:.875rem;font-weight:500;color:var(--color-accent)}
.list-heading{font-family:var(--font-serif);font-size:1.375rem;color:var(--color-ink);padding-bottom:1rem;border-bottom:1px solid var(--color-rule)}
.list-empty{padding:1.75rem 0;color:var(--color-text-secondary)}

/* Article */
.back{display:inline-block;color:var(--color-text-secondary);font-size:.875rem;font-weight:500;margin-bottom:var(--spacing-xl);transition:color .15s}
.back:hover{color:var(--color-ink)}
.article-cover{width:100%;max-height:440px;object-fit:cover;margin-bottom:var(--spacing-xl)}
.article-cover-figure{margin:0 0 var(--spacing-xl)}
.article-cover-figure .article-cover{display:block;margin-bottom:0}
.article-cover-figure figcaption{font-family:var(--font-sans);font-size:.75rem;color:var(--color-text-secondary);margin-top:.375rem;text-align:right}
.article-header{margin-bottom:var(--spacing-2xl);padding-bottom:var(--spacing-xl);border-bottom:1px solid var(--color-rule)}
.article-header h1{font-family:var(--font-serif);font-size:clamp(2rem,4vw,2.75rem);font-weight:900;line-height:1.15;letter-spacing:-.025em;color:var(--color-ink);margin-bottom:var(--spacing-md)}
.article-meta .dot{width:3px;height:3px;border-radius:50%;background-color:var(--color-text-secondary);opacity:.4}
.share{display:flex;align-items:center;gap:.375rem;flex-wrap:wrap}
.share-btn{display:inline-flex;align-items:center;gap:.25rem;padding:.3rem .65rem;font-size:.75rem;font-weight:500;border-radius:100px;border:none;background-color:var(--color-paper);color:var(--color-text-secondary);cursor:pointer;transition:.15s;font-family:var(--font-sans);letter-spacing:.01em}
.share-btn:hover{background-color:var(--color-rule);color:var(--color-ink)}

.article-content{font-family:var(--font-serif);font-size:1.125rem;line-height:1.85;color:var(--color-text)}
.article-content h1{font-family:var(--font-serif);font-size:2rem;font-weight:700;margin:2.5rem 0 1rem;letter-spacing:-.02em;color:var(--color-ink)}
.article-content h2{font-family:var(--font-serif);font-size:1.5rem;font-weight:700;margin:2rem 0 .75rem;letter-spacing:-.015em;color:var(--color-ink)}
.article-content h3{font-family:var(--font-serif);font-size:1.25rem;font-weight:600;margin:1.5rem 0 .5rem;color:var(--color-ink)}
.article-content p{margin-bottom:1.25rem}
.article-content a{color:var(--color-accent);text-decoration:underline;text-underline-offset:2px;transition:opacity .15s ease}
.article-content a:hover{opacity:.6}
.article-content ul,.article-content ol{margin-bottom:1.25rem;padding-left:1.5rem}
.article-content li{margin-bottom:.375rem}
.article-content blockquote{border-left:3px solid var(--color-accent);padding-left:1.25rem;margin:1.5rem 0;color:var(--color-text-secondary);font-style:italic}
.article-content code{font-family:var(--font-mono);font-size:.875em;background-color:var(--color-paper);padding:.15em .4em;border-radius:3px}
.article-content pre{background-color:#1a1a1a;color:#d4d4d4;padding:1.25rem;border-radius:var(--radius);overflow-x:auto;margin:1.5rem 0;font-size:.875rem;line-height:1.6}
.article-content pre code{background:none;padding:0;border-radius:0;color:inherit;font-size:inherit}
.article-content img{max-width:100%;height:auto;margin:1.5rem 0}
.article-content figure{margin:1.5rem 0}
.article-content figure img{border-radius:var(--radius);margin:0}
.article-content figcaption{font-family:var(--font-sans);font-size:.8125rem;color:var(--color-text-secondary);margin-top:.5rem;font-style:italic}
.article-content div[data-video-embed],.article-content div[data-youtube-video]{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:1.5rem 0;border-radius:var(--radius)}
.article-content div[data-video-embed] iframe,.article-content div[data-youtube-video] iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.article-content hr{border:none;border-top:1px solid var(--color-rule);margin:2rem 0}
.article-content strong{font-weight:700;color:var(--color-ink)}
.article-content em{font-style:italic}

/* Footer and newsletter */
.site-footer{background-color:var(--color-paper);border-top:1px solid var(--color-rule)}
.footer-inner{max-width:var(--max-width);margin:0 auto;padding:2.5rem var(--spacing-lg);display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.footer-inner h3{font-family:var(--font-serif);font-size:1.125rem;font-weight:700;color:var(--color-ink);text-align:center}
.footer-text{font-size:.875rem;color:var(--color-text-secondary);text-align:center;max-width:380px}
.newsletter-form{display:flex;gap:.5rem;width:100%;max-width:400px}
.newsletter-form input[type=email]{flex:1 1 0%;padding:.625rem .875rem;font-size:.875rem;border:1px solid var(--color-border);border-radius:var(--radius);background-color:var(--color-surface);color:var(--color-text)}
.newsletter-form input[type=email]:focus{border-color:var(--color-accent);box-shadow:0 0 0 2px #8b2c2c14}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.875rem;text-align:center;min-height:0}
.form-note:empty{display:none}
.form-note.ok{color:var(--color-success)}
.form-note.err{color:var(--color-error)}
.copyright{font-size:.8125rem;color:var(--color-text-secondary)}

/* Leaflet QR page (printed on leaflets, so /qr stays) */
.qr-kicker{font-size:.8125rem;font-weight:500;color:var(--color-accent);letter-spacing:.04em;text-transform:uppercase;margin-bottom:.5rem}
.qr-title{font-family:var(--font-serif);font-size:clamp(2rem,4vw,2.75rem);font-weight:900;line-height:1.15;letter-spacing:-.025em;margin-bottom:var(--spacing-md)}
.qr-intro{font-size:1.0625rem;margin-bottom:var(--spacing-xl)}
.qr-hero{width:100%;max-height:440px;object-fit:cover;margin-bottom:var(--spacing-xl);border-radius:var(--radius)}
.qr-points{list-style:none;counter-reset:qr}
.qr-point{display:flex;gap:1.25rem;padding:1.5rem 0;border-top:1px solid var(--color-rule)}
.qr-num{flex:none;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--color-accent);color:#fff;font-family:var(--font-serif);font-weight:700;font-size:1.125rem;display:flex;align-items:center;justify-content:center}
.qr-point h2{font-family:var(--font-serif);font-size:1.375rem;margin-bottom:.375rem}
.qr-point p{font-size:.9375rem;line-height:1.7}
.qr-point p + p{margin-top:.5rem}
.qr-point img{border-radius:var(--radius);margin-bottom:.75rem}
.qr-point a{display:inline-block;margin-top:.5rem;font-size:.875rem;font-weight:500;color:var(--color-accent)}
.qr-cta{margin:var(--spacing-xl) 0}
.qr-latest{border-top:1px solid var(--color-rule);padding-top:var(--spacing-lg)}

.not-found{text-align:center;padding:var(--spacing-2xl) 0}
.not-found h1{font-family:var(--font-serif);font-size:2rem;margin-bottom:.75rem}
.not-found a{color:var(--color-accent)}

@media (width<=640px){.article-entry img{height:200px}.newsletter-form{flex-direction:column}}

/* ---------- Video player (shared with ../site/public/styles.css) ---------- */
/* Uploaded videos from the CMS (HLS from R2, played by /video.js): the frame carries the video's own shape inline (portrait clips stay portrait, capped at 80% of the screen height). */
.article-content figure[data-type="video"] { margin: 1.6em 0; }
.article-content figure[data-type="video"] .video-frame { box-shadow: 0 1px 0 var(--rule); }
.article-content figure[data-type="video"] figcaption { margin-top: 10px; text-align: center; font: 500 .9rem/1.4 var(--sans); color: var(--muted); }
.video-frame video { display: block; object-fit: contain; }
/* Player (video.js): big centre button, then a bar with touch-sized buttons (48 px on phones). */
.vp { -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.vp:focus { outline: none; }
.video-frame.vp { container-type: size; }
.video-play { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity .2s ease; }
.video-play svg { width: 84px; height: 84px; padding: 22px 20px 22px 24px; border-radius: 50%; background: var(--navy); fill: var(--white); box-shadow: 0 0 0 4px rgba(255, 255, 255, .85), 0 6px 24px rgba(0, 0, 0, .35); transition: transform .15s ease, background .15s ease; }
.video-play:hover svg, .video-play:focus-visible svg { transform: scale(1.06); background: var(--red); }
.video-play:focus-visible { outline: none; }
.video-play:focus-visible svg { outline: 3px solid var(--white); outline-offset: 4px; }
/* After the first play the big button is only the circle, shown while paused (and on phones while the bar is up). */
.vp:not(.vp-idle) .video-play { inset: auto; top: 50%; left: 50%; width: auto; height: auto; transform: translate(-50%, -50%); }
.vp:not(.vp-idle) .video-play svg { width: 72px; height: 72px; padding: 18px; background: rgba(15, 32, 65, .82); box-shadow: 0 0 0 3px rgba(255, 255, 255, .7), 0 4px 18px rgba(0, 0, 0, .35); }
.vp:not(.vp-idle):not(.is-paused):not(.is-touch) .video-play,
.vp.is-touch:not(.vp-idle):not(.vp-show) .video-play,
.vp.is-buffering:not(.is-paused) .video-play,
.vp.is-loading .video-play { opacity: 0; pointer-events: none; }
.vp-length { position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 3px 8px; border-radius: 4px; background: rgba(0, 0, 0, .72); color: #fff; font: 600 .85rem/1.3 var(--sans); font-variant-numeric: tabular-nums; pointer-events: none; }
.vp:not(.vp-idle) .vp-length { display: none; }

.vp-ui { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 28px 6px 4px; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); color: #fff; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.vp.vp-show:not(.vp-idle) .vp-ui, .vp.is-paused:not(.vp-idle) .vp-ui { opacity: 1; pointer-events: auto; }
.vp-row { display: flex; align-items: center; }
.vp-gap { flex: 1; }
.vp-btn { width: 48px; height: 48px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; fill: #fff; cursor: pointer; }
.vp-btn svg { width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.vp-btn:hover { background: rgba(255, 255, 255, .14); }
.vp-btn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.vp-cc { opacity: .75; }
.vp-cc.is-on { opacity: 1; }
.vp-cc.is-on svg { color: #fff; fill: #fff; }
.vp-cc.is-on rect { fill: var(--red); stroke: var(--red); }
.vp-time { padding: 0 6px; font: 600 .9rem/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
/* The seek bar's touch area is 32 px tall; the visible line is 4 px (6 px while dragging). */
.vp-seek { position: relative; height: 32px; margin: 0 12px; cursor: pointer; touch-action: none; display: flex; align-items: center; }
.vp-seek:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
.vp-track { position: relative; width: 100%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .3); transition: height .12s ease; }
.vp-seek:hover .vp-track, .vp-dragging .vp-track { height: 6px; }
.vp-buffered, .vp-played { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; }
.vp-buffered { background: rgba(255, 255, 255, .45); }
.vp-played { background: var(--red); }
.vp-thumb { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); transition: transform .12s ease; }
.vp:not(.is-touch) .vp-seek:not(:hover) .vp-thumb { transform: scale(0); }
.vp-dragging .vp-thumb { transform: scale(1.25); }
.vp-skip { position: absolute; top: 50%; z-index: 2; padding: 10px 16px; margin-top: -22px; border-radius: 22px; background: rgba(0, 0, 0, .6); color: #fff; font: 700 1rem/1.2 var(--sans); opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.vp-skip.is-left { left: 12%; }
.vp-skip.is-right { right: 12%; }
.vp-skip.is-on { opacity: 1; transition: none; }
.video-frame video::cue { font: 600 1.05rem/1.35 var(--sans); background: rgba(0, 0, 0, .75); }
.video-frame.is-loading::after, .video-frame.is-buffering::after { content: ""; position: absolute; z-index: 2; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border: 4px solid rgba(255, 255, 255, .35); border-top-color: var(--white); border-radius: 50%; animation: video-spin .8s linear infinite; pointer-events: none; }
@keyframes video-spin { to { transform: rotate(360deg); } }
/* Full screen: the frame fills the screen whatever shape the video is (the inline sizes are for the article). */
.video-frame.is-full { width: 100% !important; height: 100% !important; max-width: none !important; aspect-ratio: auto !important; border-radius: 0 !important; }
.video-frame.is-full .vp-ui { padding: 40px max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
/* Short frames (a landscape video on a phone): a smaller centre button that sits clear of the bar. */
@container (max-height: 300px) {
  .vp:not(.vp-idle) .video-play { top: calc((100% - 76px) / 2); }
  .vp:not(.vp-idle) .video-play svg { width: 56px; height: 56px; padding: 14px; }
  .vp-ui { padding-top: 16px; }
}
@media (hover: hover) and (pointer: fine) { .vp-btn { width: 44px; height: 44px; } .vp-btn svg { width: 24px; height: 24px; } }
@media (prefers-reduced-motion: reduce) { .video-play, .video-play svg, .vp-ui, .vp-track, .vp-thumb { transition: none; } .video-frame.is-loading::after, .video-frame.is-buffering::after { animation-duration: 2s; } }