/* ============ EDIT THESE FIRST ============ */
:root{
  --bg:   #FBF5D5;   /* light yellow page */
  --ink:  #2B2418;   /* text, warm near-black */
  --soft: #7A6B4E;   /* secondary text */
  --rule: #C9B98A;   /* thin lines */
  --mono: "Courier Prime", "Courier New", monospace;
  --serif:"EB Garamond", Georgia, serif;
}

*{box-sizing:border-box}
html{scrollbar-gutter:stable}  /* reserve the scrollbar's space so short and long pages don't shift */
body{
  margin:0;min-height:100vh;
  background:var(--bg);color:var(--ink);
  font-family:var(--serif);font-size:1.15rem;line-height:1.65;
  display:flex;flex-direction:column;
}
a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
a:hover{border-color:var(--ink)}
a:focus-visible{outline:1px dashed var(--ink);outline-offset:3px}
img{display:block;max-width:100%}
h1,h2,h3{font-weight:400;margin:0}
p{margin:0 0 1em;max-width:60ch}
i,em{font-style:italic}

/* nav — typewriter, always the same on every page */
nav{
  font-family:var(--mono);font-size:.9rem;letter-spacing:.02em;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.5rem clamp(1.2rem,4vw,3rem);
}
nav ul{list-style:none;display:flex;gap:1.5rem;margin:0;padding:0}
nav a{border:0}
nav a[aria-current]{border-bottom:1px solid var(--ink)}
nav .brand{border:2px solid transparent;padding:.25rem .7rem;line-height:1.3;transition:border-color .3s ease}
nav .brand:hover,nav .brand:focus-visible{border-color:#000}

main{flex:1}

/* home — photo centred, nothing else */
.home{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem 1.5rem 3rem}
.home figure{margin:0;text-align:center}
.home img{
  max-height:70vh;width:auto;max-width:90vw;
  border:1px solid rgba(43,36,24,.25);      /* faint print edge */
  filter:contrast(.97) saturate(.95);        /* keeps film tones soft; remove if you prefer */
}

/* inner pages */
.page{width:min(720px,92vw);margin:0 auto;padding:2rem 0 5rem}
.page h1{font-family:var(--mono);font-size:1rem;color:var(--soft);margin-bottom:2.5rem}
.page h2{font-size:1.6rem;margin:2.5rem 0 .75rem}

.pubs{list-style:none;margin:0;padding:0}
.pubs li{padding:1.2rem 0;border-top:1px solid var(--rule)}
.pubs li:last-child{border-bottom:1px solid var(--rule)}
.pubs .title{font-size:1.3rem;display:block}
.pubs .meta{color:var(--soft);display:block;margin-top:.15rem}
.pubs .links{font-family:var(--mono);font-size:.8rem;margin-top:.5rem}
.pubs .links a{margin-right:1.2rem}
.year{font-family:var(--mono);font-size:.85rem;color:var(--soft);margin:2rem 0 0}

/* photos on inner pages — same size and caption as the home page */
.page .photo{margin:3rem 0 0;text-align:center}
.page .photo img{
  max-height:70vh;width:auto;max-width:100%;margin:0 auto;
  border:1px solid rgba(43,36,24,.25);
  filter:contrast(.97) saturate(.95);
}
figcaption{font-family:var(--mono);font-size:.8rem;color:var(--soft);margin-top:1rem;text-align:center}

.contact-list{list-style:none;padding:0;margin:0;font-size:1.3rem;line-height:2.2}
.contact-list span{font-family:var(--mono);font-size:.8rem;color:var(--soft);display:inline-block;width:8rem}

footer{font-family:var(--mono);font-size:.75rem;color:var(--soft);padding:1.5rem clamp(1.2rem,4vw,3rem)}

@media (max-width:600px){
  nav{flex-direction:column;gap:.8rem;align-items:flex-start}
  .contact-list span{display:block;width:auto;line-height:1.2;margin-top:.8rem}
}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* fortress backdrop — fades out behind the text column */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url(images/fortress-v24.svg) no-repeat center bottom / cover;
  -webkit-mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.12) 25%,rgba(0,0,0,.12) 75%,#000 100%);
          mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.12) 25%,rgba(0,0,0,.12) 75%,#000 100%);
}
/* landing page: the whole fortress at a flat 30% */
.home-page::before{-webkit-mask-image:none;mask-image:none;opacity:.3}
@media (max-width:600px){body::before{-webkit-mask-image:none;mask-image:none;opacity:.35}.home-page::before{opacity:.3}}

/* nav icon: draws the fortress, then everything fades back */
body::before{transition:opacity .9s ease}
main,footer{transition:opacity .9s ease}
.fort-btn{
  display:block;background:none;border:0;padding:0;margin:0;cursor:pointer;
  color:#000;opacity:.5;transition:opacity .45s ease;line-height:0;
  align-self:center;
}
.fort-btn:hover,.fort-btn:focus-visible{opacity:1}
.fort-btn:focus-visible{outline:1px dashed var(--ink);outline-offset:4px}
.fort-btn:disabled{opacity:1;cursor:default}
body.drawing::before{opacity:0}
body.drawing main,body.drawing footer{opacity:0}
.fort-draw{position:fixed;inset:0;z-index:-1;pointer-events:none}
.fort-draw svg{width:100%;height:100%;display:block}