:root,[data-theme="woodland"]{--green:#123e32;--ink-rgb:18,62,50;--paper:#f0eee4;--lime:#c7ed22;--page:#d8d6cc}
[data-theme="heath"]{--green:#492e42;--ink-rgb:73,46,66;--paper:#eee4dc;--lime:#e8915f;--page:#d7c9c0}
[data-theme="coast"]{--green:#173b52;--ink-rgb:23,59,82;--paper:#e9eef0;--lime:#e2b84c;--page:#cbd7db}
[data-theme="clay"]{--green:#5a2f21;--ink-rgb:90,47,33;--paper:#f1e8d6;--lime:#a7b94c;--page:#d9c9b3}
[data-theme="night"]{--green:#dfe8cf;--ink-rgb:223,232,207;--paper:#172c2a;--lime:#ffb347;--page:#0d1d1c}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{display:grid;place-items:center;padding:18px;color:var(--green);background:var(--page);font-family:"DM Mono",monospace}
body:after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.24;background-image:radial-gradient(circle,rgba(var(--ink-rgb),.2) 0 .45px,transparent .75px),radial-gradient(circle,rgba(255,255,255,.75) 0 .4px,transparent .7px);background-size:6px 6px,9px 9px;background-position:0 0,3px 4px;mix-blend-mode:multiply}
.poster{position:relative;isolation:isolate;width:min(1500px,100%);min-height:min(820px,calc(100vh - 36px));display:grid;grid-template-columns:1.35fr .9fr;gap:clamp(42px,5vw,86px);align-items:center;overflow:hidden;padding:clamp(62px,6vw,94px);background:var(--paper);box-shadow:0 25px 70px rgba(10,25,21,.16)}
.poster:before{content:"";position:absolute;inset:24px;z-index:5;pointer-events:none;border:1px solid rgba(var(--ink-rgb),.68);background:repeating-linear-gradient(90deg,transparent 0 69px,rgba(var(--ink-rgb),.5) 70px 71px,transparent 72px 78px) top/100% 10px no-repeat,repeating-linear-gradient(90deg,transparent 0 69px,rgba(var(--ink-rgb),.5) 70px 71px,transparent 72px 78px) bottom/100% 10px no-repeat,repeating-linear-gradient(0deg,transparent 0 69px,rgba(var(--ink-rgb),.5) 70px 71px,transparent 72px 78px) left/10px 100% no-repeat,repeating-linear-gradient(0deg,transparent 0 69px,rgba(var(--ink-rgb),.5) 70px 71px,transparent 72px 78px) right/10px 100% no-repeat}
.poster:after{content:"";position:absolute;inset:0;z-index:-3;opacity:.13;background-image:linear-gradient(rgba(var(--ink-rgb),.14) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--ink-rgb),.14) 1px,transparent 1px);background-size:64px 64px}
.topo-pattern{position:absolute;z-index:-2;inset:0;background-image:url("contour-pattern.webp");background-repeat:repeat;background-size:1000px auto;opacity:.1;mix-blend-mode:multiply;filter:sepia(1) saturate(1.4) hue-rotate(82deg);mask-image:radial-gradient(ellipse at 42% 46%,#000 0 28%,rgba(0,0,0,.78) 52%,transparent 86%)}
.identity{position:relative;z-index:2;padding-left:clamp(12px,2vw,34px)}
h1{margin:0;font-family:"Barlow Condensed",Impact,sans-serif;font-size:clamp(118px,13.5vw,214px);font-weight:700;line-height:.76;letter-spacing:-.045em;text-transform:uppercase}h1 span{color:var(--lime);text-shadow:2px 2px 0 var(--green)}
.rule{position:relative;height:14px;margin:36px 0 22px;border-top:2px solid var(--green)}.rule i{position:absolute;top:-7px;width:1px;height:12px;background:var(--green)}.rule i:nth-child(1){left:0}.rule i:nth-child(2){left:57%}.rule i:nth-child(3){right:0}
.role{margin:0;font-family:"Barlow Condensed",sans-serif;font-size:clamp(20px,2vw,30px);font-weight:600;line-height:1.16;letter-spacing:.035em;text-transform:uppercase}
.contact-lines{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-top:32px}.disciplines{margin:0 0 2px;color:rgba(var(--ink-rgb),.68);font-size:clamp(9px,.8vw,12px);letter-spacing:.1em;text-transform:uppercase}.disciplines span{margin:0 .45em;opacity:.55}.contact,.domain{color:var(--green);font-size:clamp(12px,1.15vw,17px);letter-spacing:.08em;text-decoration:none;border-bottom:2px dotted rgba(var(--ink-rgb),.48);padding-bottom:7px}.contact:hover,.domain:hover,.contact:focus-visible,.domain:focus-visible{border-bottom-style:solid}
.portrait-panel{position:relative;z-index:2;width:100%;aspect-ratio:4/5;overflow:hidden;background:var(--green)}
.panel-grid{position:absolute;inset:0;opacity:.25;background-image:linear-gradient(rgba(240,238,228,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(240,238,228,.28) 1px,transparent 1px);background-size:12.5% 10%}
.photo-frame{position:absolute;inset:9%;overflow:hidden;border-radius:24px;background:rgba(240,238,228,.025)}.photo-frame img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.72) contrast(1.04)}.photo-note{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:rgba(240,238,228,.64);font-size:10px;line-height:1.6;letter-spacing:.14em;text-transform:uppercase}
.corner{position:absolute;width:24px;height:24px}.corner:before,.corner:after{content:"";position:absolute;background:var(--paper)}.corner:before{width:24px;height:2px}.corner:after{width:2px;height:24px}.corner.tl{top:4%;left:4%}.corner.br{right:4%;bottom:4%;transform:rotate(180deg)}
@media(max-width:800px){body{padding:0}.poster{min-height:100vh;grid-template-columns:1fr;gap:54px;padding:92px 42px 70px}.poster:before{inset:14px}.identity{padding:0}.portrait-panel{width:min(440px,100%);justify-self:center;grid-row:1}h1{font-size:clamp(105px,29vw,170px)}.role{font-size:22px}.contact-lines{margin-top:26px}}
@media(max-width:430px){.poster{padding-inline:28px}.portrait-panel{width:84%}h1{font-size:29vw}.role{font-size:18px}.poster:before{display:none}}