@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root{
  --cream: #F3EAE0;
  --cream-dark: #EAE0D2;
  --ink: #221D19;
  --ink-soft: #4a4139;
  --rust: #9C4A35;
  --gold: #C08A2E;
  --line: #DCD0BE;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:
    radial-gradient(ellipse 90% 60% at 15% 0%, rgba(192,138,46,0.05), transparent 55%),
    radial-gradient(ellipse 80% 55% at 100% 100%, rgba(156,74,53,0.06), transparent 55%),
    var(--cream);
  color:var(--ink);
  font-family:'EB Garamond', Georgia, serif;
  position:relative;
}
body::before{
  content:'';
  position:fixed; inset:0; pointer-events:none; z-index:1000;
  opacity:0.025; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.accent-bar{
  height:4px; width:100%;
  background:linear-gradient(90deg, var(--rust) 0%, var(--gold) 50%, var(--rust) 100%);
}
a{color:inherit; text-decoration:none;}

/* ===== shared top nav (pipe separated, upper right) ===== */
.top-nav{
  display:flex; align-items:center; gap:0.9rem; flex-wrap:wrap;
  justify-content:flex-end;
}
.top-nav a{
  font-size:0.82rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink);
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.top-nav a:hover{color:var(--rust);}
.top-nav a.current{border-color:var(--rust); color:var(--rust);}
.top-nav .sep{color:var(--line); font-size:0.9rem;}

/* ===== interior page header (name left, nav right) ===== */
header.site{
  display:flex; align-items:center; justify-content:space-between;
  padding:2.4rem 5vw 1.4rem 2.6rem;
  flex-wrap:wrap; gap:1rem 2rem;
}
.brand{
  font-family:'EB Garamond', serif;
  font-size:clamp(1.6rem,2.6vw,2.1rem);
  color:var(--ink);
}

main.page{max-width:1140px; margin:0 auto; padding:1rem 4vw 5rem;}

/* ===== homepage split ===== */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  height:clamp(560px, 68vw, 100vh);
}
.hero-photo{
  position:relative;
  height:100%;
  overflow:hidden;
  background:#1a1512;
}
.hero-photo img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:17% center;
  z-index:0;
}
.photo-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(10,8,6,0.6) 100%);
}
.hero-name{
  position:absolute; top:2.4rem; left:2.6rem;
  font-family:'EB Garamond', serif;
  font-size:clamp(1.6rem,2.6vw,2.1rem);
  color:#2a231e;
  z-index:2;
}
.hero-quote{
  position:absolute; left:2.6rem; bottom:1.4rem; right:2.6rem;
  font-family:'EB Garamond', serif;
  font-style:normal;
  font-size:clamp(1.7rem,3.2vw,2.5rem);
  line-height:1.15;
  color:#F6EFE4;
  text-shadow:0 2px 14px rgba(0,0,0,0.35);
  z-index:2;
}
.hero-quote .rule{
  display:block; width:70px; height:1px; background:#F6EFE4;
  margin-top:1rem; opacity:0.8;
}
.photo-tag{
  position:absolute; bottom:1rem; right:1.2rem; z-index:2;
  font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(255,255,255,0.55); font-family:'EB Garamond', serif;
}

.hero-content{
  background:var(--cream);
  height:100%;
  padding:2.4rem 4.5vw 2.4rem;
  display:flex; flex-direction:column;
  overflow-y:auto;
}
.hero-content .top-nav{margin-bottom:0;}
.featured-wrap{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.featured .label{
  font-size:0.8rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--rust); display:block; margin-bottom:0.7rem;
}
.dash{width:46px; height:1px; background:var(--rust); margin-bottom:1.6rem;}
.featured h1{
  font-size:clamp(2.1rem,3.4vw,2.9rem);
  font-weight:500;
  margin:0 0 0.6rem;
  line-height:1.15;
}
.featured .subtitle{
  font-style:italic;
  color:var(--ink-soft);
  font-size:1.15rem;
  margin:0 0 1.6rem;
}
.featured p{
  font-size:1.05rem;
  line-height:1.75;
  color:var(--ink);
  margin:0 0 1.3rem;
  max-width:56ch;
}
.read-more{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-size:0.85rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--rust); border-bottom:1px solid var(--rust); padding-bottom:3px;
  margin-top:0.6rem;
}
.read-more:hover{opacity:0.75;}

.crossover{
  margin-top:auto; padding-top:3rem;
  border-top:1px solid var(--line);
}
.crossover p{font-size:0.95rem; color:var(--ink-soft); line-height:1.7; margin:0 0 0.8rem; max-width:52ch;}
.crossover a{
  font-size:0.82rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--rust); border-bottom:1px solid var(--rust); padding-bottom:2px;
}

/* ===== generic page header block ===== */
.page-head{padding:1rem 0 2.4rem; border-bottom:1px solid var(--line); margin-bottom:2.6rem; position:relative;}
.page-head.tight{padding:0.5rem 0 1.2rem; margin-bottom:1.8rem;}
.contact-head{
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:1rem 2rem;
}
.contact-topbar{
  display:flex; justify-content:flex-end; gap:2.4rem; flex-wrap:wrap;
  align-items:baseline;
}
.contact-topbar .item{font-size:0.92rem; display:flex; align-items:center; gap:0.5rem;}
.ig-icon{color:var(--rust); flex-shrink:0;}
.contact-topbar .label{
  font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--rust); margin-right:0.5rem;
}
.contact-topbar a{border-bottom:1px solid var(--ink); padding-bottom:1px;}
.contact-topbar a:hover{color:var(--rust); border-color:var(--rust);}
.page-head .label{
  font-size:0.8rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--rust);
  display:block; margin-bottom:0.7rem;
}
.page-head h1{font-size:clamp(2rem,3.4vw,2.6rem); font-weight:500; margin:0 0 0.6rem;}
.page-head p.lede{font-style:italic; color:var(--ink-soft); font-size:1.05rem; margin:0; max-width:60ch;}

/* ===== bio ===== */
/* ===== pull quote ===== */
.pull-quote{
  border-top:1px solid var(--line);
  margin-top:1rem;
  padding:2.6rem 0 1rem;
  text-align:center;
}
.pull-quote blockquote{
  margin:0 auto; max-width:52ch;
  font-family:'EB Garamond', serif;
  font-style:italic;
  font-size:clamp(1.3rem, 2.4vw, 1.7rem);
  line-height:1.4;
  color:var(--ink-soft);
}
.pull-quote cite{
  display:block; margin-top:1rem;
  font-style:normal; font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--rust);
}
.pull-quote-inline{
  text-align:center;
  padding:1.8rem 0 0.5rem;
  margin-top:2.6rem;
}
.pull-quote-inline blockquote{
  margin:0 auto; max-width:44ch;
  font-size:1.45rem;
  line-height:1.5;
}
.pull-quote-inline cite{margin-top:1rem;}

/* ===== contact layout ===== */
.contact-layout{
  display:grid; grid-template-columns:1fr 1fr; gap:3rem;
  align-items:start; padding-bottom:2rem;
}
.contact-layout .contact-list{
  font-size:1.12rem;
}
.contact-layout .contact-list li{padding:1.3rem 0;}
.contact-layout .contact-list .label{font-size:0.76rem;}

.bio-layout{display:grid; grid-template-columns:1fr 1.15fr; gap:3rem; padding-bottom:2rem;}
.portrait{
  aspect-ratio:4/5; background:var(--cream-dark); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(34,29,25,0.16);
}
.portrait .ph-label{font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:#a89c88;}
.bio-text p{font-size:1.02rem; line-height:1.8; color:var(--ink); margin:0 0 1.2rem;}

/* ===== writing list ===== */
/* ===== announcement banner ===== */
.announcement{
  border:1px solid #B23A2E;
  background:rgba(178,58,46,0.08);
  padding:1.3rem 1.6rem;
  margin-bottom:2.8rem;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:0.4rem 1rem;
}
.announcement-label{
  font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;
  color:#B23A2E; font-weight:600; white-space:nowrap;
}
.announcement p{
  margin:0; font-size:1rem; color:var(--ink); font-style:italic;
}
.announcement p em{font-style:normal; font-weight:500;}

.work-item{
  display:grid; grid-template-columns:130px 1fr; gap:2rem;
  padding:2.2rem 0; border-bottom:1px solid var(--line);
}
.work-item:first-child{padding-top:0;}
.work-thumb{
  aspect-ratio:2/3; background:var(--cream-dark);
  display:flex; align-items:center; justify-content:center;
  font-size:0.62rem; color:#a89c88; text-align:center; letter-spacing:0.08em; text-transform:uppercase;
  overflow:hidden;
  box-shadow:0 6px 16px rgba(34,29,25,0.16);
}
.work-thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease;}
.work-item:hover .work-thumb img{transform:scale(1.045);}
.work-item .meta{font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--rust); margin-bottom:0.5rem;}
.work-item h3{font-size:1.5rem; font-weight:500; margin:0 0 0.5rem;}
.work-item .subtitle{font-style:italic; color:var(--ink-soft); margin:0 0 0.8rem; font-size:0.98rem;}
.work-item p{font-size:0.98rem; line-height:1.75; color:var(--ink); margin:0 0 0.8rem;}
.work-links{display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; margin-top:0.6rem;}
.work-links .read-more{margin-top:0;}
.pdf-link{
  display:inline-flex; align-items:center; gap:0.4rem;
  font-size:0.82rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-soft); border-bottom:1px solid var(--line); padding-bottom:3px;
}
.pdf-link:hover{color:var(--ink); border-color:var(--ink-soft);}

/* ===== contact ===== */
.contact-list{list-style:none; padding:0; margin:2rem 0 0; max-width:520px;}

/* ===== contact form ===== */
.contact-form{
  margin-top:0;
  padding:2rem 2.2rem 2.4rem;
  max-width:none;
  width:100%;
  aspect-ratio:4/5;
  box-sizing:border-box;
  border:1px solid var(--rust);
  background:rgba(156,74,53,0.05);
  overflow-y:auto;
}
.contact-form .form-label{
  font-size:1rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--rust); display:block; margin-bottom:0.7rem;
}
.contact-form p.form-note{
  font-size:0.92rem; color:var(--ink-soft); margin:0 0 1.6rem; line-height:1.6;
}
.form-field{margin-bottom:1.6rem;}
.form-field label{
  display:block; font-size:0.75rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink); margin-bottom:0.5rem;
}
.form-field input, .form-field textarea{
  width:100%; font-family:'EB Garamond', serif; font-size:1rem; color:var(--ink);
  background:transparent; border:none; border-bottom:1px solid var(--line);
  padding:0.5rem 0.1rem; outline:none;
  transition:border-color .15s ease;
}
.form-field input:focus, .form-field textarea:focus{border-color:var(--rust);}
.form-field textarea{resize:vertical; min-height:90px; line-height:1.5;}
.form-submit{
  display:inline-block; margin-top:0.4rem;
  font-family:'EB Garamond', serif;
  font-size:0.82rem; letter-spacing:0.12em; text-transform:uppercase;
  background:var(--rust); color:var(--cream);
  padding:0.75rem 1.6rem; border:1px solid var(--rust);
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.form-submit:hover{background:transparent; color:var(--rust);}
.contact-list li{padding:1rem 0; border-bottom:1px solid var(--line); font-size:1rem;}
.contact-list li span.label{
  display:block; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--rust); margin-bottom:0.3rem;
}
.contact-list a{border-bottom:1px solid var(--ink); padding-bottom:1px;}
.contact-list a:hover{color:var(--rust); border-color:var(--rust);}

/* ===== resume / headshots ===== */
.headshots{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2rem; padding-bottom:2rem;}
.headshot{
  aspect-ratio:4/5; background:var(--cream-dark); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(34,29,25,0.16);
}
.headshot .ph-label{font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:#a89c88; text-align:center; padding:1rem;}

.download-btn{
  display:inline-block; margin:0 0 3rem;
  font-size:0.82rem; letter-spacing:0.12em; text-transform:uppercase;
  background:var(--rust); color:var(--cream);
  padding:0.75rem 1.5rem;
  border:1px solid var(--rust);
  transition:background .15s ease, color .15s ease;
}
.download-btn:hover{background:transparent; color:var(--rust);}

.resume-block{margin-bottom:2.6rem;}
.resume-block h3{font-size:1.3rem; font-weight:500; margin:0 0 1rem; border-bottom:1px solid var(--ink); display:inline-block; padding-bottom:0.3rem;}
table.credits{width:100%; border-collapse:collapse; font-size:0.95rem;}
table.credits th{
  text-align:left; letter-spacing:0.1em; text-transform:uppercase; font-size:0.7rem;
  color:var(--rust); border-bottom:1px solid var(--ink); padding:0.5rem 0.6rem 0.5rem 0; font-weight:500;
}
table.credits td{padding:0.7rem 0.6rem 0.7rem 0; border-bottom:1px solid var(--line); color:var(--ink);}

.pill-row{display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:0.8rem;}
.pill{
  font-size:0.78rem; letter-spacing:0.04em; padding:0.35rem 0.9rem; border:1px solid var(--line); color:var(--ink-soft);
}

/* ===== story page (full piece) ===== */
main.story-page{max-width:720px; margin:0 auto; padding:1rem 5vw 6rem;}
.story-head{padding:1rem 0 2.2rem; border-bottom:1px solid var(--line); margin-bottom:2.6rem;}
.story-head .label{
  font-size:0.8rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--rust);
  display:block; margin-bottom:0.7rem;
}
.story-head h1{font-size:clamp(2rem,4vw,2.7rem); font-weight:500; margin:0 0 0.5rem;}
.story-head .byline{font-style:italic; color:var(--ink-soft); font-size:1.05rem; margin:0;}
.story-body p{font-size:1.04rem; line-height:1.85; margin:0 0 1.25rem; color:var(--ink);}
.story-nav-back{
  display:inline-block; margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line); width:100%;
  font-size:0.85rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--rust);
}
.story-nav-back a{border-bottom:1px solid var(--rust); padding-bottom:2px;}

.story-gate{
  margin-top:1rem;
  padding:2.6rem 2rem;
  text-align:center;
  background:var(--cream-dark);
  border:1px solid var(--line);
}
.story-gate-note{
  font-family:'EB Garamond', serif;
  font-style:italic;
  font-size:1.25rem;
  color:var(--ink-soft);
  margin:0 0 1.4rem;
}

footer{
  border-top:1px solid var(--line);
  padding:2rem 5vw 3rem;
  max-width:1400px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  font-size:0.85rem; color:var(--ink-soft);
}
footer .top-nav{justify-content:flex-end;}
footer a:hover{color:var(--rust);}

@media (max-width:900px){
  .split{grid-template-columns:1fr; height:auto;}
  .hero-photo{height:60vh;}
  .bio-layout, .contact-layout{grid-template-columns:1fr;}
  .work-item{grid-template-columns:1fr;}
  .work-thumb{max-width:140px;}
}