:root {
  --ms-teal-900:#0F4A4E; --ms-teal-800:#145C61; --ms-teal-700:#1D6C72;
  --ms-oxblood-900:#6A1F2C; --ms-oxblood-800:#7A2433; --ms-red-ink:#8D2235;
  --ms-gold-500:#C79A3B; --ms-brass-500:#B08D57; --ms-ochre-500:#C58A4C;
  --ms-cream-100:#F5EFE4; --ms-cream-200:#F2EADF; --ms-cream-300:#E8DDCC;
  --ms-espresso-900:#1F1714; --ms-ink-900:#171311; --ms-charcoal-800:#2A2320;
  --bg-page:#F2EADF; --bg-page-alt:#F5EFE4; --bg-panel-light:#E8DDCC;
  --bg-panel-dark:#0F4A4E; --bg-panel-warm:#C58A4C; --bg-panel-accent:#6A1F2C;
  --text-primary:#1F1714; --text-inverse:#F5EFE4; --text-accent:#0F4A4E;
  --text-secondary-accent:#6A1F2C; --line-brass:#B08D57; --line-gold:#C79A3B; --line-ink:#1F1714;
  --paint-teal:#0F4A4E; --paint-teal-bright:#145C61; --paint-oxblood:#6A1F2C;
  --paint-red-ink:#8D2235; --paint-gold:#C79A3B; --paint-brass:#B08D57;
  --paint-cream:#F2EADF; --paint-cream-deep:#E8DDCC; --paint-espresso:#1F1714;
  --shadow-soft:0 8px 24px rgba(31,23,20,.08);
  --shadow-medium:0 12px 30px rgba(31,23,20,.12);
  --shadow-deep:0 18px 40px rgba(31,23,20,.18);
  --teal: #0F4A4E;
  --oxblood: #6A1F2C;
  --cognac: #B9784A;
  --cream: #F2EADF;
  --espresso: #1F1714;
  --brass: #B08D57;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--espresso); font-family: Arial, sans-serif; }
a { color: inherit; text-underline-offset: .22em; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
header { background: var(--cream); display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 25px 5vw; border-bottom: 1px solid var(--brass); }
.brand { color: var(--teal); font: 700 1.35rem Georgia, serif; text-decoration: none; }
.brand:after { content: ""; display: block; height: 1px; background: var(--brass); margin-top: 8px; }
nav { display: flex; flex-wrap: wrap; gap: 14px 28px; }
nav a, .social a { font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .055em; }
nav a { color: var(--teal); }
nav a:hover { color: var(--teal); text-decoration-thickness: 2px; }
h1,h2,h3 { font-family: Georgia, serif; font-weight: 400; letter-spacing: -.035em; }
.hero { background: var(--cream); }
.hero > div:first-child { padding: clamp(3rem, 6vw, 5.5rem) 5vw clamp(2.5rem, 4vw, 4rem); }
.kicker { font: 700 .8rem/1.5 Arial, sans-serif; letter-spacing: .16em; color: var(--teal); }
.hero h1 { color: var(--espresso); font-size: clamp(3.4rem, 6.7vw, 7rem); line-height: .98; letter-spacing: -.04em; margin: 20px 0 28px; max-width: 1000px; }
.hero h1 em { color: var(--oxblood); font-weight: 400; }
.lede, .intro, .section p { font-family: Georgia, serif; line-height: 1.7; }
.lede { font-size: 1.2rem; max-width: 760px; }
.actions, .social { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.btn { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 14px 18px; border: 1px solid var(--espresso); font: 700 .8rem/1.4 Arial,sans-serif; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; }
.wine { background: var(--teal); color: var(--cream); border-color: var(--teal); }
.btn:hover { background: var(--cognac); color: var(--espresso); border-color: var(--cognac); }
.hero .social { color: var(--teal); padding-top: 22px; border-top: 1px solid var(--brass); max-width: 760px; }
/* A two-column graphic panel: the warm annotation column frames the words. */
.art { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; align-items: stretch; background: var(--espresso); color: var(--cream); border-block: 2px solid var(--brass); }
.paint { display: none; }
.art p { margin: 0; padding: 48px 7vw; font-size: clamp(2rem, 3.8vw, 3.75rem); line-height: 1.06; font-weight: 900; letter-spacing: -.025em; }
.art i { display: flex; align-items: end; margin: 0; padding: 48px clamp(1.5rem, 5vw, 5rem); background: var(--cognac); color: var(--espresso); border-left: 8px solid var(--oxblood); font: italic clamp(1.5rem, 3vw, 2.75rem)/1.25 Georgia,serif; }
.manifesto { background: var(--cream); color: var(--teal); padding: 36px 7vw; text-align: center; border-bottom: 1px solid var(--brass); font: italic clamp(1.45rem, 2.5vw, 2.5rem)/1.35 Georgia,serif; }
.section { padding: clamp(3rem, 6vw, 6rem) 5vw; border-bottom: 1px solid var(--brass); }
.section h2, .closing h2 { font-size: clamp(2.5rem, 4.7vw, 5.2rem); line-height: 1.06; margin: 18px 0 28px; }
.section h2 { color: var(--teal); }
#work h2 { color: var(--espresso); max-width: 1000px; }
.intro { max-width: 720px; font-size: 1.15rem; }
.cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; margin-top: 36px; align-items: stretch; }
.cards article, .books article { padding: clamp(24px, 3vw, 38px); border: 1px solid var(--brass); box-shadow: 0 18px 45px rgba(31,23,20,.08); height: auto; min-height: 0; }
.cards h3, .books h3 { font-size: clamp(2rem, 2.9vw, 2.8rem); line-height: 1.12; margin: 28px 0 20px; }
.cards small { display: block; margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--brass); font-size: .8rem; letter-spacing: .06em; font-weight: 700; }
.winebg { background: var(--teal); color: var(--cream); }
.cards .tealbg { background: var(--cream); color: var(--teal); border-top: 5px solid var(--oxblood); }
.cognacbg { background: var(--cognac); color: var(--espresso); border-top: 5px solid var(--oxblood) !important; }
.cognacbg small { border-color: var(--espresso); }
.writing { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; background: var(--cream); }
.books { display: grid; gap: 26px; }
.books article:first-child { border-left: 5px solid var(--oxblood); }
.books .tealbg { background: var(--teal); color: var(--cream); border-left: 5px solid var(--cognac); box-shadow: inset 0 1px 0 rgba(242,234,223,.08), 0 15px 30px rgba(31,23,20,.12); }
.books small { font-size: .8rem; line-height: 1.5; }
.textlink { font-weight: 700; color: var(--teal); }
.textlink:hover { color: var(--oxblood); }
.quote { background: var(--teal); color: var(--cream); padding: clamp(3rem, 5vw, 5rem) 7vw; border-block: 1px solid var(--brass); }
.quote:before { content: "“"; display: block; color: var(--brass); font: 5rem/.6 Georgia,serif; margin: 1rem 0; }
.quote blockquote { margin: 0; max-width: 1160px; font: italic clamp(1.45rem, 2.65vw, 2.6rem)/1.45 Georgia,serif; }
.quote cite { display: block; border-top: 1px solid var(--brass); margin-top: 26px; padding-top: 20px; color: var(--cream); font: 400 .875rem/1.5 Arial,sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.table { background: var(--cream); color: var(--espresso); }
.table .kicker { color: var(--oxblood); }
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; }
.pill { display: inline-block; padding: 12px 16px; background: var(--oxblood); color: var(--cream); border: 1px solid var(--oxblood); font-size: .8rem; font-weight: 700; letter-spacing: .09em; line-height: 1.5; }
.about { display: grid; grid-template-columns: .7fr 1.3fr; gap: 8vw; align-items: center; background: var(--cream); }
/* Saturated backing under the existing portrait; copy remains on paper. */
.about > div:first-child { position: relative; isolation: isolate; padding-bottom: 12px; }
.about > div:first-child:before { content: ""; position: absolute; z-index: -1; inset: 18% -18px 0 -18px; background: var(--espresso); border-bottom: 5px solid var(--oxblood); box-shadow: 0 18px 30px rgba(31,23,20,.12); }
.portrait { padding: 12px; background: var(--cream); border: 1px solid var(--brass); box-shadow: 10px 10px 0 var(--teal); transform: rotate(-1.5deg); }
.portrait img { display: block; width: 100%; }
.note { display: inline-block; margin: 24px 0 18px 14%; font: italic 1.25rem/1.4 Georgia,serif; color: var(--cream); transform: rotate(-5deg); }
.about .social { color: var(--teal); }
.closing { text-align: center; padding: clamp(3rem, 6vw, 6rem) 5vw; background: var(--teal); color: var(--cream); border-top: 1px solid var(--brass); }
.closing .kicker, .closing h2 { color: var(--cream); }
.closing > p { max-width: 700px; margin: 0 auto; font: 1.1rem/1.7 Georgia,serif; }
.closing .actions { justify-content: center; }
.closing .btn { border-color: var(--cream); color: var(--cream); background: transparent; }
.closing .wine { background: var(--cream); color: var(--teal); }
.closing .btn:hover { background: var(--cognac); color: var(--espresso); border-color: var(--cognac); }
footer { background: var(--espresso); color: var(--cream); border-top: 1px solid var(--brass); padding: 44px 5vw; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
footer strong, footer small { display: block; font-family: Georgia,serif; }
footer small { margin-top: 7px; line-height: 1.5; color: var(--cream); }
@media(max-width:1100px) { header { flex-wrap: wrap; } }
@media(max-width:850px) {
  header { display: block; }
  nav { margin-top: 18px; gap: 14px 20px; }
  nav a, .social a { font-size: .8rem; }
  .writing, .twocol, .about { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .section { padding: 52px 6vw; }
  .cards article { padding: 28px; }
  .cards h3, .books h3 { font-size: 2.25rem; }
  .cards h3 { margin-top: 22px; }
  footer { display: block; }
  footer > span { display: block; margin-top: 28px; }
  .about > div:first-child { max-width: 420px; width: 100%; }
  .about { gap: 40px; }
  .about > div:first-child:before { inset-inline: -10px; }
  .portrait { max-width: 420px; }
  .art { grid-template-columns: 1fr; }
  .art p { padding: 38px 7vw 28px; font-size: 2.3rem; }
  .art i { padding: 22px 7vw; border-left: 0; border-top: 2px solid var(--brass); background: var(--espresso); color: var(--cream); font-size: 1.8rem; }
  .art p { border-left: 12px solid var(--cognac); }
  .art i { border-left: 12px solid var(--oxblood); }
  .hero h1 { font-size: clamp(3.25rem, 10.8vw, 4.75rem); }
}
@media(max-width:520px) {
  .hero > div:first-child { padding: 38px 6vw 32px; }
  .hero h1 { font-size: clamp(2.9rem, 10.8vw, 3.25rem); line-height: .98; }
  .lede { font-size: 1.1rem; }
  .hero .actions { display: grid; gap: 14px; justify-items: stretch; }
  .hero .btn { width: 100%; }
  .hero .social { gap: 18px; }
  .section h2, .closing h2 { font-size: clamp(2.4rem, 10vw, 2.85rem); }
  .books article { padding: 26px; }
  .quote { padding: 44px 7vw; }
  .quote blockquote { font-size: 1.45rem; }
  .manifesto { padding: 30px 7vw; }
  .closing .actions { display: grid; }
  footer .social { line-height: 1.6; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Painterly editorial surfaces. Artwork lives behind, never over, readable copy. */
:root { --brush: url('assets/editorial-brush.png'); --halo: url('assets/portrait-halo.png'); }
body { background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(31,23,20,.018) 3px 4px); }
header, .hero h1, .hero .social, .manifesto, .section, .cards article, .books article, .closing, footer { position: relative; isolation: isolate; }
header { border: 0; }
.brand:after { display: none; }
header:after, .hero .social:after, .section:after, footer:before {
  content: ''; position: absolute; pointer-events: none; height: 7px; left: 5%; right: 5%; bottom: 0;
  background: var(--brass); mask: var(--brush) center / 100% 100% no-repeat;
}
.hero h1:after { content: ''; position: absolute; z-index: -1; inset: 60% 12% 2% 0; background: var(--teal); opacity: .1; mask: var(--brush) center / 100% 100% no-repeat; transform: rotate(-2deg); }
.hero .social { border: 0; padding-bottom: 26px; }
.hero .social:after { left: 0; right: 0; height: 5px; background: var(--espresso); }
.art { background: transparent; border: 0; padding: 34px 2vw; isolation: isolate; }
.art:before { content: ''; position: absolute; z-index: -1; inset: 0; background: var(--brush) center / 125% 140% no-repeat; }
.art p { border: 0; padding: 42px 7vw; }
.art i { background: none; border: 0; color: var(--cream); padding: 42px 7vw; align-items: center; }
.manifesto { border: 0; padding-block: 44px; }
.manifesto:before { content: ''; position: absolute; z-index: -1; left: 15%; right: 15%; top: 40%; height: 30%; background: var(--brass); mask: var(--brush) center / 100% 100% no-repeat; opacity: .16; }
.section { border: 0; background-color: transparent; }
.section:after { height: 5px; background: var(--espresso); opacity: .55; }
.cards article, .books article { border: 0 !important; box-shadow: none; background: transparent; }
.cards article:before, .books article:before { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: -8px -10px; }
.cards .winebg:before, .books .tealbg:before { background: var(--teal); mask: var(--brush) center / 125% 165% no-repeat; }
.cards .winebg { padding-left: clamp(32px,4vw,48px); }
.cards .tealbg:before { inset: -8px -10px; height: auto; background: var(--oxblood); mask: var(--brush) center / 125% 165% no-repeat; }
.cards .tealbg:after { content: ''; position: absolute; z-index: -1; right: 8%; left: 25%; bottom: 0; height: 9px; background: var(--brass); mask: var(--brush) center / 100% 100% no-repeat; opacity: .7; }
.cards .cognacbg:before { background: linear-gradient(135deg,rgba(185,120,74,.9),rgba(185,120,74,.55)); mask: var(--brush) center / 115% 130% no-repeat; }
.cards small { border: 0; }
.cards .winebg small { color: var(--cream); }
.books article:first-child:before { inset: 0 auto 0 -3px; width: 9px; background: var(--oxblood); mask: var(--brush) center / 100% 100% no-repeat; }
.books article:first-child h3 { text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.books .tealbg { padding: 38px; box-shadow: none; background: transparent; }
.quote { position: relative; isolation: isolate; background: transparent; border: 0; padding-block: clamp(4rem,6vw,6rem); }
.quote:after { content: ''; position: absolute; z-index: -1; inset: 0; background: var(--brush) center / 135% 165% no-repeat; }
.quote cite { border: 0; }
.quote cite:before { content: ''; display: block; width: 110px; height: 6px; background: var(--brass); mask: var(--brush) center / 100% 100% no-repeat; margin-bottom: 18px; }
.table .kicker { position: relative; isolation: isolate; display: inline-block; }
.table .kicker:before { content: ''; position: absolute; z-index: -1; inset: -6px -15px; background: var(--brass); opacity: .32; mask: var(--brush) center / 100% 100% no-repeat; }
.about > div:first-child:before { inset: -9% -6% 8%; background: var(--halo) center / 100% 100% no-repeat; border: 0; box-shadow: none; }
.portrait { border: 0; box-shadow: none; background: transparent; padding: 12px; }
.note { color: var(--espresso); }
.closing { border: 0; background: var(--teal); }
.closing:before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--brush) center / 100% 100% no-repeat; opacity: .3; }
.closing h2 { position: relative; isolation: isolate; }
.closing h2:after { content: ''; position: absolute; z-index: -1; height: 8px; width: 150px; bottom: -12px; left: calc(50% - 75px); background: var(--oxblood); mask: var(--brush) center / 100% 100% no-repeat; }
footer { border: 0; }
footer:before { top: 0; bottom: auto; height: 9px; }
@media(max-width:850px) {
  .art { padding: 32px 0; }
  .art p { padding: 30px 9vw 12px; }
  .art i { padding: 22px 9vw 30px; }
  .cards { gap: 34px; }
  .cards article { padding: 34px; }
  .about > div:first-child:before { inset: -6% -4% 8%; }
}
@media(max-width:520px) {
  .hero h1:after { opacity: .07; }
  .manifesto:before { opacity: .11; }
  .books .tealbg { padding: 32px; }
  .quote { padding: 58px 9vw; }
}
.books .tealbg:before { background: var(--ms-ink-900); }
.cards .tealbg { color: var(--text-inverse); background: transparent; }
.cards .tealbg:after { background: var(--paint-gold); bottom: 8px; height: 7px; }
.cards .winebg:after { content: ''; position: absolute; z-index: -1; pointer-events:none; top: -9px; left: 8%; width: 68%; height: 15px; background: var(--paint-gold); mask: var(--brush) center / 100% 100% no-repeat; transform:rotate(-3deg); }
.cards .cognacbg:before { background: linear-gradient(125deg,var(--ms-ochre-500),var(--ms-cream-300)); }
.cards .cognacbg:after { content:''; position:absolute; z-index:-1; bottom:0; right:0; width:50%; height:16px; background:var(--paint-oxblood); mask:var(--brush) center / 100% 100% no-repeat; }
.hero h1:after { background:var(--paint-gold); opacity:.22; }
.hero .wine { background:var(--bg-panel-accent); border-color:var(--bg-panel-accent); }
.hero .social:after { height:12px; background:var(--paint-oxblood); }
.hero > div:first-child { position:relative; isolation:isolate; }
.hero > div:first-child:after { content:''; position:absolute; z-index:-1; right:4%; top:20%; width:22%; height:40%; background:var(--halo) center/contain no-repeat; opacity:.08; mask:linear-gradient(90deg,transparent,#000); }
.art { overflow:hidden; }
.art:before { background-image:url('assets/mixed-media-sweep.png'); }
.manifesto:before { background:var(--paint-gold); opacity:.22; }
.manifesto:after { content:''; position:absolute; z-index:-1; bottom:12px; right:10%; width:22%; height:10px; background:var(--paint-red-ink); mask:var(--brush) center/100% 100% no-repeat; }
.writing:after { background:var(--paint-oxblood); opacity:1; height:10px; }
.books article:first-child:before { width:14px; }
.quote:after { background-image:url('assets/mixed-media-sweep.png'); }
.quote:before { color:var(--paint-gold); }
.table .kicker:before { background:var(--paint-gold); opacity:.45; }
.table:after { background:var(--paint-red-ink); height:8px; opacity:.9; }
.portrait { transform:none; padding:12px; }
.portrait img { position:relative; z-index:1; }
.about > div:first-child:before { inset:-4% -5% 10%; }
.note { position:relative; isolation:isolate; margin-top:16px; padding:8px 16px; color:var(--text-inverse); }
.note:before { content:''; position:absolute; z-index:-1; inset:-8px -18px; background:var(--paint-oxblood); mask:var(--brush) center/120% 145% no-repeat; }
.closing { background:var(--ms-ink-900); }
.closing:before { background-image:url('assets/mixed-media-sweep.png'); background-size:120% 150%; opacity:.8; }
.closing h2:after { background:var(--paint-gold); }
footer { background:var(--ms-teal-900); color:var(--text-inverse); }
footer:before { height:12px; background:var(--paint-gold); }
@media(max-width:640px) {
 .hero > div:first-child:after { display:none; }
 .hero h1:after { opacity:.17; }
 .cards .winebg:after { height:10px; }
 .note { margin-left:12%; }
}