@charset "UTF-8";
/* ============================================ Home — Personal Landing Page jonathansimmons.ca ============================================ */
/* --- Fonts --- */
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/EBGaramond-Regular-Latin.woff2") format("woff2"); }

@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/EBGaramond-Italic-Latin.woff2") format("woff2"); }

@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/InstrumentSans-Latin.woff2") format("woff2"); }

@font-face { font-family: "Instrument Sans"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/InstrumentSans-Italic-Latin.woff2") format("woff2"); }

/* --- Custom Properties --- */
:root { --bg:             #f0ebe0; --text:           #2a1f14; --muted:          #7d6e5e; --faint:          #b0a090; --accent:         #5a3e2b; --accent-soft:    #c4a882; --rule:           #d0c4b0; /* Portal accent colors */ --portal-work:    #4A6741; --portal-liminal: #8B6B4A; --portal-crales:  #6B1E1E; --font-serif: "EB Garamond", Georgia, serif; --font-sans:  "Instrument Sans", system-ui, -apple-system, sans-serif; }

/* --- Reset & Base --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 18px; }

body { background: var(--bg); color: var(--text); font-family: var(--font-serif); line-height: 1.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; }

/* --- Container --- */
.home { width: 100%; }

.home-inner { max-width: 680px; margin: 0 auto; padding: 0 1.75rem 10vh; }

/* --- Hero Image --- */
.home-hero { width: 100%; max-height: 55vh; overflow: hidden; position: relative; margin-bottom: 3rem; }

.home-hero::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 60%; background: linear-gradient(to bottom, transparent 0%, var(--bg) 100%); pointer-events: none; }

.home-hero img { display: block; width: 100%; height: 55vh; object-fit: cover; object-position: center 30%; filter: saturate(0.55) contrast(1.02) brightness(1.03); }

/* --- Header --- */
.home-header { margin-bottom: 2rem; }

.home-name { font-family: var(--font-serif); font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 0.35rem; }

.home-credential { font-family: var(--font-serif); font-style: italic; font-size: 1rem; color: var(--muted); line-height: 1.4; }

/* --- Bio --- */
.home-bio { margin-bottom: 3.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--rule); }

.home-bio p { font-size: 1.0625rem; color: var(--text); max-width: 44ch; line-height: 1.8; }

/* ============================================ Portal Cards — Progressive Escalation ============================================ */
.home-portals { display: flex; flex-direction: column; gap: 1.5rem; }

/* --- Base portal card --- */
.portal { display: block; position: relative; padding: 2rem 2rem 2rem 2.5rem; text-decoration: none; color: var(--text); border: 1px solid var(--rule); border-radius: 3px; background: transparent; transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease; overflow: hidden; }

.portal:hover { background: rgba(0, 0, 0, 0.02); border-color: var(--accent-soft); transform: translateX(4px); }

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

/* --- Left accent bar --- */
.portal-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; transition: width 0.3s ease; }

.portal:hover .portal-accent { width: 5px; }

/* --- Portal title --- */
.portal-title { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 400; margin-bottom: 0.5rem; line-height: 1.3; transition: color 0.2s ease; }

/* --- Portal description --- */
.portal-desc { font-family: var(--font-sans); font-size: 0.875rem; color: var(--muted); line-height: 1.6; max-width: 42ch; }

/* --- Enter arrow --- */
.portal-enter { display: inline-block; font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0; transform: translateX(-8px); transition: opacity 0.25s ease, transform 0.25s ease; margin-top: 0.75rem; }

.portal:hover .portal-enter { opacity: 1; transform: translateX(0); }

/* ============================================ Per-Portal Visual Personalities ============================================ */
/* --- The Work: Clean, professional --- */
.portal--work .portal-accent { background: var(--portal-work); }

.portal--work:hover .portal-title { color: var(--portal-work); }

.portal--work .portal-enter { color: var(--portal-work); }

/* --- Liminal Notes: Warmer, organic --- */
.portal--liminal .portal-accent { background: var(--portal-liminal); }

.portal--liminal .portal-title { font-style: italic; }

.portal--liminal:hover .portal-title { color: var(--portal-liminal); }

.portal--liminal .portal-enter { color: var(--portal-liminal); }

.portal--liminal:hover { background: rgba(139, 107, 74, 0.04); }

.portal-flourish { font-style: normal; color: var(--portal-liminal); margin-right: 0.15em; opacity: 0.7; }

/* --- Crale's Guide: Distinctly odd --- */
.portal--crales .portal-accent { background: var(--portal-crales); }

.portal--crales .portal-title { font-size: 1.45rem; letter-spacing: 0.02em; }

.portal--crales:hover .portal-title { color: var(--portal-crales); }

.portal--crales .portal-enter { color: var(--portal-crales); }

.portal--crales:hover { background: rgba(107, 30, 30, 0.04); border-color: rgba(107, 30, 30, 0.25); }

.portal-ornament { color: var(--portal-crales); margin-right: 0.25em; font-size: 0.85em; opacity: 0.6; transition: opacity 0.3s ease; }

.portal--crales:hover .portal-ornament { opacity: 1; }

.portal--crales .portal-desc { font-family: var(--font-serif); font-style: italic; font-size: 0.9375rem; }

/* ============================================ Scroll-driven entrance (progressive enhancement) ============================================ */
@supports (animation-timeline: view()) { .portal { animation: portal-appear linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  @keyframes portal-appear { from { opacity: 0;
      transform: translateY(1rem); }
    to { opacity: 1;
      transform: translateY(0); } } }

/* --- Responsive --- */
@media (max-width: 480px) { .home-hero { max-height: 40vh; } .home-hero img { height: 40vh; } .home-inner { padding: 0 1.25rem 8vh; } .home-name { font-size: 1.5rem; } .home-portals { gap: 1.25rem; } .portal { padding: 1.5rem 1.5rem 1.5rem 2rem; } .portal--crales .portal-title { font-size: 1.35rem; } }

/* Show enter arrow on touch devices */
@media (hover: none) { .portal-enter { opacity: 0.6; transform: translateX(0); } }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; transition-delay: 0ms !important; animation-delay: 0ms !important; } }

/* --- Print --- */
@media print { body { background: white; color: black; } .home-hero { display: none; } .portal { border: 1px solid #ccc; break-inside: avoid; } .portal-accent { display: none; } .portal-enter { display: none; } .portal-title a::after { content: " (" attr(href) ")"; font-style: normal; font-size: 0.75rem; } }

/*# sourceMappingURL=home.css.map */