:root{
  --bg:#250231;
  --text:#dbcad9;
  --muted:#b09bb5;
  --red:#c71011;
  --gold:#c9871c;
  --title:"Amatic SC","Arial Narrow",sans-serif;
  --serif:"Crimson Text",Georgia,"Times New Roman",serif;
  --sans:"Lato",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:1.1rem/1.65 var(--serif)}
a:focus-visible{outline:2px solid var(--red);outline-offset:4px}

/* Header */
.site-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;padding:2.25rem 2.25rem 0;min-height:13.5rem}
.site-header ul{list-style:none;display:flex;gap:1.5rem;margin:.9rem 0 0;padding:0}
.site-header nav a{font:400 .9rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text);text-decoration:none;display:inline-block;padding-bottom:.3rem;border-bottom:2px solid transparent}
.site-header nav a:hover{color:#fff}
.site-header nav a[aria-current="page"]{color:var(--red);border-bottom-color:var(--red)}
.intro{max-width:28rem;margin:2.75rem 0 0;font-size:1.05rem;line-height:1.5;color:var(--muted)}
.brand{text-align:right}
.brand a{display:block;font:400 clamp(3.25rem,7.4vw,5.5rem)/1 var(--title);letter-spacing:.03em;text-transform:uppercase;color:var(--red);text-decoration:none}
.brand-sub{display:flex;justify-content:flex-end;align-items:center;gap:1.25rem;flex-wrap:wrap;margin-top:.6rem}
.brand-sub p{margin:0;font-size:.9rem;line-height:1.4;color:var(--muted)}

/* Home: image mosaic. Each .col is a vertical stack; tiles keep their own shape. */
.grid{display:grid;grid-template-columns:repeat(5,1fr);margin:0 4px 4px}
.col{display:flex;flex-direction:column}
.tile{margin:0}
.tile img{display:block;width:100%;height:auto}

/* Hello page */
.about{max-width:72rem;margin:0 auto;padding:2rem 1.5rem 5rem;display:grid;grid-template-columns:1fr;gap:2rem}
.about-text p{margin:0 0 1.15rem}
.about-text a,.about-text a:visited,.projects a,.projects a:visited{color:var(--gold);text-decoration:none}
.about-text a:hover,.about-text a:focus-visible,.projects a:hover,.projects a:focus-visible{color:var(--gold);text-decoration:underline}
.about-text .quote{margin-top:1.5rem;color:var(--text)}
.portrait{margin:0}
.portrait img{display:block;width:100%;height:auto}

/* Projects page */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.projects{max-width:72rem;margin:0 auto;padding:2rem 1.5rem 5rem}
.projects .wrap{max-width:72rem}
.projects h2,.projects section,.projects .request{max-width:44rem}
.projects h2{font:400 .9rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:3.5rem 0 0;padding-bottom:.75rem;border-bottom:1px solid rgba(219,202,217,.25)}
.projects h2:first-of-type{margin-top:0}
.projects h3{font:400 clamp(2.25rem,5vw,3rem)/1 var(--title);letter-spacing:.03em;color:var(--red);margin:2.25rem 0 1rem}
.projects p{margin:0 0 1.15rem}
.logline{margin:0 0 1.25rem 2rem;padding-left:1.25rem;border-left:2px solid var(--red);font-style:italic}
.logline p{margin:0 0 .8rem}
.logline p:last-child{margin-bottom:0}
.request{margin-top:3.5rem;color:var(--muted)}
.projects section.has-art{max-width:none;display:grid;grid-template-columns:minmax(0,44rem) minmax(0,20rem);grid-template-areas:"title art" "body art";grid-template-rows:auto 1fr;column-gap:3rem;align-items:start}
.has-art h3{grid-area:title}
.has-art .body{grid-area:body}
/* height:0 lets the picture run down beside the next entries instead of leaving a gap under Dark Young */
.has-art .art{grid-area:art;margin:2.25rem 0 0;height:0}
.art img{display:block;width:100%;height:auto}
.art figcaption{margin-top:.6rem;font-size:.85rem;line-height:1.4;color:var(--muted)}

@media(max-width:900px){.projects section.has-art{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "art" "body"}.has-art .art{margin:0 0 1.25rem;max-width:20rem;height:auto}}
@media(max-width:640px){.logline{margin-left:.5rem;padding-left:1rem}}

/* Social icons, in the header beside the quote */
.site-header .socials{display:flex;gap:.9rem;margin:0;padding:0}
.socials a{display:block;color:var(--muted);line-height:0;padding:.2rem}
.socials svg{width:20px;height:20px}
.socials a:hover{color:var(--text)}
.socials a:focus-visible{outline:2px solid var(--red);outline-offset:4px}

@media(min-width:860px){
  .about{grid-template-columns:minmax(0,1fr) 23rem;gap:1.5rem}
}
@media(max-width:1000px){
  .grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .site-header{flex-direction:column-reverse;gap:1rem;min-height:0;padding:1.5rem 1.25rem 2rem}
  .brand{text-align:left}
  .brand-sub{justify-content:flex-start}
  .site-header ul{margin-top:0}
  .intro{margin-top:1.25rem}
}