/* ========================================================================== Stacy Busch — Modern Minimal theme (v2) Fonts are loaded via in each page's , not @import, so the browser can start fetching them in parallel with this stylesheet. ========================================================================== */ :root{ --ink:#1c1c1a; --ink-soft:#4a4a45; --paper:#faf8f4; --paper-alt:#f2efe7; --line:#e2ddd2; --accent:#75654c; /* darkened from #8a7960 to pass WCAG AA on paper */ --accent-soft:#a08f74; /* decorative only (borders, dots) */ --muted:#6b6b62; /* darkened from #8a8a80 for legible footer text */ --measure:900px; --gutter:4rem; } *,*::before,*::after{box-sizing:border-box;} *{margin:0;padding:0;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{ font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif; color:var(--ink); background:var(--paper); line-height:1.65; font-weight:400; /* was 300 — too thin for body copy at small sizes */ text-rendering:optimizeLegibility; } img{max-width:100%;height:auto;display:block;} a{color:var(--ink);} h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;line-height:1.15;} /* Visible keyboard focus — the original had none, so keyboard users were lost */ :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; } /* Skip link for screen reader / keyboard users */ .skip-link{ position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper); padding:0.75rem 1.25rem; z-index:100; text-decoration:none; font-size:0.85rem; letter-spacing:0.1em; text-transform:uppercase; } .skip-link:focus{left:0;} .visually-hidden{ position:absolute; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;border:0; } /* ========================================================================== Header / Nav ========================================================================== */ .site-header{ display:flex; justify-content:space-between; align-items:center; padding:2rem var(--gutter); border-bottom:1px solid var(--line); flex-wrap:wrap; gap:1rem; } .logo{ font-family:'Cormorant Garamond',Georgia,serif; font-size:1.4rem; letter-spacing:0.08em; text-transform:uppercase; text-decoration:none; color:var(--ink); } .site-nav ul{list-style:none;display:flex;gap:2.5rem;flex-wrap:wrap;} .site-nav a{ text-decoration:none; font-size:0.85rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink); padding-bottom:0.2rem; border-bottom:1px solid transparent; transition:color .2s,border-color .2s; } .site-nav a:hover, .site-nav a[aria-current="page"]{ color:var(--accent); border-bottom-color:var(--accent); } /* ========================================================================== Page header (non-home pages) ========================================================================== */ .page-header{ padding:clamp(2.5rem,6vw,5rem) var(--gutter) 2rem; text-align:center; } .page-header .eyebrow{ font-size:0.85rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); margin-bottom:0.8rem; } .page-header h1{font-size:clamp(2.2rem,5vw,3rem);} /* ========================================================================== Hero (home) ========================================================================== */ .hero{ display:grid; grid-template-columns:1fr 1fr; align-items:center; min-height:78vh; padding:var(--gutter); gap:3rem; } .hero-text h1{font-size:clamp(2.4rem,6vw,4rem);margin-bottom:1.5rem;} .hero-img{ width:100%; aspect-ratio:4/5; object-fit:cover; filter:grayscale(15%); } /* ========================================================================== Quote block ========================================================================== */ .quote-section{ padding:clamp(2.5rem,6vw,5rem) var(--gutter); text-align:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .quote-section blockquote{ font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(1.35rem,3vw,1.9rem); font-style:italic; max-width:56ch; margin:0 auto 1rem; line-height:1.4; } .quote-section blockquote + blockquote{margin-top:2rem;} .quote-section cite{ font-size:0.85rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--accent); font-style:normal; } .quote-group + .quote-group{margin-top:2.5rem;} /* ========================================================================== Generic content section ========================================================================== */ .section{padding:2.25rem var(--gutter);max-width:var(--measure);margin:0 auto;} .section + .section{border-top:1px solid var(--line);} .section h2{font-size:clamp(1.7rem,3.5vw,2.2rem);margin-bottom:1.2rem;} .section h3{font-size:1.5rem;margin:2rem 0 0.6rem;color:var(--ink);} .section p{margin-bottom:1.2rem;color:var(--ink-soft);} .section p:last-child{margin-bottom:0;} .section .credits{font-size:0.9rem;color:var(--ink-soft);} .section .credits p{margin-bottom:0.3rem;} .section img{margin:2rem 0;border-radius:2px;} .section--center{text-align:center;} .bio-portrait{max-width:420px;margin:0 auto 2rem;} .inline-link{ display:inline-block; margin-top:0.5rem; border-bottom:1px solid var(--line); text-decoration:none; } .inline-link:hover{border-bottom-color:var(--accent);color:var(--accent);} /* ========================================================================== Responsive video embeds (was repeated inline on every page) ========================================================================== */ .video-embed{ position:relative; padding-top:56.25%; /* 16:9 */ margin:0.5rem 0 1rem; background:var(--paper-alt); } .video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } /* ========================================================================== Image gallery ========================================================================== */ .gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:0.6rem; margin:2rem 0; } .gallery img{width:100%;height:220px;object-fit:cover;margin:0;} .gallery-2{grid-template-columns:1fr 1fr;} .gallery-2 img{height:380px;} /* ========================================================================== CTA / link buttons ========================================================================== */ .cta{display:flex;justify-content:center;gap:1.5rem;padding:2.5rem var(--gutter);flex-wrap:wrap;} .cta a{ border:1px solid var(--ink); padding:0.9rem 2.2rem; text-decoration:none; color:var(--ink); font-size:0.85rem; letter-spacing:0.12em; text-transform:uppercase; transition:background .2s,color .2s; } .cta a:hover{background:var(--ink);color:var(--paper);} /* ========================================================================== Project card ========================================================================== */ .project-card{margin-bottom:0.5rem;} .project-card .meta{ font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); margin-bottom:0.5rem; } /* ========================================================================== Contact ========================================================================== */ .contact-grid{ display:grid; grid-template-columns:1fr; gap:3rem; padding:var(--gutter); max-width:500px; margin:0 auto; text-align:center; } .contact-block h2{font-size:1.8rem;margin-bottom:1rem;} .contact-block p{color:var(--ink-soft);margin-bottom:0.6rem;} .contact-block a{text-decoration:none;border-bottom:1px solid var(--line);} .contact-block a:hover{border-bottom-color:var(--accent);color:var(--accent);} .social-list{list-style:none;display:flex;gap:1.5rem;margin-top:1rem;flex-wrap:wrap;} .social-list a{ font-size:0.85rem; text-transform:uppercase; letter-spacing:0.08em; text-decoration:none; border-bottom:1px solid var(--line); } .social-list a:hover{border-bottom-color:var(--accent);color:var(--accent);} .contact-grid .social-list{justify-content:center;} .form-note{font-size:0.8rem;color:var(--muted);margin-top:0.6rem;} /* ========================================================================== Footer ========================================================================== */ .site-footer{ text-align:center; padding:2.5rem; font-size:0.8rem; color:var(--muted); letter-spacing:0.05em; border-top:1px solid var(--line); } .site-footer a{color:var(--muted);} /* ========================================================================== Error page ========================================================================== */ .error-page{ text-align:center; padding:clamp(3rem,10vw,7rem) var(--gutter); max-width:600px; margin:0 auto; } .error-page h1{font-size:clamp(2.5rem,7vw,4rem);margin-bottom:1rem;} .error-page p{color:var(--ink-soft);margin-bottom:1.5rem;} /* ========================================================================== Responsive ========================================================================== */ @media(max-width:800px){ :root{--gutter:1.5rem;} .site-header{flex-direction:column;text-align:center;padding:1.5rem;} .site-nav ul{gap:1.2rem;justify-content:center;} .hero{grid-template-columns:1fr;padding:2rem 1.5rem;text-align:center;min-height:0;} .hero-text{order:2;} .hero-img{order:1;} .hero .social-list{justify-content:center;} .section{padding:1.5rem;} .gallery{grid-template-columns:1fr 1fr;} .gallery-2 img{height:240px;} .cta{padding:2rem 1.5rem;gap:1rem;} } @media(max-width:420px){ .gallery{grid-template-columns:1fr;} .gallery img{height:260px;} .cta a{width:100%;text-align:center;} } /* Respect users who ask for less motion */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; } } /* Print */ @media print{ .site-header,.site-nav,.cta,.video-embed,.skip-link{display:none;} body{background:#fff;color:#000;} .section{padding:0.5rem 0;max-width:none;} }