/* Shared portfolio foundation — every visitor-facing page. */
@font-face{font-family:"Mona Sans";src:url("assets/MonaSans-latin.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
:root{
  --color-canvas:#ffffff;
  --color-rail:#f7f9f8;
  --color-surface:#f0f4f3;
  --color-ink:#202927;
  --color-muted:#626e6a;
  --color-rule:#dce4e1;
  --color-accent:#087f73;
  --color-accent-hover:#05665d;
  --color-accent-soft:#e4f2ef;
  --font-sans:"Mona Sans",sans-serif;
  --text-small:.8125rem;
  --text-body:1rem;
  --text-lead:1.125rem;
  --text-card:1.25rem;
  --text-section:1.5rem;
  --text-display:clamp(2.75rem,5vw,4.5rem);
  --space-1:.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--space-8:4rem;--space-9:6rem;
  --radius-control:0;--radius-media:0;
  --rail-width:5.5rem;--page-width:80rem;--reading-width:68ch;
  --page-gutter:clamp(1.5rem,4vw,4rem);
  --header-height:4.5rem;--anchor-offset:2rem;
  --duration:180ms;--duration-press:120ms;--ease:cubic-bezier(.23,1,.32,1);
}
/* Swup keeps the outgoing page visible until the incoming page has blended in. */
:root{--duration-page:280ms;--duration-shared-image:400ms;--ease-page:cubic-bezier(.77,0,.175,1)}
.page-frame>.site-main{min-height:100svh;background:var(--color-canvas)}
.page-frame.is-previous-container{position:fixed;left:0;top:var(--page-outgoing-top);width:100%;z-index:21;pointer-events:none}
html.is-changing{scroll-behavior:auto}
html.is-changing .page-frame:not(.is-previous-container){position:relative;z-index:22}
html.is-changing .site-rail{z-index:30}
.shared-project-image{position:fixed;inset:0;z-index:25;pointer-events:none;overflow:hidden;contain:strict}
.shared-project-image>img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;will-change:transform}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--anchor-offset);scrollbar-color:#a7b8b2 var(--color-rail)}
body{margin:0;background:var(--color-canvas);color:var(--color-ink);font-family:var(--font-sans);font-size:var(--text-body);line-height:1.6;font-optical-sizing:auto;letter-spacing:0;-webkit-font-smoothing:antialiased}
::selection{background:#c6e8df;color:var(--color-ink)}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:disabled{cursor:not-allowed;opacity:.5}
button,input,textarea{caret-color:var(--color-accent)}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:5px}

h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:550;line-height:1.2;letter-spacing:-.025em;text-wrap:balance}
p{text-wrap:pretty}
img{display:block;max-width:100%;height:auto}
.sprite{position:absolute;overflow:hidden;pointer-events:none}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.i{width:1.25rem;height:1.25rem;flex:none;vertical-align:middle}
[hidden]{display:none!important}
.skip{position:fixed;top:-6.25rem;left:1rem;z-index:100;padding:0.75rem 1.25rem;background:var(--color-accent);color:white;border-radius:var(--radius-control)}
.skip:focus{top:1rem}
.text-link{display:inline-flex;align-items:center;gap:0.5rem;min-height:2.75rem;padding:0;border:0;background:none;color:var(--color-accent);font-size:.875rem;font-weight:550;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:transparent;transition:color var(--duration),text-decoration-color var(--duration)}
.text-link:focus-visible{color:var(--color-accent-hover);text-decoration-color:currentColor}
.button{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;min-height:2.75rem;padding:0.5rem 1rem;border:1px solid transparent;border-radius:var(--radius-control);background:var(--color-accent);color:white;font-weight:550;font-size:.875rem;transition:background var(--duration),transform var(--duration-press) var(--ease)}

.button--quiet{background:transparent;color:var(--color-ink);border-color:var(--color-rule)}

.wordmark{display:inline-flex;align-items:center;justify-content:center;min-width:3rem;min-height:3rem}
.wordmark-logo{width:3rem;height:3rem;flex:none}
@media(max-width:63.9375em){.wordmark-logo{width:2.5rem;height:2.5rem}}
.wordmark-dot{color:var(--color-accent)}
.site-rail{position:fixed;inset:0 auto 0 0;z-index:20;display:flex;flex-direction:column;width:var(--rail-width);padding:0 .5rem 1rem;background:var(--color-rail);border-right:1px solid var(--color-rule);overflow-y:auto}
.identity{display:grid;place-items:center;min-height:5rem;border-bottom:1px solid var(--color-rule)}
.site-navigation{display:grid;gap:.5rem;margin:1.5rem 0}
.site-navigation a,.site-navigation button,.rail-contact{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;min-height:4rem;padding:.5rem .25rem;border:0;border-radius:var(--radius-control);background:none;color:inherit;font-size:.75rem;font-weight:500;line-height:1.3;transition:color var(--duration),background var(--duration)}
.site-navigation a{transition:color var(--duration),background var(--duration),transform var(--duration) var(--ease)}
.site-navigation .i,.rail-contact .i{width:1.5rem;height:1.5rem;transition:transform var(--duration-press) var(--ease)}

.site-navigation a[aria-current]{background:var(--color-accent-soft);color:var(--color-accent-hover)}
.rail-social{display:grid;gap:.5rem;margin-top:auto}
.rail-contact{width:100%;color:var(--color-muted)}
.site-main{margin-left:var(--rail-width);min-width:0}
.page-container,.wrap{max-width:var(--page-width);margin-inline:auto;padding-inline:var(--page-gutter)}
.section{padding-block:0 var(--space-9)}
.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;padding-block:1.5rem;margin-bottom:0.5rem;border-top:1px solid var(--color-rule)}
.section-heading h2{font-size:var(--text-section)}
.section-heading p{color:var(--color-muted);font-size:var(--text-small)}
.reading-copy{max-width:var(--reading-width)}
.reading-copy p+p{margin-top:1.25rem}
.card-meta{color:var(--color-muted);font-size:var(--text-small);line-height:1.5;letter-spacing:.01em}
.status-badge{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:550;letter-spacing:.01em;color:var(--color-accent-hover);background:var(--color-accent-soft);padding:.5rem .625rem;border-radius:var(--radius-control)}
.status-badge .i{width:0.875rem;height:0.875rem}
/* Keep the close action visible while a long Play story scrolls. */
.info-dialog{border:1px solid var(--color-rule);border-radius:var(--radius-media);padding:0;width:min(45rem,calc(100% - 2rem));max-height:85dvh;color:var(--color-ink);background:var(--color-canvas);overflow:hidden}
.info-dialog[open]{display:flex;flex-direction:column}
.info-dialog::backdrop{background:rgba(20,38,33,.45)}
.dialog-actions{display:flex;justify-content:flex-end;flex:none;padding:.75rem 1rem;border-bottom:1px solid var(--color-rule)}
.dialog-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain}
.dialog-heading{padding:1.5rem 2.5rem 0}
.info-dialog .close{padding:.5rem .75rem;min-width:2.75rem}
.info-dialog h2{font-size:clamp(1.5rem,4vw,2rem)}
.dialog-meta{font-size:var(--text-small);color:var(--color-muted);letter-spacing:.01em;margin-top:.75rem}
#dialog-body{padding:1.5rem 2.5rem 2.5rem}
#dialog-body p+p,#dialog-body img{margin-top:1.25rem}
#dialog-body img{border-radius:var(--radius-media)}
.info-dialog--play{width:min(68rem,calc(100% - 2rem))}
.info-dialog--play #dialog-body img,.info-dialog--play #dialog-body video{display:block;width:100%;height:auto;object-fit:contain}
.info-dialog--play #dialog-body video{max-height:65dvh;background:#000}
.play-detail-caption{color:var(--color-muted);font-size:var(--text-small);margin:1.5rem 0 .75rem}
@media(max-width:63.9375em){
  :root{--anchor-offset:calc(var(--header-height) + 1rem)}
  .site-rail{position:sticky;inset:0 0 auto;width:100%;min-height:5rem;padding:.875rem var(--page-gutter);flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--color-rule);overflow:visible}
  .identity{min-height:0;border-bottom:0}
  .rail-social{display:flex;flex-basis:100%;justify-content:flex-end;gap:.5rem;margin:0;padding-top:.5rem}
  .rail-contact{width:auto;min-height:2.75rem;flex-direction:row;padding:.5rem .75rem}
  .site-navigation{display:flex;gap:.5rem;margin:0}.site-navigation a,.site-navigation button{flex:1;flex-direction:row;min-height:3rem;gap:.5rem;padding:.5rem .75rem}.site-navigation .i{width:1.25rem;height:1.25rem}
  .site-main{margin-left:0}.section{padding-bottom:4rem}
}
@media(max-width:37.4375em){
  :root{--text-section:1.25rem;--page-gutter:1.5rem}
  .section-heading{display:block;padding-block:1.25rem}.section-heading p{margin-top:0.5rem}
  .site-navigation{flex-basis:100%;padding-top:0.75rem}.site-navigation a,.site-navigation button{flex-direction:column;padding:.5rem .25rem}
  .dialog-heading{padding:1.25rem 1.5rem 0}
  #dialog-body{padding:1.25rem 1.5rem 1.75rem}
}
/* Phone and tablet navigation is immediately available, with icons above labels. */
@media(max-width:63.9375em){
  .site-rail{flex-wrap:nowrap;gap:.5rem;min-height:4.5rem;padding:.5rem .75rem;transition:transform var(--duration) var(--ease)}
  .site-rail:focus-within{transform:none;pointer-events:auto}
  .identity{flex:none}
  .wordmark{min-width:2.75rem;min-height:2.75rem}
  .site-navigation{display:grid;grid-template-columns:repeat(4,minmax(2.75rem,1fr));flex:1;min-width:0;max-width:16rem;gap:.25rem;margin:0 0 0 auto;padding:0}
  .site-navigation a,.site-navigation button{min-width:2.75rem;min-height:3rem;flex-direction:column;gap:.25rem;padding:.375rem .125rem}
  .rail-social{display:none}
}
@media(max-width:47.9375em){.site-rail.is-scroll-hidden{transform:translateY(-100%);pointer-events:none}}
/* Hover is an input capability; a tap must not leave a control highlighted. */
@media(hover:hover) and (pointer:fine){
  .text-link:hover{color:var(--color-accent-hover);text-decoration-color:currentColor}
  .button:hover{background:var(--color-accent-hover)}
  .button--quiet:hover{background:var(--color-accent-soft)}
  .site-navigation a:hover{color:var(--color-accent);background:var(--color-surface)}
  .site-navigation a[aria-current="location"]:hover{transform:rotate(4deg);background:var(--color-accent-soft)}
  .rail-contact:not(:disabled):hover{color:var(--color-accent);background:var(--color-surface)}
  .site-navigation a:hover .i,.rail-contact:not(:disabled):hover .i{transform:translateY(-2px) scale(1.06)}
}
.site-navigation a:active .i,.rail-contact:not(:disabled):active .i{transform:scale(.9)}
.is-keyboard .site-navigation a,.is-keyboard .site-navigation a .i,.is-keyboard .rail-contact .i{transform:none!important}
@media(prefers-reduced-motion:reduce){.site-navigation a,.site-navigation a .i,.rail-contact .i{transform:none!important}}
button.text-link{transition:color var(--duration),text-decoration-color var(--duration),transform var(--duration-press) var(--ease)}
.button:active:not(:focus-visible),button.text-link:active:not(:focus-visible){transform:scale(.97)}
/* Keyboard actions respond immediately, including native same-page navigation. */
html.is-keyboard{scroll-behavior:auto}
.is-keyboard *, .is-keyboard *::before, .is-keyboard *::after{transition:none!important;animation:none!important}
.is-keyboard .button:active,.is-keyboard button.text-link:active{transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.button:active,button.text-link:active{transform:none}}

/* A functional material for content passing underneath the sticky mobile header. */
@supports (backdrop-filter:blur(1px)){
  @media(max-width:63.9375em){.site-rail{background:rgba(247,249,248,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}}
}
.site-navigation a:active,.rail-contact:not(:disabled):active{background:var(--color-accent-soft);color:var(--color-accent-hover)}
.text-link:active{color:var(--color-accent-hover);text-decoration-color:currentColor}
@media(prefers-reduced-transparency:reduce){.site-rail{background:var(--color-rail);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-contrast:more){
  :root{--color-muted:#37433f;--color-rule:#626e6a}
  .site-rail{background:var(--color-rail);backdrop-filter:none;-webkit-backdrop-filter:none}
  .text-link{text-decoration-color:currentColor}
}

/* Shared contact footer; homepage composition stays in home.css. */
.site-footer{border-top:1px solid var(--color-rule);padding-top:2.5rem}
.contact-row{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.contact-row h2{font-size:clamp(1.75rem,3.2vw,2.75rem);font-weight:500}
.contact-row p{font-size:.9375rem;color:var(--color-muted)}
.footer-contacts{display:flex;flex-direction:column;align-items:start;margin-top:1rem}
.footer-bottom{display:flex;justify-content:space-between;gap:1.5rem;align-items:center;margin-top:4rem;padding-block:1.5rem;border-top:1px solid var(--color-rule);font-size:.75rem;color:var(--color-muted)}
.footer-bottom .text-link{font-size:.75rem}
@media(max-width:47.9375em){
  .contact-row{grid-template-columns:1fr;gap:1.5rem}.footer-bottom{align-items:start;flex-direction:column;gap:0.5rem;margin-top:2.5rem}
}