:root{--paper:#f6f4ee;--ink:#181a18;--muted:#676862;--line:#c9c8bf;--signal:#cf4c37;--panel:#e5e2d8}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible{outline:2px solid var(--signal);outline-offset:5px}
.site-shell{max-width:1550px;padding:0 clamp(20px,5vw,88px);margin:auto}
.masthead{height:94px;border-bottom:1px solid var(--ink);display:flex;align-items:center;gap:24px}
.wordmark{text-decoration:none;font-weight:900;letter-spacing:-.09em;font-size:34px;line-height:1}
.wordmark-period{color:var(--signal)}
.masthead-detail{font-size:10px;font-weight:700;letter-spacing:.11em;color:var(--muted);margin-left:24px}
nav{margin-left:auto;display:flex;gap:30px}
nav a,footer a{font-size:11px;letter-spacing:.075em;text-decoration:none;font-weight:700}
nav a:hover,footer a:hover{text-decoration:underline;text-underline-offset:4px}
.hero{padding:110px 0 57px;border-bottom:1px solid var(--ink)}
.hero-topline,.scroll-cue,.section-heading>span,.preview-stamp,.placeholder-bottom,.quote-note,.writing-sub,.contact-label,.contact-bottom>span,footer,.archive-footnote{font-size:10px;line-height:1.5;letter-spacing:.115em;font-weight:700}
.hero-topline{display:flex;align-items:center;gap:10px;color:var(--muted)}
.signal-dot{width:8px;height:8px;border-radius:50%;background:var(--signal);display:inline-block}
h1,h2,p,blockquote{margin:0}
h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(54px,8.3vw,142px);font-weight:400;letter-spacing:-.073em;line-height:.99;margin:43px 0 85px;max-width:1280px}
h1 em,.contact h2 em{font-weight:400}
.hero-bottom{display:flex;align-items:end;justify-content:space-between;gap:20px}
.hero-bottom p{font-family:Georgia,'Times New Roman',serif;font-size:clamp(18px,2.15vw,28px)}
.scroll-cue{color:var(--muted);white-space:nowrap}
.scroll-cue span{font-size:19px;vertical-align:-2px;color:var(--ink)}
.fragments{padding:32px 0 92px}
.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:33px}
.section-heading h2{font-size:13px;letter-spacing:-.01em;font-weight:700}
.section-heading>span{color:var(--muted);text-align:right}
.editorial-grid{display:grid;grid-template-columns:1.2fr .8fr;column-gap:24px;row-gap:48px}
.fragment{min-width:0}
.image-placeholder,.quote-field,.writing-field{position:relative;overflow:hidden;min-height:260px}
.image-placeholder{display:flex;flex-direction:column;justify-content:space-between}
.cinematic{aspect-ratio:1.43;background:#202321;color:#eeece4;padding:24px}
.cinematic:after{content:"";position:absolute;inset:0;opacity:.14;background-image:repeating-linear-gradient(0deg,transparent 0,transparent 2px,#8d9187 3px,transparent 4px);pointer-events:none}
.cinematic .preview-stamp{color:#c5c6ba;z-index:1}
.large-placeholder{font-family:Georgia,serif;font-size:clamp(90px,16vw,270px);line-height:.8;letter-spacing:-.11em;text-align:center;align-self:center;font-style:italic;font-weight:400;margin:auto 0}
.large-placeholder span{font-family:Arial,sans-serif;letter-spacing:.07em;font-size:12px;font-style:normal;padding-left:14px}
.placeholder-bottom{color:#bbbdb5;z-index:1}
.corner-mark{position:absolute;bottom:24px;right:24px;font-size:42px;color:var(--signal)}
.photograph{aspect-ratio:1.03;background:#d7d1c4;color:var(--ink);padding:24px}
.photo-outline{border:1px solid rgba(29,29,26,.3);position:absolute;inset:25% 13% 18%;overflow:hidden}
.photo-outline span:first-child{width:36%;height:110%;background:#bbb2a4;display:block;position:absolute;bottom:-32%;left:24%;border-radius:55% 55% 0 0;transform:rotate(-8deg)}
.photo-outline span:nth-child(2){width:75px;height:75px;border-radius:50%;background:#a9a291;position:absolute;top:10%;right:17%}
.photo-outline i{display:block;position:absolute;right:7%;bottom:10%;width:64px;height:46px;border:3px solid #3f453e;border-radius:5px;transform:rotate(-13deg)}
.photo-outline i:before{content:"";position:absolute;left:17px;top:8px;border:2px solid #3f453e;border-radius:50%;height:21px;width:21px}
.photo-hint{position:absolute;right:24px;bottom:24px;font-size:11px;letter-spacing:.13em;font-weight:700}
.fragment-caption{display:flex;justify-content:space-between;gap:12px;padding-top:12px}
.fragment-caption span{font-size:10px;letter-spacing:.11em;font-weight:700;color:var(--muted);white-space:nowrap}
.fragment-caption p{font-size:13px;text-align:right}
.quote-field{background:#cc503d;color:#171813;aspect-ratio:1.34;padding:24px;display:flex;flex-direction:column}
.quote-field blockquote{font-family:Georgia,serif;font-size:clamp(37px,5vw,80px);line-height:1.07;letter-spacing:-.055em;margin:auto 0;font-style:italic}
.quote-note{font-size:9px}
.writing-field{background:#e7e4da;aspect-ratio:1.43;padding:24px;display:flex;flex-direction:column}
.paper-line{height:1px;background:#b4b0a3;margin:16px 0 auto}
.writing-big{font-family:Georgia,serif;font-size:clamp(31px,4.2vw,66px);line-height:1.11;letter-spacing:-.045em;margin-bottom:auto}
.writing-sub{padding-top:18px;color:#66645f}
.archive-footnote{color:var(--muted);margin:42px 0 0;text-align:right}
.contact{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:36px 0 42px}
.contact-label{color:var(--muted)}
.contact h2{font-family:Georgia,serif;font-size:clamp(70px,10vw,154px);font-weight:400;line-height:.94;letter-spacing:-.075em;margin:35px 0 35px}
.email-placeholder{color:var(--signal);font-size:clamp(15px,2.2vw,25px);font-weight:700;letter-spacing:-.025em}
.email-placeholder a{text-decoration:none;border-bottom:2px solid currentColor}
.contact-bottom{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-top:90px}
.contact-bottom p{font-size:13px;max-width:370px;line-height:1.45}
.contact-bottom>span{text-align:right;color:var(--muted)}
footer{display:flex;justify-content:space-between;gap:16px;padding:25px 0 65px;color:var(--muted)}
footer a{color:var(--ink)}
@media(max-width:850px){.masthead-detail{display:none}.hero{padding-top:75px}.editorial-grid{grid-template-columns:1fr 1fr;gap:26px 14px}.cinematic,.photograph,.quote-field,.writing-field{min-height:260px}.quote-field blockquote{font-size:clamp(30px,4.5vw,55px)}.writing-big{font-size:clamp(26px,4.5vw,55px)}}
@media(max-width:620px){.site-shell{padding:0 18px}.masthead{height:76px}.wordmark{font-size:29px}nav{gap:17px}nav a{font-size:10px}.hero{padding:79px 0 43px}.hero h1{font-size:clamp(54px,12.7vw,86px);margin:33px 0 65px}.hero-bottom{align-items:start;flex-direction:column;gap:30px}.fragments{padding-bottom:60px}.section-heading{flex-direction:column;gap:5px}.section-heading>span{text-align:left;font-size:9px}.editorial-grid{grid-template-columns:1fr;row-gap:29px}.cinematic{aspect-ratio:1.23}.large-placeholder{font-size:clamp(110px,29vw,220px)}.photograph{aspect-ratio:1.1}.quote-field{aspect-ratio:1.2}.quote-field blockquote{font-size:clamp(48px,11vw,76px)}.writing-field{aspect-ratio:1.16}.writing-big{font-size:clamp(43px,9vw,70px)}.archive-footnote{text-align:left}.contact h2{font-size:clamp(65px,14vw,100px)}.contact-bottom{flex-direction:column;align-items:start;margin-top:62px}.contact-bottom>span{text-align:left}footer{flex-wrap:wrap;font-size:9px;padding-bottom:33px}footer span:nth-child(2){order:3;width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Real picture: never crop away the sight gag. */
.real-photo-frame{background:#ddd9cd;line-height:0;overflow:hidden;aspect-ratio:2115 / 1190}
.real-photo{display:block;width:100%;height:100%;object-fit:contain}
/* A pair of rave reviews that cannot agree whether this is good news. */
.quote-field.endorsements{aspect-ratio:1.25;padding:clamp(16px,2vw,26px)}
.endorsement-stack{display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,2.8vw,36px);flex:1;padding:15px 0 5px}
.endorsement{display:flex;flex-direction:column;gap:10px}
.endorsement + .endorsement{border-top:1px solid rgba(24,26,24,.45);padding-top:clamp(18px,2.8vw,36px)}
.quote-field.endorsements blockquote{font-family:Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(25px,3.1vw,49px);line-height:1.06;letter-spacing:-.055em;margin:0}
.endorsement span{font-size:10px;letter-spacing:.09em;font-weight:700;line-height:1.5}
@media(max-width:620px){
 .hero h1{font-size:clamp(50px,11.6vw,78px)}
 .quote-field.endorsements{aspect-ratio:1.18}
 .quote-field.endorsements blockquote{font-size:clamp(28px,8vw,44px)}
}

/* Three-sentence introduction: unobtrusive, and easy to understand. */
.hero-bottom .recording-note{max-width:760px;line-height:1.36;letter-spacing:-.018em}
@media(max-width:620px){.hero-bottom .recording-note{font-size:clamp(17px,4.2vw,22px);line-height:1.48}}

/* Video lives in the second fragment; it plays from the original YouTube upload. */
.real-video-frame{width:100%;aspect-ratio:16/9;position:relative;background:#181a18;overflow:hidden}
.real-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.video-link{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.video-link:hover{color:var(--signal)}

/* A spare VHS-flavored cover: the actual YouTube video appears only after play is clicked. */
.video-poster{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;width:100%;height:100%;border:0;text-align:left;cursor:pointer;padding:clamp(14px,1.8vw,25px);color:#e6e6d9;background:#161a17;position:relative;overflow:hidden;font-family:Arial,Helvetica,sans-serif}
.video-poster::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(215,219,208,.09) 4px, transparent 5px),linear-gradient(145deg,transparent 30%,rgba(240,230,188,.11) 55%,transparent 85%);opacity:.5;pointer-events:none}
.video-poster:focus-visible{outline:3px solid var(--signal);outline-offset:-4px}
.video-poster:hover .play-video{background:#e5e3d8;color:#161a17}
.vhs-topline,.vhs-bottomline{font-size:clamp(9px,1vw,12px);letter-spacing:.11em;font-weight:700;line-height:1.4;position:relative;z-index:1;display:flex;gap:8px;justify-content:space-between;align-items:center}
.rec-dot{color:#d85c46}
.video-poster-title{font-family:Georgia,'Times New Roman',serif;font-size:clamp(50px,7.1vw,105px);line-height:.88;letter-spacing:-.075em;margin:auto 0;position:relative;z-index:1}
.video-poster-title em{font-weight:400}
.play-video{border:1px solid #e5e3d8;padding:7px 9px;white-space:nowrap;transition:background .15s,color .15s}
.video-iframe{width:100%;height:100%;display:block;position:absolute;inset:0;border:0}
@media(max-width:620px){.video-poster-title{font-size:clamp(65px,13vw,98px)}.vhs-topline,.vhs-bottomline{font-size:9px}}

/* An old newspaper artifact: the printed work is visible without requiring a bio. */
.print-photo-frame{background:#e2ded4;line-height:0;overflow:hidden}
.print-photo-frame img{display:block;width:100%;height:auto}
.print-detail{border-top:1px solid var(--line);margin-top:16px;padding-top:12px}
.print-detail summary{font-size:10px;letter-spacing:.115em;font-weight:700;color:var(--muted);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:8px}
.print-detail summary::-webkit-details-marker{display:none}
.print-detail summary:hover{color:var(--signal)}
.print-detail summary:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
.print-detail[open] summary{color:var(--ink)}
.print-detail img{display:block;width:min(100%,520px);height:auto;margin:20px auto 6px}
/* Keep an empty writing slot: the archive can grow without needing a redesign. */
.fragment-writing{grid-column:1/-1}
.fragment-writing .writing-field{aspect-ratio:auto;min-height:240px;justify-content:space-between}
.fragment-writing .writing-big{font-size:clamp(34px,4.8vw,67px);margin:18px 0}
@media(max-width:620px){.fragment-writing .writing-field{min-height:290px}.fragment-writing .writing-big{font-size:clamp(38px,9.5vw,56px)}}

/* The annotated newspaper is a clickable editorial Easter egg. */
.print-clipping-link{display:block;position:relative;width:min(100%,520px);margin:20px auto 6px;text-decoration:none;color:inherit;cursor:pointer}
.print-clipping-link img{display:block;width:100%;height:auto;margin:0}
.print-clipping-link:hover img{filter:brightness(.96)}
.print-clipping-link:focus-visible{outline:3px solid var(--signal);outline-offset:4px}
.print-clipping-corner{position:absolute;right:10px;bottom:10px;background:var(--paper,#f6f4ee);color:var(--ink,#161616);width:32px;height:32px;display:grid;place-items:center;font-size:19px;border:1px solid currentColor;transition:transform .15s ease}
.print-clipping-link:hover .print-clipping-corner{transform:translate(2px,-2px)}

/* An extremely small Web 1.0 homage: the assignment wanders, without one new byte of imagery or JS. */
.assignment-lane{
  display:block;
  position:relative;
  height:24px;
  overflow:hidden;
  white-space:nowrap;
}
.assignment-drifter{
  position:absolute;
  left:0;
  top:1px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:max-content;
  white-space:nowrap;
  animation:assignment-wanders 36s ease-in-out infinite;
}
@keyframes assignment-wanders{
  0%,8%{left:0}
  28%{left:calc(100% - 176px)}
  43%{left:calc(100% - 176px)}
  63%{left:calc(50% - 88px)}
  78%{left:calc(50% - 88px)}
  94%,100%{left:0}
}
.assignment-lane:hover .assignment-drifter,
.assignment-lane:focus-within .assignment-drifter{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
 .assignment-drifter{animation:none;left:0}
}


/* V9: the only sales pitch is an absurd commission contract.
   Native <details>, no scripts, external assets, or ongoing upkeep. */
.commission{margin-top:31px;border-top:1px solid var(--line);max-width:100%}
.commission-trigger{list-style:none;display:inline-flex;align-items:center;gap:12px;padding:17px 0 5px;cursor:pointer;font-size:10px;letter-spacing:.115em;font-weight:700;color:var(--muted)}
.commission-trigger::-webkit-details-marker{display:none}
.commission-trigger span{font-size:17px;line-height:0;transition:transform .2s ease;color:var(--signal)}
.commission-trigger:hover{color:var(--ink)}
.commission-trigger:focus-visible{outline:2px solid var(--signal);outline-offset:5px}
.commission[open] .commission-trigger{color:var(--ink)}
.commission[open] .commission-trigger span{transform:rotate(90deg)}
.commission-terms{background:var(--ink);color:var(--paper);margin:25px 0 12px;padding:clamp(24px,4.5vw,74px);}
.commission-topline{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid #565750;padding-bottom:17px;color:#c5c4b8;font-size:10px;letter-spacing:.125em;font-weight:700}
.commission-intro{font-family:Georgia,'Times New Roman',serif;font-size:clamp(19px,2.7vw,32px);line-height:1.33;margin:36px 0 40px;max-width:750px}
.commission-terms h3{font-family:Georgia,'Times New Roman',serif;font-size:clamp(39px,7vw,108px);line-height:.94;letter-spacing:-.065em;font-weight:400;margin:0 0 34px}
.commission-terms h3 em{font-weight:400}
.commission-rate{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;color:#e36a55;font-family:Arial,Helvetica,sans-serif;font-size:clamp(45px,9vw,131px);letter-spacing:-.085em;font-weight:900;line-height:1;padding:0 0 30px;border-bottom:1px solid #565750}
.commission-rate span{font-size:clamp(10px,1.1vw,16px);letter-spacing:.13em;color:#bbbdb5}
.commission-demands{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,5vw,80px);row-gap:26px;padding:37px 0 45px}
.commission-demands p{font-family:Georgia,'Times New Roman',serif;font-size:clamp(19px,2.3vw,32px);line-height:1.3;letter-spacing:-.02em;max-width:500px}
.commission-demands .commission-growup{font-family:Arial,Helvetica,sans-serif;font-size:clamp(22px,3.5vw,44px);font-weight:900;align-self:end;letter-spacing:-.05em}
.commission-closer{display:flex;gap:18px;align-items:center;justify-content:space-between;border-top:1px solid #565750;padding-top:23px}
.commission-closer span{font-size:10px;font-weight:700;letter-spacing:.12em;color:#bfc0b7}
.commission-closer a{color:var(--paper);font-weight:700;font-size:12px;letter-spacing:.1em;text-decoration:none;padding-bottom:5px;border-bottom:1px solid #d86854;white-space:nowrap}
.commission-closer a:hover{color:#e78b7a}
.commission-closer a span{color:inherit;font-size:16px}
@media(max-width:620px){
  .commission{margin-top:28px}
  .commission-terms{margin-top:21px;padding:23px 18px}
  .commission-topline{font-size:9px}
  .commission-topline span:last-child{display:none}
  .commission-intro{margin:29px 0 32px;font-size:19px}
  .commission-terms h3{font-size:clamp(38px,10vw,64px);margin-bottom:25px}
  .commission-rate{font-size:clamp(44px,13vw,68px);gap:7px;padding-bottom:26px}
  .commission-rate span{width:100%;font-size:10px}
  .commission-demands{grid-template-columns:1fr;row-gap:24px;padding:30px 0 36px}
  .commission-demands p{font-size:23px}
  .commission-demands .commission-growup{font-size:40px}
  .commission-closer{align-items:start;flex-direction:column;gap:19px}
}
@media(prefers-reduced-motion:reduce){.commission-trigger span{transition:none}}