@font-face { font-family:Manrope; font-style:normal; font-weight:200 800; font-display:swap; src:url("fonts/manrope-latin.woff2") format("woff2"); }
@font-face { font-family:Caveat; font-style:normal; font-weight:400 700; font-display:swap; src:url("fonts/caveat-latin.woff2") format("woff2"); }
:root { color-scheme:dark; --paper:#171716; --ink:#d7d7d7; --red:#e52618; --identity-limit:calc(700px + clamp(24px,3vw,44px)); }
*,*::before,*::after { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
.page { min-height:100vh; min-height:100svh; display:flex; flex-direction:column; padding:28px clamp(24px,4.2vw,80px); position:relative; overflow:hidden; isolation:isolate; background:var(--paper) url("background.webp") center/cover no-repeat; background-image:image-set(url("background.avif") type("image/avif"),url("background.webp") type("image/webp")); }
.art picture { display:block; }
.top { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:18px; z-index:3; }
.top-index { font-size:11px; font-weight:800; letter-spacing:-.02em; }
.top-index>span { display:block; background:var(--ink); color:var(--paper); padding:6px 10px; transform:rotate(2deg); border:1px solid var(--ink); box-shadow:0 2px 5px #00000038; }
.origin { display:flex; align-items:center; gap:12px; flex-shrink:0; transform:rotate(-2deg); padding-block:3px 9px; }
.origin small { display:flex; flex-direction:column; font-size:11px; line-height:1.25; font-weight:800; letter-spacing:-.025em; color:var(--ink); text-transform:uppercase; }
.origin strong { position:relative; color:var(--ink); font-size:35px; line-height:.9; font-weight:800; font-style:italic; letter-spacing:-.075em; padding-right:3px; }
.origin strong::after { content:""; position:absolute; left:0; right:0; bottom:-5px; height:4px; background:var(--red); clip-path:polygon(0 35%,28% 12%,70% 24%,100% 0,96% 70%,60% 83%,5% 100%); }
main { flex:1; display:flex; align-items:center; padding-block:30px; position:relative; }
.identity { width:60%; max-width:var(--identity-limit); position:relative; z-index:3; }
.wordmark { display:block; width:100%; max-width:none; position:relative; margin:0 0 52px; font-size:inherit; line-height:0; }
.wordmark svg { display:block; width:100%; height:auto; overflow:visible; color:var(--ink); }
.wordmark::after { content:""; position:absolute; width:40%; height:12px; right:0; bottom:-17px; transform:rotate(-3deg); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath fill='%23e52618' d='M2 6 Q37 4 71 5 T143 4 Q195 3 245 4 L299 2 293 7 297 8 Q263 10 229 10 T160 11 Q108 11 59 13 L9 14 3 11 7 9 0 8Z'/%3E%3Cpath fill='none' stroke='%23e52618' stroke-width='.8' stroke-linecap='round' d='M18 15 Q113 13 187 13 M252 2 291 1'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.details { display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,44px); align-items:start; }
h2 { margin:0; font-size:clamp(24px,2.2vw,30px); line-height:1.25; font-weight:800; letter-spacing:-.055em; }
.printed-heading { display:inline-block; }
.highlight { display:inline-block; background:var(--red); color:#e0e0e0; padding:0 8px 3px; margin:3px 0 0 -8px; transform:rotate(-2deg); box-shadow:0 2px 4px #00000026; }
.intro { margin:0; max-width:350px; font-size:clamp(14px,1.2vw,17px); line-height:1.65; font-weight:500; color:#bdbdbd; }
.intro p { margin:0; }
.intro p + p { margin-top:12px; }
.art { position:absolute; right:-1vw; top:50%; width:50%; max-width:min(calc((100svh - 170px) * .8),calc(100% - min(60%,var(--identity-limit)) + 1vw - 4px)); transform:translateY(-50%); z-index:2; pointer-events:none; }
.art img { display:block; width:100%; height:auto; max-height:calc(100svh - 170px); object-fit:contain; }
footer { position:relative; z-index:4; padding-top:18px; display:flex; justify-content:space-between; align-items:center; gap:18px 30px; }
.contact-intro { margin:0; color:var(--ink); font-family:Caveat,cursive; font-size:clamp(24px,2.1vw,30px); font-weight:400; line-height:1.2; white-space:nowrap; }
.contact-intro strong { font:inherit; font-weight:600; white-space:nowrap; }
.contacts { display:flex; align-items:center; flex-wrap:wrap; gap:4px 26px; background:var(--ink); color:var(--paper); padding:2px 14px; transform:rotate(-1deg); box-shadow:0 2px 8px #00000030; }
.contacts a { position:relative; display:inline-flex; align-items:center; min-height:44px; color:inherit; font-size:13px; font-weight:700; text-decoration:none; padding-block:12px; }
.contacts a::after { content:""; position:absolute; left:0; right:0; bottom:7px; height:3px; background:var(--red); clip-path:polygon(0 35%,24% 12%,60% 23%,100% 0,97% 72%,45% 86%,3% 100%); transform:scaleX(0); transform-origin:left center; }
.contacts a:focus-visible::after { transform:scaleX(1); }
.contacts a:focus-visible { outline:2px solid var(--red); outline-offset:5px; }
@media (hover:hover) and (pointer:fine) {
  .contacts a:hover::after { transform:scaleX(1); }
}
  /* Decorative motion stays separate from layout and respects reduced motion. */
@media (prefers-reduced-motion:no-preference) {
  .wordmark::after { animation:marker-reveal 520ms cubic-bezier(.22,.61,.36,1) 120ms backwards; }
        .art img { --float-distance:-5px; transform-origin:50% 60%; }
        .art.motion-ready img { animation:ribbon-float 12s ease-in-out infinite; }
    @media (max-width:800px) {
      .art img { --float-distance:-3px; }
    }
  .contacts a { transition:transform 160ms ease-out; }
  .contacts a::after { transition:transform 180ms ease-out; }
  @media (hover:hover) and (pointer:fine) {
    .contacts a:hover { transform:translateY(-1px); }
  }
  .contacts a:active { transform:translateY(1px); }
}
@keyframes marker-reveal {
  from { clip-path:inset(0 100% 0 0); }
  to { clip-path:inset(0 0 0 0); }
}
  @keyframes ribbon-float {
    0%,100% { transform:translateY(0) rotate(-.18deg); }
    50% { transform:translateY(var(--float-distance)) rotate(.18deg); }
  }
::selection { background:var(--red); color:#e0e0e0; }
@media (max-width:1000px) and (min-width:801px) {
  .intro { font-size:14px; }
  .contacts { gap:18px; }
}
@media (max-height:600px) and (min-width:801px) {
  .page { padding-block:18px; }
  main { padding-block:18px; }
  .intro { font-size:13px; }
}
@media (min-width:801px) and (max-width:1000px) and (orientation:portrait) {
  main { flex-direction:column; justify-content:center; align-items:stretch; gap:16px; }
  .identity { width:100%; max-width:none; }
  .wordmark { max-width:640px; margin-bottom:36px; }
  .details { max-width:640px; }
  h2 { font-size:27px; }
  .art { position:relative; top:auto; right:auto; transform:none; width:80%; max-width:470px; margin:0 auto; }
  .art img { max-height:470px; }
}
@media (max-width:800px) {
  .page { padding:22px 24px; }
  .top { padding-bottom:12px; }
  .top-index { font-size:10px; }
  main { flex-direction:column; justify-content:center; align-items:stretch; padding-block:18px 8px; gap:8px; }
  .identity { width:100%; max-width:none; }
  .wordmark { max-width:640px; margin-bottom:36px; }
  .wordmark::after { height:8px; bottom:-12px; }
  .details { max-width:640px; }
  h2 { font-size:27px; }
  .intro { font-size:14px; line-height:1.5; }
  .intro p + p { margin-top:6px; }
  .art { position:relative; top:auto; right:auto; width:90%; max-width:470px; margin:0 auto; align-self:center; transform:none; }
  .art img { max-height:430px; }
  footer { align-items:flex-start; flex-direction:column; gap:12px; padding-top:8px; }
  .contact-intro { white-space:normal; }
  .contacts { width:100%; justify-content:space-between; gap:12px; transform:none; }
  .contacts a { font-size:12px; }
}
@media (max-width:800px) and (max-height:700px) {
  .page { padding:16px 20px; }
  .top { padding-bottom:8px; }
  main { padding-block:10px 4px; gap:4px; }
  .intro { font-size:14px; line-height:1.5; }
  .highlight { padding-inline:5px; margin-left:-5px; }
  footer { gap:6px; padding-top:4px; }
  .contacts a { font-size:11px; padding-block:10px; }
}
@media (max-width:480px) {
  .wordmark { max-width:340px; margin-bottom:30px; }
  .details { max-width:340px; grid-template-columns:1fr; gap:14px; }
  h2 { font-size:25px; }
  .intro { font-size:14px; line-height:1.5; max-width:340px; }
  .art { width:100%; }
  .art img { max-height:clamp(150px,calc(100svh - 566px),330px); }
  .top { gap:12px; }
  .origin { gap:8px; }
  .origin small { font-size:8px; }
  .origin strong { font-size:25px; }
  .top-index { font-size:8px; }
  .top-index>span { padding:7px 6px; white-space:nowrap; }
  .contact-intro { font-size:24px; }
  .contacts { gap:0 10px; padding:2px 10px; }
}
@media (max-width:480px) and (max-height:700px) {
  main { padding-block:8px 2px; gap:3px; }
  .wordmark { margin-bottom:24px; }
  h2 { font-size:22px; }
  .details { gap:10px; }
  .intro { font-size:14px; }
  .art { width:86%; }
  .art img { max-height:clamp(150px,calc(100svh - 475px),230px); }
}
@media (max-width:480px) and (max-height:620px) {
  .art { width:82%; }
}
/* Fit artwork into the space left by readable text; never crop the copy. */
.top { flex-wrap:wrap; }
.top-index { max-width:100%; }
.top-index>span { white-space:normal; }
.art { --art-room:430px; }
@media (max-width:800px), (min-width:801px) and (max-width:1000px) and (orientation:portrait) {
  .art { width:min(90%,calc(var(--art-room) * .8),470px); }
  .art img { max-height:min(var(--art-room),430px); }
}
@media (max-width:480px) {
  .art img { max-height:min(var(--art-room),330px); }
}
@media (min-width:601px) and (max-width:800px) and (orientation:landscape) {
  main { flex-direction:row; justify-content:flex-start; align-items:center; }
  .identity { width:62%; }
  .wordmark { margin-bottom:28px; }
  .details { grid-template-columns:1fr 1fr; gap:20px; }
  h2 { font-size:22px; }
  .art { position:absolute; right:0; top:50%; width:35%; max-width:none; margin:0; transform:translateY(-50%); }
  .art img { max-height:calc(100svh - 170px); }
  footer { flex-direction:row; align-items:center; flex-wrap:wrap; }
  .contact-intro { font-size:23px; }
  .contacts { width:auto; }
}
/* Compact landscape: keep the text and illustration beside each other. */
@media (min-width:601px) and (max-height:540px) {
  .page { padding:12px 24px; }
  .top { padding-bottom:4px; gap:8px; }
  .origin { gap:8px; padding-block:0 6px; }
  .origin strong { font-size:25px; }
  .origin small,.top-index { font-size:8px; }
  .top-index>span { padding:5px 7px; }
  main { display:flex; flex-direction:row; justify-content:flex-start; align-items:center; padding-block:8px; gap:0; }
  .identity { width:64%; max-width:none; }
  .wordmark { max-width:270px; margin-bottom:20px; }
  .wordmark::after { bottom:-10px; height:6px; }
  .details { grid-template-columns:1fr 1fr; gap:16px; }
  h2 { font-size:19px; }
  .intro { font-size:13px; line-height:1.4; }
  .intro p+p { margin-top:7px; }
  .highlight { padding-inline:5px; margin-left:-5px; }
  .art { position:absolute; width:33%; max-width:none; right:0; top:50%; margin:0; transform:translateY(-50%); }
  .art img { max-height:calc(100svh - 125px); }
  footer { flex-direction:row; align-items:center; padding-top:5px; gap:12px; flex-wrap:wrap; }
  .contact-intro { font-size:21px; }
  .contacts { width:auto; gap:14px; padding:0 9px; transform:none; }
  .contacts a { font-size:11px; padding-block:6px; }
}
/* Very narrow screens still keep body copy at a readable size. */
@media (max-width:359px) {
  .page { padding-inline:16px; }
  .origin small,.top-index { font-size:7px; }
  .origin strong { font-size:22px; }
  .top { gap:5px; }
  .top-index>span { padding:6px 4px; }
  .wordmark { margin-bottom:20px; }
  .details { gap:8px; }
  h2 { font-size:20px; }
  .contact-intro { font-size:21px; }
  .contacts { gap:4px; padding-inline:8px; }
  .contacts a { font-size:10px; }
}

.art.is-small img { animation:none; }
.not-found { min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:24px; text-align:center; }
.not-found p { color:var(--red); font-size:40px; font-weight:800; margin:0; }
.not-found a { color:var(--ink); text-underline-offset:5px; }
.not-found a:focus-visible { outline:2px solid var(--red); outline-offset:5px; }