/** Design philosophy: Caderno Noturno — literary editorialism in charcoal ink, old paper and margin red. */
:root { --ink:#171715; --ink-soft:#211f1b; --smoke:#918c81; --paper:#e9e1d1; --paper-muted:#b9ae9d; --paper-deep:#d7ccba; --red:#b23a2e; --red-bright:#c94b3e; --line-dark:rgba(233,225,209,.19); --line-light:rgba(23,23,21,.16); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; background:var(--ink); } body { margin:0; overflow-x:hidden; background:var(--ink); color:var(--paper); font-family:"Source Sans 3",Arial,sans-serif; } button { font:inherit; cursor:pointer; } a { color:inherit; text-decoration:none; } ::selection { background:var(--red); color:var(--paper); }
.site-header { position:absolute; z-index:10; top:0; left:0; width:100%; min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:22px; padding:18px clamp(22px,4vw,66px); border-bottom:1px solid rgba(233,225,209,.19); color:var(--paper); }
.brand { display:flex; align-items:center; gap:12px; font:11px/1.05 "DM Mono",monospace; letter-spacing:.12em; text-transform:uppercase; }.brand-mark { display:inline-block; color:var(--red-bright); font:31px/.7 "DM Serif Display",Georgia,serif; letter-spacing:-.16em; }.nav-links { display:flex; align-items:center; gap:clamp(13px,2vw,29px); font:10px/1 "DM Mono",monospace; letter-spacing:.095em; text-transform:uppercase; }.nav-links>a { opacity:.77; transition:opacity 160ms ease,color 160ms ease; }.nav-links>a:hover { color:var(--red-bright); opacity:1; }.nav-admin { padding:9px 11px; border:1px solid rgba(233,225,209,.45); opacity:1!important; }.menu-trigger { display:none; align-items:center; gap:9px; border:0; background:transparent; color:var(--paper); font:500 10px/1 "DM Mono",monospace; letter-spacing:.1em; text-transform:uppercase; }.menu-trigger b { color:var(--red-bright); font-size:18px; font-weight:400; }
.hero-section { position:relative; min-height:820px; height:max(100svh,820px); overflow:hidden; background:#090a09; }.hero-image { position:absolute; inset:0; background-position:center; background-size:cover; filter:saturate(.76) contrast(1.1); transform:scale(1.012); }.hero-scrim { position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,7,7,.91) 0%,rgba(8,9,8,.75) 32%,rgba(10,9,8,.2) 70%,rgba(10,9,8,.18) 100%),linear-gradient(0deg,rgba(10,9,8,.7),transparent 30%); }.hero-section:after { position:absolute; inset:0; opacity:.15; background-image:radial-gradient(rgba(255,255,255,.35) .6px,transparent .6px); background-size:5px 5px; content:""; mix-blend-mode:soft-light; pointer-events:none; }.hero-rail { position:absolute; z-index:2; top:93px; bottom:0; left:clamp(22px,4vw,66px); width:24px; display:flex; justify-content:space-between; border-left:1px solid rgba(233,225,209,.34); padding:23px 0 30px 13px; }.hero-rail span { color:rgba(233,225,209,.72); font:9px/1 "DM Mono",monospace; letter-spacing:.08em; writing-mode:vertical-rl; text-transform:uppercase; }.hero-content { position:relative; z-index:2; width:min(820px,calc(100% - 66px)); margin-left:clamp(55px,12.8vw,220px); padding-top:clamp(224px,31vh,320px); }.section-label { display:flex; align-items:center; gap:9px; margin:0 0 24px; color:var(--red-bright); font:500 10px/1.25 "DM Mono",monospace; letter-spacing:.12em; text-transform:uppercase; }.section-label i { width:28px; height:1px; background:currentColor; }.hero-content h1 { display:flex; flex-direction:column; margin:0; color:#f2eadb; font:400 clamp(76px,11.6vw,176px)/.765 "DM Serif Display",Georgia,serif; letter-spacing:-.065em; }.hero-content h1 span+span { align-self:flex-end; margin-right:clamp(0px,8vw,135px); font-style:italic; }.hero-lead { width:min(320px,100%); margin:47px 0 24px; color:var(--paper-deep); font-size:clamp(18px,1.55vw,23px); line-height:1.32; }.primary-link { display:inline-flex; align-items:center; gap:8px; padding:12px 0; border-bottom:1px solid var(--red); color:var(--paper); font:500 10px/1 "DM Mono",monospace; letter-spacing:.105em; text-transform:uppercase; transition:color 160ms ease,gap 160ms ease; }.primary-link:hover { gap:13px; color:var(--red-bright); }.hero-footer { position:absolute; z-index:2; right:clamp(22px,4vw,66px); bottom:28px; left:clamp(55px,12.8vw,220px); display:flex; justify-content:space-between; gap:20px; color:rgba(233,225,209,.73); font:10px/1.2 "DM Mono",monospace; letter-spacing:.095em; text-transform:uppercase; }.pulse-word { color:var(--red-bright); }
.page-section { display:grid; grid-template-columns:clamp(75px,11.2vw,184px) minmax(0,1fr); }.section-aside { display:flex; flex-direction:column; justify-content:space-between; gap:70px; min-height:100%; border-right:1px solid var(--line-light); padding:40px 17px; color:#746e63; font:10px/1 "DM Mono",monospace; letter-spacing:.08em; }.section-aside span:last-child { writing-mode:vertical-rl; }.about-section { position:relative; overflow:hidden; background:var(--paper); color:var(--ink); padding-bottom:clamp(70px,11vw,160px); }.about-section:after { position:absolute; right:-7vw; bottom:-9vw; color:rgba(178,58,46,.09); content:"( ( ("; font:400 clamp(240px,41vw,620px)/.7 "DM Serif Display",Georgia,serif; letter-spacing:-.17em; pointer-events:none; }.about-copy { position:relative; z-index:1; width:min(705px,100%); padding:clamp(95px,11vw,165px) clamp(25px,7vw,112px) 0; }.about-copy .section-label,.resume-content .section-label { color:var(--red); } h2 { margin:0; font:400 clamp(45px,6vw,88px)/.93 "DM Serif Display",Georgia,serif; letter-spacing:-.052em; } h2 em { font-style:italic; }.reading-copy { margin-top:46px; color:#4b473f; font-size:17px; line-height:1.65; }.reading-copy p { margin:0 0 18px; }.text-link { display:inline-flex; align-items:center; gap:5px; margin-top:22px; border-bottom:1px solid currentColor; padding-bottom:4px; color:var(--ink); font:500 10px/1 "DM Mono",monospace; letter-spacing:.095em; text-transform:uppercase; transition:color 160ms ease,gap 160ms ease; }.text-link:hover { gap:10px; color:var(--red); }.author-note { position:absolute; z-index:1; top:clamp(102px,17vw,225px); right:clamp(25px,8vw,130px); width:min(245px,24vw); border-top:2px solid var(--red); padding-top:17px; }.note-marker { display:block; margin-bottom:25px; color:var(--red); font:400 42px/.7 "DM Serif Display",Georgia,serif; letter-spacing:-.15em; }.author-note p { margin:0; font:400 18px/1.28 "DM Serif Display",Georgia,serif; }.note-reference { display:block; margin-top:28px; color:#817a6e; font:10px/1 "DM Mono",monospace; letter-spacing:.1em; }
.saga-section { display:grid; grid-template-columns:minmax(320px,.86fr) minmax(400px,1.14fr); min-height:750px; background:var(--ink-soft); }.saga-art { min-height:630px; background-position:center; background-size:cover; filter:saturate(.82) contrast(1.06); }.saga-copy { padding:clamp(75px,10vw,150px) clamp(28px,7vw,120px) clamp(75px,10vw,140px); }.saga-copy h2 { color:var(--paper); }.saga-intro { max-width:580px; margin:39px 0 0; color:var(--paper); font:400 clamp(23px,2.1vw,31px)/1.26 "DM Serif Display",Georgia,serif; }.saga-copy .reading-copy { max-width:614px; color:var(--paper-muted); }.reader-note { max-width:612px; margin-top:47px; border-top:1px solid var(--line-dark); padding-top:17px; }.reader-note span { color:var(--red-bright); font:10px/1 "DM Mono",monospace; letter-spacing:.11em; text-transform:uppercase; }.reader-note p { margin:14px 0 0; color:var(--paper); font-size:15px; font-style:italic; line-height:1.55; }
.works-section { background:#d7ccba; color:var(--ink); }.works-main { padding:clamp(68px,9vw,128px) clamp(25px,6vw,100px) clamp(75px,10vw,145px); }.works-heading { display:flex; justify-content:space-between; gap:50px; max-width:1030px; }.works-heading>p { width:min(285px,32%); margin:43px 0 0; color:#595348; font-size:16px; line-height:1.48; }.filter-list { display:flex; flex-wrap:wrap; gap:7px; margin:72px 0 20px; }.filter-list button { border:1px solid rgba(23,23,21,.3); background:transparent; padding:8px 12px; color:#514a40; font:500 10px/1 "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; transition:background 150ms ease,color 150ms ease,border 150ms ease; }.filter-list button:hover,.filter-list .filter-active { border-color:var(--red); background:var(--red); color:var(--paper); }.works-list { border-top:1px solid var(--line-light); }.work-row { display:grid; grid-template-columns:55px 105px minmax(180px,1.15fr) 130px minmax(180px,.85fr) 24px; align-items:center; gap:20px; min-height:118px; border-bottom:1px solid var(--line-light); color:var(--ink); transition:padding 190ms cubic-bezier(.23,1,.32,1),background 190ms ease,color 190ms ease; }.work-row:hover { background:var(--ink); padding:0 18px; color:var(--paper); }.work-index,.work-kind,.work-edition { color:#71695d; font:10px/1.35 "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }.work-row:hover .work-index,.work-row:hover .work-kind,.work-row:hover .work-edition { color:var(--paper-muted); }.work-title { font:400 clamp(26px,2.6vw,38px)/1 "DM Serif Display",Georgia,serif; letter-spacing:-.04em; }.work-featured .work-title { font-style:italic; }.work-description { color:#5a5449; font-size:14px; line-height:1.35; }.work-row:hover .work-description { color:var(--paper-muted); }.work-arrow { justify-self:end; color:var(--red); }
.notes-section { display:grid; grid-template-columns:minmax(320px,.8fr) minmax(400px,1.2fr); background:var(--paper); color:var(--ink); }.notes-heading { min-height:570px; padding:clamp(74px,10vw,130px) clamp(28px,7vw,115px); border-right:1px solid var(--line-light); }.notes-heading .section-label { color:var(--red); }.notes-heading>p:last-child { max-width:340px; margin:34px 0 0; color:#5b554b; font-size:17px; line-height:1.45; }.notes-list { display:flex; flex-direction:column; justify-content:center; padding:clamp(38px,7vw,115px); }.empty-note { display:flex; align-items:flex-start; gap:18px; color:var(--red); }.empty-note>b { font-size:23px; }.empty-note p { margin:0; color:var(--ink); font:400 29px/1.13 "DM Serif Display",Georgia,serif; letter-spacing:-.03em; }.empty-note span { color:#71695d; font:400 17px/1.4 "Source Sans 3",Arial,sans-serif; letter-spacing:0; }.news-entry { display:grid; grid-template-columns:96px minmax(170px,1fr) minmax(160px,.8fr) 20px; align-items:center; gap:23px; border-top:1px solid var(--line-light); padding:22px 0; transition:color 160ms ease,padding 160ms ease; }.news-entry:last-child { border-bottom:1px solid var(--line-light); }.news-entry:hover { padding-left:12px; color:var(--red); }.news-entry span { color:#736c60; font:10px/1.3 "DM Mono",monospace; letter-spacing:.08em; }.news-entry h3 { margin:0; font:400 27px/1 "DM Serif Display",Georgia,serif; letter-spacing:-.03em; }.news-entry p { margin:0; color:#615a50; font-size:14px; line-height:1.35; }.news-entry b { font-size:18px; font-weight:400; }
.custom-section { display:grid; grid-template-columns:10.8vw minmax(265px,1fr) minmax(260px,.9fr); gap:clamp(23px,6vw,95px); position:relative; overflow:hidden; background:var(--red); padding:clamp(72px,9vw,125px) clamp(25px,7vw,112px); color:#fbf0de; }.custom-section h2 { max-width:500px; }.custom-section .section-label { color:#fbe7d3; }.custom-rule { position:absolute; top:0; bottom:0; left:clamp(25px,7vw,112px); width:1px; background:rgba(251,240,222,.36); }.custom-copy { padding-top:43px; }.custom-copy>p { max-width:430px; margin:0; font-size:18px; line-height:1.52; }.custom-copy .text-link { color:#fbf0de; }.resume-section { background:var(--ink); color:var(--paper); }.resume-section .section-aside { border-color:var(--line-dark); color:var(--paper-muted); }.resume-content { width:min(700px,100%); padding:clamp(80px,11vw,155px) clamp(25px,7vw,112px); }.resume-content p:not(.section-label) { max-width:440px; margin:39px 0 27px; color:var(--paper-muted); font-size:18px; line-height:1.5; }.resume-status { display:inline-block; margin-top:3px; border:1px solid rgba(233,225,209,.3); padding:10px; color:var(--paper-muted); font:10px/1 "DM Mono",monospace; letter-spacing:.09em; }
.contact-section { display:grid; grid-template-columns:clamp(75px,11.2vw,184px) 1fr; min-height:645px; position:relative; overflow:hidden; background:#c7b9a4; color:var(--ink); }.contact-section:after { position:absolute; right:-5vw; bottom:-10vw; color:rgba(178,58,46,.1); content:") ) )"; font:400 clamp(260px,46vw,700px)/.7 "DM Serif Display",Georgia,serif; letter-spacing:-.2em; }.contact-number { position:relative; z-index:1; border-right:1px solid var(--line-light); padding:40px 17px; color:#72695e; font:10px/1 "DM Mono",monospace; letter-spacing:.08em; writing-mode:vertical-rl; }.contact-content { position:relative; z-index:1; padding:clamp(78px,10vw,135px) clamp(25px,7vw,114px) 60px; }.contact-content .section-label { color:var(--red); }.contact-email { display:inline-flex; align-items:center; gap:10px; margin-top:47px; border-bottom:2px solid var(--red); padding-bottom:8px; font:400 clamp(23px,3.1vw,43px)/1 "DM Serif Display",Georgia,serif; letter-spacing:-.035em; transition:color 160ms ease,gap 160ms ease; }.contact-email:hover { gap:16px; color:var(--red); }.contact-meta { display:flex; flex-wrap:wrap; gap:25px; margin-top:36px; color:#574d41; font:500 10px/1 "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }.contact-meta a { border-bottom:1px solid transparent; padding-bottom:4px; transition:border 160ms ease,color 160ms ease; }.contact-meta a:hover { border-color:var(--red); color:var(--red); }.site-footer { display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:20px; border-top:1px solid var(--line-dark); background:var(--ink); padding:25px clamp(22px,4vw,66px); color:var(--paper-muted); font:10px/1.3 "DM Mono",monospace; letter-spacing:.075em; text-transform:uppercase; }.footer-brand { display:flex; align-items:center; gap:10px; color:var(--paper); }.footer-brand span { color:var(--red-bright); font:28px/.7 "DM Serif Display",Georgia,serif; letter-spacing:-.15em; }.site-footer p { margin:0; text-align:center; }
@media (max-width:850px) { .site-header { min-height:74px; padding:13px 20px; }.menu-trigger { position:relative; z-index:12; display:flex; }.nav-links { position:absolute; top:0; right:0; left:0; display:none; align-items:stretch; gap:0; border-bottom:1px solid var(--line-dark); background:rgba(23,23,21,.98); padding:84px 20px 20px; }.nav-links.nav-open { display:flex; flex-direction:column; }.nav-links>a { border-top:1px solid var(--line-dark); padding:14px 0; opacity:1; }.nav-admin { margin-top:9px; border-color:rgba(233,225,209,.38); padding:12px 10px!important; }.hero-section { min-height:720px; height:100svh; }.hero-rail { top:74px; left:20px; }.hero-content { width:calc(100% - 69px); margin-left:50px; padding-top:max(25vh,195px); }.hero-content h1 { font-size:clamp(72px,18vw,130px); }.hero-content h1 span+span { margin-right:0; }.hero-lead { margin-top:36px; }.hero-footer { right:20px; bottom:18px; left:50px; font-size:8px; }.page-section { grid-template-columns:52px minmax(0,1fr); }.section-aside { padding:27px 12px; }.about-copy { padding:78px 25px 0; }.author-note { position:relative; top:auto; right:auto; width:auto; margin:52px 25px 0 77px; }.saga-section,.notes-section { grid-template-columns:1fr; }.saga-art { min-height:510px; }.saga-copy { padding:70px 25px; }.works-main { padding:70px 22px 82px; }.works-heading { display:block; }.works-heading>p { width:auto; margin:27px 0 0; }.filter-list { margin-top:52px; }.work-row { grid-template-columns:35px minmax(0,1fr) 20px; gap:10px; min-height:103px; }.work-kind { grid-column:2; grid-row:1; align-self:end; }.work-index { grid-row:1/3; }.work-title { grid-column:2; grid-row:2; align-self:start; }.work-edition,.work-description { display:none; }.work-arrow { grid-column:3; grid-row:1/3; }.notes-heading { min-height:auto; padding:72px 25px 52px; border-right:0; border-bottom:1px solid var(--line-light); }.notes-list { padding:45px 25px 65px; }.news-entry { grid-template-columns:76px 1fr 19px; gap:14px; }.news-entry h3 { font-size:24px; }.news-entry p { display:none; }.custom-section { grid-template-columns:1fr; gap:17px; padding:72px 25px; }.custom-rule { left:25px; }.custom-section>div:not(.custom-rule) { margin-left:25px; }.custom-copy { padding-top:4px; }.resume-content { padding:79px 25px; }.contact-section { grid-template-columns:52px 1fr; min-height:590px; }.contact-number { padding:27px 12px; }.contact-content { padding:77px 25px 50px; }.site-footer { grid-template-columns:1fr auto; padding:21px; }.site-footer p { display:none; } }
@media (max-width:480px) { .hero-content h1 { font-size:70px; }.hero-lead { font-size:18px; } h2 { font-size:45px; }.contact-email { font-size:22px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { transition-duration:.01ms!important; animation-duration:.01ms!important; } }