:root{
  --paper:#F2EFE7;
  --olive-950:#16140D;
  --olive-800:#363220;
  --olive-700:#554F34;
  --olive-600:#756D47;
  --olive-100:#BFB896;
  --mustard:#C2963A;
  --mustard-dark:#A87C2E;
  --mustard-ink:#3A2F16;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;}
body{
  margin:0;
  min-height:100vh;
  background:var(--paper);
  color:var(--olive-950);
  font-family:var(--sans);
  display:flex;
  justify-content:center;
}
a{color:inherit;}
.page{
  width:100%;
  max-width:420px;
  padding:40px 22px 40px;
}

/* Brand header: identical on every page */
.brand{
  text-align:center;
  margin-bottom:32px;
}
.brand h1{
  margin:0;
  font-size:0;
  line-height:0;
}
.brand .logo{
  display:block;
  width:240px;
  height:auto;
  margin:0 auto;
}

/* Link hub */
nav{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.link{
  display:block;
  text-decoration:none;
  border-radius:14px;
  padding:16px 20px;
  text-align:center;
}
.link .title{
  font-family:var(--serif);
  font-size:19px;
}
.link .sub{
  display:block;
  font-size:12.5px;
  margin-top:3px;
}
/* Links: dark olive, mustard on hover (dark ink text on mustard) */
.link.secondary{
  background:var(--olive-800);
  color:var(--paper);
  border:1px solid var(--olive-800);
}
.link.secondary .sub{color:var(--olive-100);}
.link.secondary:hover{
  background:var(--mustard);
  border-color:var(--mustard-dark);
  color:var(--olive-950);
}
.link.secondary:hover .sub{color:var(--mustard-ink);}

/* About page */
.photo{
  display:block;
  width:100%;
  height:auto;
  border-radius:14px;
  margin:22px 0;
}
.portrait{
  float:right;
  width:130px;
  height:auto;
  border:3px solid var(--olive-800);
  border-radius:14px;
  margin:6px 0 12px 20px;
}
.signature{
  display:block;
  width:180px;
  height:auto;
  margin:14px 0 0;
}
.portfolio{margin:36px auto 0;}
.principles{
  display:block;
  width:100%;
  max-width:420px;
  height:auto;
  border-radius:14px;
  margin:26px auto;
}
.back{
  display:inline-block;
  font-size:13px;
  color:var(--olive-800);
  text-decoration:none;
  margin-bottom:22px;
}
.back:hover{text-decoration:underline; color:var(--olive-950);}
h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:30px;
  margin:0 0 22px;
  color:var(--olive-950);
}
.page p{
  font-size:16px;
  line-height:1.6;
  color:var(--olive-800);
}
h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:20px;
  margin:28px 0 10px;
  color:var(--olive-950);
}
.page ul{
  margin:0 0 20px;
  padding-left:20px;
  font-size:16px;
  line-height:1.6;
  color:var(--olive-800);
}
.page li{margin-bottom:4px;}
.page p.signoff{
  font-family:var(--serif);
  font-style:italic;
  color:var(--olive-700);
  margin-top:26px;
}

/* Footer: horizontal lockup floats above the site name */
footer{
  text-align:center;
  margin-top:48px;
  font-size:12px;
  color:var(--olive-700);
}
footer .marks{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  margin-bottom:10px;
}
footer .lockup{
  display:block;
  width:132px;
  height:auto;
}
footer .nf-badge{
  display:block;
  width:100px;
  height:auto;
}

a:focus-visible{outline:2px solid var(--olive-950); outline-offset:3px;}

/* Wider reading column for content pages on larger screens.
   The home page stays phone-width; the logo header stays identical. */
@media (min-width:700px){
  .page-wide{max-width:640px;}
  .page-wide p{font-size:17px;}
  .page-wide ul{font-size:17px;}
  .page-wide .portfolio{max-width:420px;}
}
@media (min-width:1100px){
  .page-wide{max-width:720px;}
}