@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/schibsted-grotesk.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2"); }
:root { color-scheme: light; }
[hidden] { display: none !important; }
.skip-link { position: absolute; left: 20px; top: -100px; z-index: 10; padding: 12px 16px; background: #111111; color: #FAFAF8; border-radius: 8px; text-decoration: none; font: 500 15px/1.2 "Schibsted Grotesk", system-ui, sans-serif; }
.skip-link:focus { top: 8px; color: #FAFAF8; }
body{margin:0;background:#FAFAF8}
a{color:#111111}a:hover{color:#111111}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #E5482D;outline-offset:3px}
.work:hover .work-img{transform:scale(1.015)}
.work-img{transition:transform .4s ease}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
details[open] .plus{transform:rotate(45deg)}
.plus{transition:transform .2s ease}
@media (max-width:960px){
  .two{grid-template-columns:1fr !important}
  .three{grid-template-columns:1fr !important}
  .four{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .h1{font-size:52px !important}
  .h2{font-size:40px !important}
}

/* Phone fixes (Oct 20) */
@media (max-width:600px){
  header a, nav a{white-space:nowrap}
  header a[aria-label]{min-height:44px;align-items:center}
  [style*="grid-template-columns: 1fr auto"]{grid-template-columns:1fr !important}
  [style*="padding: 48px"],[style*="padding: 56px"]{padding:24px !important}
  [style*="font-size: 40px"]{font-size:28px !important}
  [style*="font-size: 60px"]{font-size:34px !important}
  [style*="font-size: 52px"]{font-size:32px !important}
  [style*="font-size: 44px"]{font-size:26px !important;overflow-wrap:anywhere}
  [style*="min-height: 300px"]{min-height:0 !important}
  [style*="padding: 112px 24px"],[style*="padding: 120px 24px"]{padding-top:72px !important;padding-bottom:72px !important}
  .four{grid-template-columns:1fr !important}
  .four>li{border-left:0 !important;padding-left:0 !important;padding-right:0 !important}
  .h1{font-size:40px !important}
  .h2{font-size:30px !important}
  a[style*="height: 56px"],a[style*="height: 52px"]{white-space:nowrap}
}

/* Phone header like Home: wordmark left, "Book a call" top right, links on the row below (2026-10-21) */
@media (max-width: 559px) {
  header:has(> nav[aria-label="Main"]) { justify-content: flex-start !important; gap: 0 4px !important; padding-top: 8px !important; padding-bottom: 8px !important; }
  header:has(> nav[aria-label="Main"])::after { content: ""; order: 2; width: 100%; }
  header > nav[aria-label="Main"] { display: contents !important; }
  header > nav[aria-label="Main"] > a[data-cfg-href="calendly"] { order: 1; margin-left: auto !important; }
  header > nav[aria-label="Main"] > a:not([data-cfg-href]) { order: 3; }
  header > nav[aria-label="Main"] > a:not([data-cfg-href]) { padding: 0 20px 0 0 !important; }
}

/* Work cards when stacked (2026-10-21): show the whole image instead of cropping it into a tall box */
@media (max-width: 960px) {
  a.work.two > div[style*="min-height: 420px"] { min-height: 0 !important; aspect-ratio: 4 / 3; }
  a.work > div[style*="height: 420px"] { height: auto !important; aspect-ratio: 1200 / 676; }
}
/* Phones: keep "tanvirchowdhury.com" on one line */
@media (max-width: 600px) {
  a.work.two > div[style*="padding: 40px"] { padding: 28px 24px !important; gap: 28px !important; }
  a.work.two span[style*="font-size: 44px"] { font-size: 24px !important; overflow-wrap: normal !important; }
}