/* Baywick Services — shared shell.
   Typeface, palette, page frame, header and footer. Page-specific rules stay
   in each page's own <style> block. */

@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/jost-300.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/jost-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/jost-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --ink: oklch(0.94 0.006 250);
  --muted: oklch(0.665 0.012 250);
  /* 0.62 gives 5.03:1 on the lightest point of the background; 0.50 gave 3.05:1 and failed */
  --faint: oklch(0.62 0.012 252);
  --brass: oklch(0.805 0.072 82);
  --line: oklch(0.30 0.008 252);
  --line-soft: oklch(0.24 0.007 252);
  /* interactive borders need >=3:1 to register as controls */
  --line-strong: oklch(0.52 0.011 252);
  --field: oklch(0.175 0.008 252);
  --font: "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; color:var(--ink); font-family:var(--font); line-height:1.6; -webkit-font-smoothing:antialiased;
  min-height:100dvh; display:flex; flex-direction:column; position:relative; overflow-x:hidden;
  background:radial-gradient(140% 120% at 50% 8%, oklch(0.195 0.009 250) 0%, oklch(0.145 0.007 253) 46%, oklch(0.108 0.006 255) 100%);
  background-attachment:fixed}
::selection{background:var(--brass); color:oklch(0.15 0.01 255)}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass); outline-offset:3px; border-radius:2px}

/* the page border, with registration ticks at the four edge midpoints */
.frame{position:fixed; inset:clamp(12px,2.2vw,26px); z-index:1; pointer-events:none; border:1px solid var(--line-soft); border-radius:2px}
.frame::before,.frame::after{content:""; position:absolute}
.frame::before{left:50%; top:-1px; bottom:-1px; width:1px;
  background:linear-gradient(180deg,var(--line-soft) 0 20px,transparent 20px calc(100% - 20px),var(--line-soft) calc(100% - 20px) 100%)}
.frame::after{top:50%; left:-1px; right:-1px; height:1px;
  background:linear-gradient(90deg,var(--line-soft) 0 20px,transparent 20px calc(100% - 20px),var(--line-soft) calc(100% - 20px) 100%)}

header{position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:clamp(1.25rem,3.5vw,2.4rem) clamp(1.35rem,5.5vw,3.6rem)}
.brand{display:flex; align-items:center; gap:0.7rem; font-weight:500; letter-spacing:0.22em; text-transform:uppercase;
  font-size:clamp(0.78rem,0.72rem+0.3vw,0.9rem); text-decoration:none}
.brand svg{width:22px; height:22px; flex:none}
.navlink{display:inline-flex; align-items:center; gap:0.55rem; text-decoration:none; color:var(--muted);
  font-size:clamp(0.72rem,0.68rem+0.2vw,0.82rem); letter-spacing:0.14em; text-transform:uppercase;
  transition:color .3s var(--ease); position:relative; padding-bottom:3px}
.navlink::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--brass);
  transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease)}
.navlink:hover{color:var(--ink)}
.navlink:hover::after{transform:scaleX(1); transform-origin:left}
.navlink svg{width:13px; height:13px}
/* below ~400px the two header items collide; drop the qualifier, keep the link */
@media (max-width:420px){ .navlink .qual{display:none} .brand{letter-spacing:0.18em} }

footer{position:relative; z-index:3; display:flex; flex-wrap:wrap; gap:0.4rem 1.5rem;
  justify-content:space-between; align-items:center;
  padding:clamp(1.1rem,3vw,2rem) clamp(1.35rem,5.5vw,3.6rem);
  color:var(--faint); font-size:clamp(0.7rem,0.67rem + 0.15vw,0.76rem); letter-spacing:0.07em}
footer a{color:var(--faint); text-decoration:none; transition:color .3s var(--ease)}
footer a:hover{color:var(--brass)}
@media (max-width:640px){ footer{justify-content:center; text-align:center} }

/* entrance — enhances an already-visible default, so no-JS renders complete */
.js .rise{opacity:0; animation:rise 1.2s forwards var(--ease)}
@keyframes rise{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}

@media (prefers-reduced-motion: reduce){
  .js .rise{animation:none; opacity:1; transform:none}
}