/* SKAROMNY PERSONAL / V3. An editorial composition; elements are deliberate, not a card UI. */
:root{--paper:#f2efe8;--ink:#131313;--red:#ed391b;--line:#b2aca4;--edge:clamp(22px,4.1vw,72px);--display:"Barlow Condensed",Impact,sans-serif;--body:"DM Sans",Arial,sans-serif;--mono:"IBM Plex Mono",monospace}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:66px}body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--body);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}:focus-visible{outline:3px solid #b92b12;outline-offset:4px}::selection{background:var(--red);color:#fff}
.mono{font:500 11px/1.5 var(--mono);letter-spacing:.09em}.skip{position:fixed;left:12px;top:6px;z-index:50;padding:12px 18px;color:#fff;background:var(--ink);transform:translateY(-150%)}.skip:focus{transform:translateY(0)}.site-head{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--edge);border-bottom:1px solid var(--line)}.brand{font:700 20px var(--body);display:inline-flex;align-items:center;gap:20px;min-height:44px;letter-spacing:-.06em}.brand-dash{height:1px;background:#222;width:40px}.site-head nav{display:flex;gap:clamp(18px,3.1vw,48px)}.site-head nav a{font:600 11px var(--mono);text-transform:uppercase;padding:14px 0;letter-spacing:.065em}.site-head nav a:hover,.social-links a:hover{text-decoration:underline;text-underline-offset:5px}.head-edition{color:#555}
.hero{padding:0 var(--edge)}.hero-margin,.section-meta{display:flex;justify-content:space-between;gap:20px;align-items:center}.hero-margin{height:55px;color:#5b574f}.cover{height:min(66vw,740px);min-height:480px;position:relative;overflow:hidden;isolation:isolate;background:#d8d7d3}.cover-architecture{position:absolute;inset:0 0 0 26%;background:#777 url("https://images.unsplash.com/photo-1484882918957-e9f6567be3c8?fit=crop&w=1500&q=82") center 44%/cover no-repeat;filter:grayscale(1) contrast(1.13)}.cover-architecture::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#16161670,transparent 65%),linear-gradient(0deg,#12121270,transparent 40%)}.cover-record{position:absolute;z-index:1;left:-5%;top:21%;width:35%;height:60%;background:#3a3a3a url("https://images.unsplash.com/photo-1556569482-a1813394ef9f?fit=crop&w=900&q=80") center/cover no-repeat;filter:grayscale(1) contrast(1.25);transform:rotate(-5deg);box-shadow:5px 14px 50px #1116}.red-sticker{position:absolute;z-index:2;top:42%;left:21%;width:16%;height:25%;background:var(--red);color:#121212;padding:15px;display:flex;flex-direction:column;justify-content:space-between;min-width:120px;font-weight:600;transform:rotate(3deg)}.red-sticker span:last-child{text-align:right}.cover-side{position:absolute;z-index:2;top:7%;right:4%;writing-mode:vertical-rl;color:#eee;opacity:.9}.cover h1{position:absolute;z-index:3;left:1.7%;bottom:12%;width:96.6%;font:900 clamp(96px,20.7vw,340px)/.68 var(--display);letter-spacing:-.055em;margin:0;color:#f7f3eb;mix-blend-mode:difference;white-space:nowrap;text-align:center;text-transform:uppercase;transform:scaleX(.96);transform-origin:center;pointer-events:none}.cover-label{position:absolute;z-index:4;right:3%;bottom:4%;color:#fff;font-size:11px}.hero-foot{display:grid;grid-template-columns:1fr 1.15fr auto;gap:25px;align-items:start;padding:25px 0 55px}.hero-key{font-size:11px}.hero-foot p{font:600 clamp(19px,2.25vw,30px)/1.2 var(--body);letter-spacing:-.04em;max-width:540px;margin:0}.arrow-link{border-bottom:1px solid #181818;padding:2px 0 9px;min-width:100px;min-height:45px;display:flex;align-items:start;justify-content:space-between;gap:15px;font-weight:700;font-size:13px}
.section-meta{border-top:1px solid currentColor;padding-top:16px}
.statement{padding:66px var(--edge) 95px;background:#161616;color:#f2efe8}.statement-grid{display:grid;grid-template-columns:1.4fr .6fr;align-items:end;gap:clamp(50px,7vw,130px);padding-top:35px}.statement h2,.work-intro h2,.closing h2{font:900 clamp(76px,10.4vw,170px)/.83 var(--display);letter-spacing:-.035em;margin:0}.statement h2 span{color:var(--red)}.statement-copy{max-width:430px;padding-bottom:11px}.asterisk{font:400 44px var(--body);color:var(--red)}.statement-copy p{font-size:clamp(18px,1.55vw,23px);line-height:1.46;letter-spacing:-.025em;color:#d7d5d1;margin:20px 0}.statement-sign{display:block;color:#bcb8af;margin-top:32px}
.work{padding:75px var(--edge) 80px}.work-intro{display:flex;gap:50px;align-items:end;justify-content:space-between;padding:34px 0 34px}.work-intro h2{font-size:clamp(65px,9.2vw,150px)}.work-intro h2 i{font-style:normal;color:var(--red)}.work-intro p{font-size:18px;max-width:220px;margin:0 0 10px}.project-rows{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(14px,1.8vw,30px);align-items:start}.project{min-width:0}.project-art{height:clamp(285px,32vw,510px);position:relative;overflow:hidden;isolation:isolate}.project-art-kicker{position:absolute;z-index:2;top:18px;left:20px}.needle-art{background:#261b32;color:#fff}.needle-art::before{content:"";position:absolute;width:103%;aspect-ratio:1;left:-40%;top:13%;border-radius:50%;background:repeating-radial-gradient(circle,#161020 0 7px,#3d294a 8px 9px,#1c1623 10px 14px);opacity:.8}.needle-logotype{position:absolute;z-index:1;top:43%;left:4%;font:700 clamp(55px,7vw,110px)/1 var(--display);letter-spacing:-.055em}.needle-logotype span{font-size:.3em;vertical-align:top;color:#e0b7f7}.needle-art img{position:absolute;z-index:2;height:77%;width:auto;right:3%;top:12%;max-width:43%;object-fit:contain;filter:drop-shadow(-13px 12px 20px #0009);transform:rotate(5deg)}.smthng-art{background:#c1bdaa;color:#24201a}.smthng-art::before{content:"";position:absolute;inset:11%;border:1px solid #5d584d;transform:rotate(8deg)}.smthng-seal{position:absolute;z-index:2;top:41%;left:7%;font:900 clamp(56px,6.3vw,106px)/1 var(--display);letter-spacing:-.05em}.smthng-seal span{color:#ad311e}.wax-disc{position:absolute;border:2px solid #736e60;box-shadow:0 0 0 14px #9c9487,0 0 0 16px #625f57;aspect-ratio:1;width:45%;border-radius:50%;right:-12%;top:15%;opacity:.3}.smthng-tag,.numeral-tag{position:absolute;bottom:17px;left:20px}.numeral-art{background:#d7d5cf}.numbers{position:absolute;inset:14% 6% 20%;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:10px}.numbers span{font:700 clamp(50px,6vw,100px)/1 var(--display);display:grid;place-items:center;background:#212521;color:#f1f0e6}.numbers span:nth-child(2){background:#93a991;color:#152219}.numbers span:nth-child(3){background:#b5ab89;color:#201e19}.numbers span:nth-child(4){background:var(--red);color:#161616}.numeral-art .project-art-kicker{color:#222}.numeral-tag{color:#35342e}.project-desc{padding:17px 0 0;display:flex;justify-content:space-between;gap:15px;align-items:start;border-top:1px solid var(--ink)}.project-desc .mono{font-size:11px}.project-desc h3{font:800 clamp(38px,3.6vw,55px)/1 var(--display);margin:11px 0 4px}.project-desc p{color:#4f4b45;font-size:14px;line-height:1.4;max-width:300px;margin:0}.project-desc>a,.project-index{font:700 11px/1.4 var(--mono);min-width:85px;max-width:120px;text-align:right;padding-top:5px}.project-desc>a:hover{text-decoration:underline;text-underline-offset:4px}
.closing{position:relative;isolation:isolate;background:#151515;color:#f4f2ea;padding:0;overflow:hidden;min-height:570px}.closing-image{position:absolute;z-index:-1;right:-5%;top:-38%;height:160%;aspect-ratio:1;background:url("https://images.unsplash.com/photo-1556569482-a1813394ef9f?fit=crop&w=1400&q=80") center/cover no-repeat;filter:grayscale(1) contrast(1.3);opacity:.28;transform:rotate(-15deg)}.closing-content{padding:43px var(--edge) 75px}.closing .section-meta{border-color:#6c6c68}.closing h2{font-size:clamp(84px,13vw,210px);margin:55px 0 20px}.closing h2 span{color:var(--red)}.closing p{font-size:clamp(19px,2vw,29px);max-width:650px;line-height:1.4;letter-spacing:-.025em}.social-links{display:flex;gap:clamp(22px,3vw,55px);margin-top:45px;flex-wrap:wrap}.social-links a{font:600 12px var(--mono);border-top:1px solid #9b9b98;padding-top:15px;min-width:155px}.footer{background:var(--red);color:#141414;display:flex;justify-content:space-between;gap:20px;padding:21px var(--edge);align-items:center}
@media(max-width:1000px){.statement-grid{grid-template-columns:1fr;gap:30px}.statement-copy{max-width:680px}.project-rows{grid-template-columns:1fr 1fr}.project.numeral{grid-column:1/-1;max-width:calc(50% - 10px)}.project-art{height:42vw}.work-intro h2{font-size:10vw}}
@media(max-width:680px){.site-head{height:65px}.site-head nav{gap:14px}.site-head nav a{font-size:11px}.head-edition{display:none}.brand{font-size:17px}.brand-dash{width:22px}.hero-margin{height:45px;font-size:11px}.hero-margin span:last-child{display:none}.cover{height:510px;min-height:0}.cover-architecture{inset:0 0 0 12%}.cover-record{width:53%;top:25%;left:-8%;height:50%}.red-sticker{min-width:80px;width:23%;height:20%;left:18%;top:40%;font-size:11px;padding:9px}.cover h1{font-size:21vw;bottom:17%;left:-1%;width:102%}.cover-label{right:5%;bottom:5%;font-size:11px}.hero-foot{grid-template-columns:1fr auto;gap:15px;padding:24px 0 38px}.hero-key{grid-column:1/-1}.hero-foot p{font-size:19px}.arrow-link{min-width:78px}.statement{padding:65px var(--edge)}.statement h2{font-size:clamp(68px,13vw,100px)}.statement-copy p{font-size:18px}.work{padding:60px var(--edge)}.work-intro{display:block;padding:29px 0}.work-intro h2{font-size:clamp(65px,13vw,96px)}.work-intro p{margin-top:20px}.project-rows{grid-template-columns:1fr;gap:34px}.project.numeral{grid-column:auto;max-width:none}.project-art{height:90vw;max-height:500px;min-height:300px}.needle-logotype{font-size:15vw}.smthng-seal{font-size:15vw}.numbers span{font-size:14vw}.project-desc h3{font-size:45px}.closing{min-height:0}.closing-content{padding:35px var(--edge) 60px}.closing h2{font-size:clamp(72px,15vw,110px);margin:47px 0 20px}.closing p{font-size:20px}.closing-image{right:-65%;opacity:.22}.social-links{flex-direction:column;gap:12px}.social-links a{min-height:38px}.footer span:nth-child(2){display:none}}
@media(max-width:380px){.site-head nav a:nth-child(2){display:none}.cover{height:440px}.cover h1{font-size:21vw}.statement h2{font-size:12vw}.work-intro h2{font-size:12.2vw}.closing h2{font-size:14vw}.hero-foot p{font-size:17px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}