/* umerfayyaz.com — delivered defaults: Bodoni Moda display, red accent, hero paragraph a, photographs swapped */
:root{--display:'Bodoni Moda',Georgia,serif;--display-stretch:100%;--accent:#D33F1F;}
html{scroll-behavior:smooth;background:#F3F2F0;}
body{margin:0;background:#F3F2F0;color:#141311;-webkit-font-smoothing:antialiased;font-optical-sizing:auto;}
a{color:#141311;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--accent);}
a:hover{text-decoration-thickness:2px;}
::selection{background:#141311;color:#F3F2F0;}
input,select,textarea,button{font:inherit;color:inherit;}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* form states the prototype handled with style-focus / style-hover */
.field:focus{border-bottom-color:#141311 !important;}
.field:focus-visible{outline:none;}
.send:hover{text-decoration-thickness:2px;}
.send:disabled{cursor:default;opacity:.55;}
.select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2 5l5 5 5-5' fill='none' stroke='%23141311' stroke-width='1.2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center;}
.select option{background:#F3F2F0;color:#141311;}

/* honeypot: present for bots, invisible and unfocusable for people */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important;transition:none !important;}
  [data-year-reveal]{opacity:1 !important;}
}

/* nav: one line per link; on narrow phones the "Contact" link yields to "Write to me", which goes to the same place */
[data-nav] a,a[href="#top"]{white-space:nowrap;}
@media (max-width:480px){[data-nav] a[href="#contact"]:not(:last-child){display:none;}}
@media (max-width:380px){a[href="#top"]{display:none;}}