/* ============================================================
   Eric Beacom — "coming soon" landing page
   Responsive: values scale fluidly with clamp() between the
   mobile (~414px) and desktop (~2560px) reference layouts.
   ============================================================ */

:root {
  --serif: 'Roboto Slab', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --orange: #CF540C;   /* heading */
  --link:   #2E41D9;   /* hyperlinks */
  --ink:    #141414;   /* body text */
  --muted:  #838181;   /* date + copyright */

  /* Fluid values: min @414px  ->  max @2560px */
  --top:      clamp(40px, calc(34.2px + 1.398vw), 70px);   /* top offset */
  --h1:       clamp(30px, calc(36.1px + 0.466vw), 40px);   /* heading size */
  --body:     clamp(14px, calc(18.5px + 0.373vw), 20px);   /* body size */
  --meta:     clamp(12px, calc(14.8px + 0.28vw), 16px);    /* date/copyright size */
  --colw:     clamp(251px, calc(88px + 39.4vw), 1097px);   /* text column width */
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: #ffffff;
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The centered text block */
.wrap {
  width: var(--colw);
  max-width: calc(100% - 32px);   /* guarantees a gutter on very small screens */
  margin: var(--top) auto 0;       /* horizontally centered; top offset */
  padding-bottom: 64px;
  text-align: left;
}

/* Date line (auto-updating) */
.meta {
  font-family: var(--sans);
  color: var(--muted);
  font-size: var(--meta);
  line-height: 1.3;
  margin: 0 0 2.2em;
}

/* Heading */
h1 {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--orange);
  font-size: var(--h1);
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0 0 1em;
}

/* Body paragraphs */
p.copy {
  font-size: var(--body);
  line-height: 1.55;
  margin: 0 0 1.6em;
}

/* Body paragraph variant — 85% size, italic, muted (similar to p.copy) */
p.copy-note {
  font-size: calc(var(--body) * 0.85);
  line-height: 1.55;
  margin: 0 0 1.6em;
  font-style: italic;
  color: #666;
}

/* Inline hyperlinks (underlined) */
a.lnk {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a.lnk:hover { text-decoration: underline; opacity: 0.85; }

/* Standalone LinkedIn link (not underlined, matching the reference) */
p.linkedin { font-size: var(--body); line-height: 1.55; margin: 0 0 1.9em; }
a.lnk-plain { color: var(--link); text-decoration: none; }
a.lnk-plain:hover { text-decoration: underline; }

/* Copyright line */
p.copyright { margin: 0; }


/* Google Material Symbols icon */
.material-symbols-outlined {
  color: #999; /* Replace with your desired hex code */
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  position: relative;
  top: 5px;   /* nudges the icon DOWN toward the baseline — increase to lower, decrease to raise */
}