/* Ulster Investments — landing page
   Built on the Ulster design system. Colour, type and spacing values are the
   system's tokens; see the design system's readme.md for the full foundations. */

/* ---------- Fonts — IBM Plex, self-hosted (SIL OFL 1.1) ---------- */
@font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/IBMPlexSerif-Regular.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Serif";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/IBMPlexSerif-Italic.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/IBMPlexSans-Regular.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/IBMPlexMono-Medium.woff2") format("woff2")}

/* ---------- Tokens ---------- */
:root{
  --ulster-ink:#1F1A14;
  --ulster-bone:#EFE9DC;
  --ulster-oxblood:#8E3A2E;
  --ulster-oxblood-dark:#6B2A21;
  --ulster-granite:#6B6760;
  --ulster-stone:#9A938A;

  --color-bg:var(--ulster-bone);
  --color-text:var(--ulster-ink);
  --color-text-muted:var(--ulster-granite);
  --color-accent:var(--ulster-oxblood);
  --color-accent-hover:var(--ulster-oxblood-dark);
  --color-hairline:var(--ulster-stone);

  --font-serif:"IBM Plex Serif",Georgia,"Times New Roman",serif;
  --font-sans:"IBM Plex Sans",Verdana,system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono","Courier New",ui-monospace,monospace;

  --ease-in-out:cubic-bezier(0.37,0,0.63,1);
  --dur-fast:180ms;
  --greet-cycle:8040ms;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}

/* ---------- Layout ---------- */
.page{min-height:100vh;display:flex;flex-direction:column;padding:clamp(24px,5vw,40px) clamp(22px,6vw,56px) clamp(28px,5vw,48px)}
.page__main{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:44rem;padding-block:clamp(40px,9vw,64px)}
.page__footer{border-top:1px solid var(--color-hairline);padding-top:clamp(18px,4vw,22px);display:flex;flex-wrap:wrap;gap:clamp(16px,4vw,28px);align-items:flex-end;justify-content:space-between}

/* ---------- Brand marks ---------- */
.wordmark{width:clamp(200px,52vw,290px)}
.monogram{width:44px;height:44px;flex:0 0 auto}

/* ---------- Greeting ---------- */
.greeting{margin:0;font-family:var(--font-serif);font-weight:400;font-size:clamp(2.75rem,11vw,5rem);line-height:1.02;letter-spacing:-0.025em}
.greeting__word{display:inline-block;opacity:0;animation:greet-cycle var(--greet-cycle) var(--ease-in-out) infinite}
@keyframes greet-cycle{0%{opacity:0}14%,86%{opacity:1}100%{opacity:0}}

/* ---------- Copy ---------- */
.intro{margin:clamp(20px,5vw,28px) 0 0;max-width:36rem;font-size:clamp(1rem,3.6vw,1.0625rem);line-height:1.6}
.note{margin:clamp(14px,3vw,18px) 0 0;max-width:36rem;font-family:var(--font-serif);font-style:italic;font-size:clamp(0.9rem,3vw,0.95rem);line-height:1.5;color:var(--color-text-muted)}

/* ---------- Contact ---------- */
.contact{display:flex;flex-direction:column;gap:14px;align-items:flex-start;flex:1 1 15rem}
.contact__prompt{font-family:var(--font-serif);font-style:italic;font-size:clamp(1.1875rem,4.6vw,1.375rem);line-height:1.3}
.contact__email{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-mono);font-weight:500;font-size:0.8125rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-accent);text-decoration:none;border-bottom:1px solid var(--color-accent);transition:color var(--dur-fast) var(--ease-in-out),border-color var(--dur-fast) var(--ease-in-out)}
.contact__email:hover{color:var(--color-accent-hover);border-color:var(--color-accent-hover)}

a{color:var(--color-accent)}
a:hover{color:var(--color-accent-hover)}

:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .greeting__word{animation:none;opacity:1}
  *{transition-duration:0.01ms !important}
}