/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}/* Core JA codex styles — minimal, editorial */
:root{
  --white:#ffffff;
  --offwhite:#f7f7f7;
  --black:#000000;
  --muted:#666666;
  --max-width:1200px;
  --margin-lg:110px; /* desktop left/right margin */
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:var(--white); color:var(--black);}

.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding-left:var(--margin-lg);
  padding-right:var(--margin-lg);
}

/* Header / nav */
.header{
  padding:36px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.header .brand{font-size:18px;letter-spacing:0.06em;}
.nav a{color:var(--black); text-decoration:none; margin-left:22px; font-size:14px;}

/* Hero */
.hero{
  min-height:66vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 0;
}
.hero img{ max-width:100%; height:auto; display:block; border-radius:0;}

/* Hero lines */
.hero-text{
  max-width:720px;
  text-align:left;
}
.hero-text h1{
  font-weight:400;
  font-size:28px;
  margin:0 0 12px 0;
  letter-spacing:0.02em;
}
.hero-text p{margin:0 0 20px 0; color:var(--muted); font-size:16px; line-height:1.6;}

/* Works grid */
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin:60px 0;
}
.card img{width:100%;height:auto;display:block;}
.card .meta{font-size:13px;color:var(--muted); margin-top:8px;}

/* Single work page */
.work-hero{ margin:40px 0; }
.work-meta{ color:var(--muted); font-size:13px; margin-top:12px;}

/* Journal */
.journal-entry{margin:48px 0; display:flex; gap:28px; align-items:flex-start;}
.journal-entry img{width:360px;height:auto; object-fit:cover;}
.journal-entry .text{max-width:720px; color:var(--black); font-size:15px; line-height:1.6;}

/* About */
.about-portrait{width:240px;height:auto; float:left; margin-right:28px;}

/* Contact */
.contact-form{max-width:480px; margin:40px 0;}
.input, textarea{width:100%; padding:12px; margin-bottom:12px; border:1px solid #e6e6e6; font-size:14px;}

/* Footer */
.footer{padding:60px 0; color:var(--muted); font-size:13px; text-align:center;}

/* Responsive */
@media (max-width:900px){
  .container{ padding-left:28px; padding-right:28px; }
  .grid{grid-template-columns:repeat(2,1fr)}
  .journal-entry{flex-direction:column}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}