/* ————————————————————————————————————————————————
   Jaymes W. Johnson — jaymesjohnson.com
   Set in Fraunces, Newsreader & IBM Plex Mono.
   Palette: ink, ivory, navy, old gold, oxblood.
   ———————————————————————————————————————————————— */

:root{
  --paper:      #f6f1e6;
  --paper-deep: #efe8d8;
  --ink:        #17130a;
  --ink-soft:   #4a4232;
  --navy:       #0d1c33;
  --navy-deep:  #070f1e;
  --gold:       #a9853d;
  --gold-bright:#d4af5a;
  --oxblood:    #7c1f2b;
  --line:       rgba(23,19,10,.16);
  --line-strong:rgba(23,19,10,.55);
  --ease:       cubic-bezier(.22,.9,.24,1);
  --serif:  "Fraunces", "Iowan Old Style", Georgia, serif;
  --text:   "Newsreader", "Iowan Old Style", Georgia, serif;
  --mono:   "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  --name-serif: "Cormorant Garamond", "Iowan Old Style", Garamond, Georgia, serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:5.5rem; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:1.075rem;
  line-height:1.68;
  font-kerning:normal;
  font-variant-numeric:oldstyle-nums;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{ background:var(--navy); color:var(--paper); }

/* print grain — one SVG noise layer over everything, barely there */
body::before{
  content:""; position:fixed; inset:0; z-index:50; pointer-events:none;
  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.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:multiply;
}

.skip{
  position:absolute; left:-999px; top:0; z-index:99;
  background:var(--ink); color:var(--paper);
  font-family:var(--mono); font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.8rem 1.4rem; text-decoration:none;
}
.skip:focus{ left:0; }

/* ————— shared atoms ————— */

.overline{
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:flex; align-items:center; gap:1.1rem;
}
.overline-gold{ color:var(--gold-bright); }
.folio{
  font-family:var(--serif);
  font-size:1.05rem;
  font-style:italic;
  font-weight:400;
  letter-spacing:0;
  color:var(--oxblood);
  border:1px solid currentColor;
  border-radius:50%;
  width:2.1rem; height:2.1rem;
  display:inline-flex; align-items:center; justify-content:center;
  flex:none;
}
.overline-gold .folio{ color:var(--gold-bright); }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:400;
  font-variant-numeric:lining-nums;
  text-wrap:balance;
}
h2{
  font-size:clamp(2.1rem, 4.4vw, 3.4rem);
  font-variation-settings:"opsz" 100;
  line-height:1.08;
  letter-spacing:-.012em;
}
h2 em{ font-style:italic; font-weight:400; color:var(--oxblood); }

.btn{
  display:inline-block;
  font-family:var(--mono);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  text-decoration:none;
  padding:1.05rem 1.9rem 1rem;
  border:1px solid;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn-ghost{ color:var(--paper); border-color:rgba(246,241,230,.55); }
.btn-ghost:hover, .btn-ghost:focus-visible{ background:var(--paper); color:var(--navy-deep); border-color:var(--paper); }
.btn-gold{ color:var(--gold-bright); border-color:rgba(212,175,90,.65); }
.btn-gold:hover, .btn-gold:focus-visible{ background:var(--gold-bright); color:var(--navy-deep); border-color:var(--gold-bright); }

.link-arrow{
  color:var(--oxblood);
  text-decoration:none;
  border-bottom:1px solid rgba(124,31,43,.35);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.link-arrow:hover, .link-arrow:focus-visible{ color:var(--ink); border-color:var(--ink); }

/* ————— reveals ————— */

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ————— masthead ————— */

.masthead{
  position:fixed; inset:0 0 auto 0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.15rem clamp(1.2rem, 4vw, 3rem);
  transition:background .45s var(--ease), box-shadow .45s var(--ease), padding .45s var(--ease);
}
.masthead.is-solid{
  background:rgba(246,241,230,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line);
  padding-top:.8rem; padding-bottom:.8rem;
}
.mast-name{
  font-family:var(--name-serif);
  font-size:1.7rem; font-weight:600;
  letter-spacing:.01em; text-transform:none;
  text-decoration:none;
  color:var(--paper);
  display:flex; align-items:center; gap:.6rem;
  transition:color .45s var(--ease);
}
.mast-mark{
  width:.5rem; height:.5rem; border-radius:50%;
  background:var(--gold-bright); flex:none;
  margin-top:.15em;
}
.masthead.is-solid .mast-name{ color:var(--ink); }
.mast-nav{ display:flex; gap:clamp(1rem, 2.4vw, 2.2rem); }
.mast-nav a{
  font-family:var(--mono);
  font-size:.68rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  text-decoration:none;
  color:rgba(246,241,230,.78);
  padding-bottom:.25rem;
  border-bottom:1px solid transparent;
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.mast-nav a:hover, .mast-nav a:focus-visible{ color:var(--gold-bright); border-color:var(--gold-bright); }
.masthead.is-solid .mast-nav a{ color:var(--ink-soft); }
.masthead.is-solid .mast-nav a:hover, .masthead.is-solid .mast-nav a:focus-visible{ color:var(--oxblood); border-color:var(--oxblood); }

/* ————— hero ————— */

.hero{
  position:relative;
  min-height:100svh;
  background:var(--navy-deep);
  display:flex; align-items:center;
  overflow:hidden;
}
#silk{ position:absolute; inset:0; width:100%; height:100%; }
.hero-veil{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 28% 42%, transparent 30%, rgba(7,15,30,.55) 100%),
    linear-gradient(to bottom, rgba(7,15,30,.25), transparent 30%, transparent 70%, rgba(7,15,30,.6));
}
.hero-inner{
  position:relative; z-index:2;
  padding:0 clamp(1.4rem, 5vw, 3rem);
  max-width:72rem; width:100%;
  margin:0 auto;
}
.hero-overline{ color:rgba(246,241,230,.72); margin-bottom:2.2rem; }
.hero-overline .rule{ width:3.4rem; height:1px; background:var(--gold-bright); display:inline-block; }
.hero-title{
  font-size:clamp(2.7rem, 7.4vw, 6.1rem);
  font-variation-settings:"opsz" 144;
  font-weight:340;
  line-height:1.04;
  letter-spacing:-.015em;
  color:var(--paper);
  max-width:16ch;
}
.hero-title em{ font-style:italic; color:var(--gold-bright); font-weight:380; }
.hero-title .amp{
  font-family:var(--name-serif);
  font-style:italic;
  font-weight:500;
  font-size:1.18em;
  line-height:0;
  vertical-align:-.04em;
}
.hero-sub{
  margin-top:2rem;
  max-width:44ch;
  font-size:clamp(1.05rem, 1.6vw, 1.28rem);
  font-style:italic;
  color:rgba(246,241,230,.82);
}
.hero-actions{ margin-top:2.8rem; display:flex; gap:1rem; flex-wrap:wrap; }

/* staged hero entrance */
.hero-overline, .hero-title, .hero-sub, .hero-actions{
  animation:rise 1.1s var(--ease) both;
}
.hero-title{ animation-delay:.15s; }
.hero-sub{ animation-delay:.32s; }
.hero-actions{ animation-delay:.5s; }
@keyframes rise{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .hero-overline, .hero-title, .hero-sub, .hero-actions{ animation:none; }
}
.scroll-cue{
  position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:.62rem; letter-spacing:.42em; text-transform:uppercase;
  color:rgba(246,241,230,.5);
  animation:cue 3.2s var(--ease) infinite;
}
@keyframes cue{ 0%,100%{ opacity:.45; transform:translate(-50%,0);} 50%{ opacity:.9; transform:translate(-50%,-6px);} }
@media (prefers-reduced-motion: reduce){ .scroll-cue{ animation:none; } }

/* ————— sections ————— */

.section{
  max-width:72rem;
  margin:0 auto;
  padding:clamp(5rem, 11vw, 8.5rem) clamp(1.4rem, 5vw, 3rem);
}
.section-rule{ border-top:1px solid var(--line); }
.section-head{ margin-bottom:clamp(2.6rem, 5vw, 4rem); }
.section-head .overline{ margin-bottom:1.6rem; }

/* — I · scholar — */

.scholar-grid{
  display:grid;
  grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);
  gap:clamp(2.5rem, 6vw, 5.5rem);
  align-items:start;
}
.scholar-prose p+p{ margin-top:1.35rem; }
.has-dropcap::first-letter{
  font-family:var(--name-serif);
  font-weight:600;
  font-size:4.7em;
  line-height:.74;
  float:left;
  padding:.06em .1em 0 0;
  color:var(--oxblood);
}
.fields{
  list-style:none;
  margin:2.4rem 0;
  display:grid; grid-template-columns:1fr 1fr;
  gap:.65rem 2rem;
}
.fields li{
  font-family:var(--mono);
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft);
  padding:.55rem 0 .55rem 1.2rem;
  border-bottom:1px solid var(--line);
  position:relative;
}
.fields li::before{
  content:""; position:absolute; left:0; top:1.05rem;
  width:.42rem; height:.42rem; background:var(--gold);
  transform:rotate(45deg);
}
.credential{
  font-size:.95rem; color:var(--ink-soft);
  border-left:2px solid var(--gold);
  padding-left:1.1rem;
}
.credential-k{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--oxblood); margin-right:.7rem;
}
.credential-sep{ margin:0 .7rem; color:var(--gold); }

.scholar-portrait{ position:relative; }
.portrait-frame{
  position:relative;
  border:1px solid var(--line-strong);
  padding:.85rem;
  background:var(--paper);
}
.portrait-frame::after{
  content:""; position:absolute; inset:-.9rem -.9rem auto auto;
  width:58%; height:58%;
  border-top:1px solid var(--gold); border-right:1px solid var(--gold);
  pointer-events:none;
}
.portrait-frame img{
  display:block; width:100%; height:auto;
  filter:saturate(.88) contrast(1.03);
}
.scholar-portrait figcaption{
  margin-top:1rem;
  font-size:.9rem; font-style:italic; color:var(--ink-soft);
}

/* — II · bibliography — */

.biblio{ list-style:none; }
.biblio-entry{
  display:grid;
  grid-template-columns:7rem minmax(0,1fr);
  gap:1.5rem;
  padding:2.1rem 0;
  border-bottom:1px solid var(--line);
  transition:background .4s var(--ease);
}
.biblio-entry:first-child{ border-top:1px solid var(--line-strong); }
.biblio-year{
  font-family:var(--mono);
  font-size:.82rem; font-weight:500; letter-spacing:.18em;
  color:var(--gold);
  padding-top:.5rem;
  font-variant-numeric:lining-nums;
}
.biblio-title{
  font-size:clamp(1.35rem, 2.4vw, 1.85rem);
  font-variation-settings:"opsz" 60;
  line-height:1.2;
  transition:color .35s var(--ease);
}
.biblio-title cite{ font-style:italic; }
.biblio-entry:hover .biblio-title{ color:var(--oxblood); }
.biblio-body p{ margin-top:.55rem; color:var(--ink-soft); max-width:58ch; }

/* — III · writer (night panel) — */

.writer{
  position:relative;
  background:var(--navy-deep);
  color:var(--paper);
  overflow:hidden;
}
#stars{ position:absolute; inset:0; width:100%; height:100%; }
.writer-inner{
  position:relative; z-index:2;
  max-width:72rem; margin:0 auto;
  padding:clamp(5.5rem, 12vw, 9rem) clamp(1.4rem, 5vw, 3rem);
  text-align:center;
}
.writer-inner .overline{ justify-content:center; margin-bottom:1.8rem; }
.writer h2{ color:var(--paper); }
.writer h2 em{ color:var(--gold-bright); }
.pen-name{
  font-family:var(--name-serif);
  font-style:italic;
  font-weight:600;
  font-size:1.22em;
  letter-spacing:.005em;
  word-spacing:-.22em;
}
.writer-quote{ margin:3rem auto 2.4rem; max-width:34ch; }
.writer-quote p{
  font-family:var(--serif);
  font-variation-settings:"opsz" 100;
  font-style:italic; font-weight:340;
  font-size:clamp(1.5rem, 3vw, 2.15rem);
  line-height:1.3;
  color:rgba(246,241,230,.92);
}
.writer-body{
  max-width:56ch; margin:0 auto 2.8rem;
  color:rgba(246,241,230,.78);
}
.writer-body em{ color:var(--gold-bright); }

/* — IV · practice — */

.practice-lede{
  max-width:64ch;
  font-size:1.13rem;
  margin-bottom:clamp(2.8rem, 5vw, 4rem);
}
.cases{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1.4rem;
  perspective:1200px;
}
.case{
  position:relative;
  display:flex; flex-direction:column;
  min-height:23rem;
  padding:1.7rem 1.6rem 1.5rem;
  background:var(--navy);
  color:var(--paper);
  text-decoration:none;
  border:1px solid rgba(212,175,90,.22);
  overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
  will-change:transform;
}
.case:hover, .case:focus-visible{
  border-color:rgba(212,175,90,.65);
  box-shadow:0 24px 50px -22px rgba(7,15,30,.55);
}
.case-no{
  font-family:var(--serif); font-style:italic;
  font-size:1rem; color:var(--gold-bright);
  margin-bottom:2.6rem;
}
.case-kicker{
  font-family:var(--mono); font-size:.62rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  color:rgba(246,241,230,.55);
  margin-bottom:.9rem;
}
.case-name{
  font-family:var(--serif);
  font-variation-settings:"opsz" 90;
  font-size:clamp(1.55rem, 2.2vw, 1.95rem);
  line-height:1.12;
  margin-bottom:1rem;
}
.case-desc{
  font-size:.96rem; line-height:1.6;
  color:rgba(246,241,230,.72);
  flex:1;
}
.case-cta{
  font-family:var(--mono); font-size:.64rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-bright);
  margin-top:1.8rem;
  padding-top:1.1rem;
  border-top:1px solid rgba(212,175,90,.3);
}
.case-sheen{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(34rem 22rem at var(--mx,50%) var(--my,-30%), rgba(212,175,90,.16), transparent 62%);
  opacity:0; transition:opacity .5s var(--ease);
}
.case:hover .case-sheen{ opacity:1; }
.practice-out{ margin-top:2.8rem; font-size:1.05rem; }

/* — V · notices — */

.press{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1.4rem;
}
.press li{
  border-top:1px solid var(--line-strong);
  padding-top:1.2rem;
}
.press-name{
  display:block;
  font-family:var(--serif);
  font-variation-settings:"opsz" 60;
  font-size:1.45rem;
  margin-bottom:.35rem;
}
.press-detail{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft);
}

/* ————— colophon ————— */

.colophon{
  background:var(--navy-deep);
  color:var(--paper);
  border-top:3px solid var(--gold);
}
.colophon-inner{
  max-width:72rem; margin:0 auto;
  padding:clamp(4.5rem, 9vw, 7rem) clamp(1.4rem, 5vw, 3rem) 3.5rem;
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(2.5rem, 6vw, 6rem);
}
.colophon .overline{ margin-bottom:1.4rem; }
.colophon h2{ color:var(--paper); font-size:clamp(2.2rem, 4vw, 3.2rem); }
.colophon h2 em{ color:var(--gold-bright); }
.colophon-body{ margin-top:1.4rem; color:rgba(246,241,230,.75); font-style:italic; }
.colophon-links{ margin-top:1.6rem; display:flex; flex-direction:column; gap:.7rem; align-items:flex-start; }
.colophon-links .link-arrow{ color:var(--gold-bright); border-color:rgba(212,175,90,.4); font-size:1.05rem; }
.colophon-links .link-arrow:hover{ color:var(--paper); border-color:var(--paper); }
.colophon-note p{ color:rgba(246,241,230,.68); font-size:.98rem; }
.colophon-note p+p{ margin-top:1.4rem; }
.colophon-fine{ font-family:var(--mono); font-size:.68rem !important; letter-spacing:.14em; text-transform:uppercase; line-height:2; }
.colophon-fine a{ color:var(--gold-bright); text-decoration:none; border-bottom:1px solid rgba(212,175,90,.4); }
.colophon-fine a:hover{ color:var(--paper); }

/* ————— responsive ————— */

@media (max-width: 900px){
  .masthead{ position:absolute; flex-direction:column; gap:.55rem; padding-top:.9rem; padding-bottom:.9rem; }
  .masthead.is-solid{ background:none; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; }
  .masthead.is-solid .mast-name{ color:var(--paper); }
  .masthead.is-solid .mast-nav a{ color:rgba(246,241,230,.78); }
  .mast-nav{ flex-wrap:wrap; justify-content:center; gap:.9rem 1.3rem; }
  .mast-nav a{ font-size:.6rem; }
  .hero{ padding-top:5.5rem; }
  .scholar-grid{ grid-template-columns:1fr; }
  .scholar-portrait{ max-width:26rem; }
  .cases{ grid-template-columns:1fr; }
  .case{ min-height:0; }
  .press{ grid-template-columns:1fr; }
  .colophon-inner{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .fields{ grid-template-columns:1fr; }
  .biblio-entry{ grid-template-columns:1fr; gap:.4rem; padding:1.6rem 0; }
  .biblio-year{ padding-top:0; }
  .hero-actions .btn{ width:100%; text-align:center; }
}