/* Shared styles for ndibe.com.
   Page-specific colour tokens and layout stay in each page's own <style>
   block; this file holds what every page shares. */

/* Page width cap. Every page's side margin uses --gutter (or --gutter-wide on
   the homepage). Below about 1630px wide they are the original margins; above
   that the margin grows so content never gets wider than --page-max and stays
   centred, while backgrounds still run edge to edge. The 100% resolves against
   the width of whatever block uses it, so nested blocks keep their margins. */
:root{
  --page-max:1500px;
  --gutter:max(clamp(20px,5vw,64px),calc((100% - var(--page-max)) / 2));
  --gutter-wide:max(clamp(20px,5vw,72px),calc((100% - var(--page-max)) / 2));
}

/* The hidden attribute always wins, even over an element's inline display style. */
[hidden]{display:none!important}

/* Skip link: the first thing a keyboard user reaches on every page. Hidden
   off-screen until it has focus, then shown top-left above the header. */
.skip-link{position:absolute;left:12px;top:-100px;z-index:1000;padding:var(--space-12) var(--space-20);background:#3A4614;color:#FFFDF3;font-family:'Work Sans',system-ui,sans-serif;font-size:var(--fs-ui-lg);font-weight:var(--fw-medium);border-radius:var(--corner-md);text-decoration:none}
.skip-link:focus{top:12px;outline:3px solid #FCE383;outline-offset:2px}
/* The skip link moves focus to <main>; it needs no visible ring of its own. */
main:focus{outline:none}

/* ---------- Site header ---------- */
/* The header sets its own font so it looks the same on every page (the CV
   page has no site-wide font of its own). */
.site-header{font-family:'Work Sans',system-ui,sans-serif;font-weight:var(--fw-book);position:relative;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:var(--space-24);padding:var(--space-16) var(--gutter);background:var(--bg);border-bottom:1.5px solid var(--rule)}
.site-header.is-sticky{position:sticky;top:0}
.progress-track{position:absolute;left:0;right:0;bottom:-1.5px;height:2px;background:transparent}
.progress-bar{height:100%;width:0;background:var(--accent, var(--marigold));transition:width var(--dur-quick) linear}

/* Logo at its designed size. Skia is a Mac system font; elsewhere it falls
   back to Work Sans. */
.site-logo{font-family:Skia,'Work Sans',sans-serif;font-size:29px;font-weight:var(--fw-book);line-height:var(--lh-none);color:#3A4614;transition:color var(--dur-short) var(--ease)}
/* Same green on every page: the homepage's dark green, lighter green in dark mode. */
html[data-pb="dark"] .site-logo{color:#A3B26A}
.site-logo:hover{color:var(--accent-text)!important}

.site-nav{display:flex;align-items:center;gap:var(--space-fluid-s)}
.site-nav-link{display:inline-block;padding-bottom:var(--space-8);font-size:var(--fs-ui);font-weight:var(--fw-medium);letter-spacing:var(--track-open);color:var(--ink-2);transition:color var(--dur-short) var(--ease)}
.site-nav-link:hover{color:var(--accent-text)!important}
.site-nav-link.is-active{position:relative;color:var(--accent-text);transition:none}
.site-nav-underline{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent-text)}

.mode-toggle{font:inherit;font-size:var(--fs-ui-lg);font-weight:var(--fw-medium);letter-spacing:var(--track-open);color:var(--leaf);background:transparent;border:1.5px solid var(--leaf);border-radius:var(--corner-sm);padding:var(--space-8) var(--space-12);cursor:pointer}
.mode-toggle:hover{background:var(--leaf-mid, #52611F)!important;border-color:var(--leaf-mid, #52611F)!important;color:var(--bg)!important}
.mode-label-light{display:none}
html[data-pb="dark"] .mode-label-light{display:inline}
html[data-pb="dark"] .mode-label-dark{display:none}
/* Without JavaScript the toggle can't work, so don't offer it. */
html:not(.js) .mode-toggle{display:none}

.menu-button{display:none;align-items:center;justify-content:center;width:40px;height:40px;flex:none;background:var(--ink);border:1.5px solid var(--ink);border-radius:var(--corner-sm);cursor:pointer;color:var(--bg)}
.menu-button:hover{background:var(--field-butter)!important;border-color:var(--field-butter)!important}
.menu-icon-close{display:none;font-size:22px;line-height:var(--lh-none)}
.menu-icon-open{display:flex;flex-direction:column;gap:var(--space-4);width:20px;height:16px}
.menu-icon-open span{width:20px;height:2px;background:var(--bg)}
.menu-button[aria-expanded="true"]{background:transparent;border-color:var(--rule-strong);color:var(--ink)}
.menu-button[aria-expanded="true"] .menu-icon-close{display:inline}
.menu-button[aria-expanded="true"] .menu-icon-open{display:none}

.site-menu{position:absolute;top:100%;left:0;right:0;z-index:60;display:flex;flex-direction:column;padding:var(--space-8) var(--gutter) var(--space-24);background:var(--bg);border-bottom:1.5px solid var(--rule);box-shadow:var(--shadow-float)}
.site-menu[hidden]{display:none}
.site-menu-link{padding:var(--space-12) 0;font-size:var(--fs-ui-lg);font-weight:var(--fw-medium);letter-spacing:var(--track-open);color:var(--ink-2);border-bottom:1px solid var(--rule)}
.site-menu-link.is-active{color:var(--accent-text)}
.mode-toggle-menu{margin-top:var(--space-16);align-self:flex-start;font-size:var(--fs-ui-sm);padding:var(--space-8) var(--space-16)}
.mode-toggle-menu:hover{background:transparent!important;border-color:var(--leaf)!important;color:var(--leaf)!important}

@media (max-width:768px){
  html.js .site-nav{display:none}
  html.js .menu-button{display:flex}
  /* No JavaScript: keep the links visible and let them wrap. */
  html:not(.js) .site-nav{flex-wrap:wrap;justify-content:flex-end}
}
@media (min-width:769px){
  .site-menu{display:none!important}
}

/* ---------- Case-study switcher ---------- */
.cs-switcher{position:relative;display:flex;justify-content:space-between;align-items:center;padding:var(--space-16) var(--gutter);border-top:1.5px solid var(--rule);border-bottom:1.5px solid var(--rule)}
.cs-switcher-link{display:flex;align-items:flex-end;gap:var(--space-8);color:var(--ink-2);text-decoration:none}
.cs-switcher-link:hover{color:var(--leaf)!important}
.cs-switcher-next{text-align:right}
.cs-switcher-arrow{color:inherit;font-size:var(--fs-ui-lg);line-height:var(--lh-none);transition:transform var(--dur-quick) var(--ease)}
.cs-switcher-prev .cs-switcher-arrow:hover{transform:translateX(-4px)!important}
.cs-switcher-next .cs-switcher-arrow:hover{transform:translateX(4px)!important}
.cs-switcher-text{display:flex;flex-direction:column;gap:var(--space-2)}
.cs-switcher-next .cs-switcher-text{align-items:flex-end}
.cs-switcher-label{color:var(--accent-text);font-size:12px;font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;white-space:nowrap}
.cs-switcher-client{color:inherit;font-family:'Fraunces',serif;font-size:var(--fs-ui-lg);font-weight:var(--fw-regular)}
/* Current case study, centred in the sticky bar. Fades in once the page title
   has scrolled under the bar (site.js); only where there's room between the
   previous and next links. */
.cs-switcher-current{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);min-width:0;text-align:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-short) var(--ease),visibility var(--dur-short)}
.cs-switcher-current.is-visible{opacity:1;visibility:visible}
.cs-switcher-current .cs-switcher-client{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--ink)}
@media (max-width:900px){.cs-switcher-current{display:none}}
@media (prefers-reduced-motion:reduce){.cs-switcher-current{transition:none}}

/* ---------- Reveal-on-scroll (only when JavaScript is running) ---------- */
html.js [data-movement]{opacity:0;transform:translateY(18px);transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease)}
html.js [data-movement].is-revealed{opacity:1;transform:none}
html.js .insight-word{display:inline-block;opacity:0;transform:translateY(6px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
html.js .insight-revealed .insight-word{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js [data-movement],html.js .insight-word{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------- Lightboxes ---------- */
[data-lightbox][hidden]{display:none!important}
/* Compress button: sits in an expanded view where the expand button was, and closes it */
.lb-compress{position:absolute;top:12px;right:12px;z-index:6;width:var(--control-md);height:var(--control-md);padding:0;border-radius:var(--round);border:1.5px solid rgba(92,27,31,.18);background:rgba(255,253,242,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#5C1B1F;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-compress:hover{background:rgba(255,253,242,.95)}
.lb-compress:focus-visible{outline:2px solid #B25A10;outline-offset:2px}

/* ---------- Print baseline (carried over from the old runtime) ---------- */
@media print{
  @page{margin:.5cm}
  html,body{background:#FFFFFF!important}
  figure,table{break-inside:avoid}
  *,*::before,*::after{
    print-color-adjust:exact;-webkit-print-color-adjust:exact;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    animation-delay:-99s!important;animation-duration:.001s!important;
    animation-iteration-count:1!important;animation-fill-mode:both!important;
    animation-play-state:running!important;transition-duration:0s!important
  }
}

/* The case-study fade (--cs-fade) is a token in tokens.css; Role and impact lives in components.css. */

/* ---------- Case-study closing ---------- */
.cs-skills-grid{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,2fr);gap:var(--space-fluid-xl)}
.cs-team{padding-left:var(--space-fluid-l);border-left:2px solid var(--accent)}
/* Phones and narrow tablets: stack skills above team so neither is squeezed. */
@media (max-width:768px){
  .cs-skills-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-24)}
  .cs-team{padding-left:0;border-left:0;padding-top:var(--space-32);border-top:2px solid var(--accent)}
}
.cs-close-h0:hover{background:var(--quiet)!important}

/* Former Claude Design image slots: image cropped to fill its frame. */
.image-fill{display:block;position:relative;width:100%;height:100%;aspect-ratio:3/2}
.image-fill img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}


/* Slim full-width recommendation below the homepage introduction (the component is in components.css) */
.home-rec{padding:0 var(--gutter-wide) var(--space-fluid-m)}

/* Case-study intro: a warm wash of sunshine on the right (replaced the yellow corner shape, 30 Oct 2026).
   Fades out before the hero image. Dark mode uses a warmer golden tone so it stays visible. */
.cs-wash{position:absolute;inset:0 0 400px 0;background:linear-gradient(100deg,transparent 38%,color-mix(in srgb,var(--field-butter) 40%,transparent) 100%);-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);opacity:.9}
html[data-pb="dark"] .cs-wash{opacity:1;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,#C9923A 34%,transparent) 100%)}
/* Apricot warm wash (About, Career): same shape as the case-study wash, in apricot. */
.cs-wash.is-apricot{inset:0;background:linear-gradient(100deg,transparent 36%,color-mix(in srgb,var(--wash-apricot) 55%,transparent) 100%);-webkit-mask-image:linear-gradient(to bottom,#000 25%,transparent 100%);mask-image:linear-gradient(to bottom,#000 25%,transparent 100%)}
html[data-pb="dark"] .cs-wash.is-apricot{background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--wash-apricot) 32%,transparent) 100%)}
/* Insight seedling: supporting decoration, faded back so the statement leads; fainter on phones where it sits behind the text. */
.cs-insight-seedling{opacity:.45}
@media (max-width:768px){.cs-insight-seedling{opacity:.22}}