/* ========================================================================== deorsidesign — Responsive Breakpoints Mobile-first:base styles for 375px,enhanced at 768px (tablet),1280px (desktop) ========================================================================== */ /* ========================================================================== Base:Mobile (375px and below) ========================================================================== */ @media (max-width:374px){:root{--container-padding:var(--space-3);}.section{padding-top:var(--space-16);padding-bottom:var(--space-16);}.hero__content{padding:var(--space-5);gap:var(--space-5);}.hero__logo{height:40px;}.nav__panel a{font-size:var(--font-size-2xl);}.portfolio-grid{grid-template-columns:1fr;}.filter-bar{gap:var(--space-2);}.filter-btn{padding:var(--space-2) var(--space-3);font-size:var(--font-size-xs);}.footer__grid{grid-template-columns:1fr;gap:var(--space-8);}}/* ========================================================================== Mobile:375px - 767px ========================================================================== */ @media (min-width:375px) and (max-width:767px){.section{padding-top:var(--space-20);padding-bottom:var(--space-20);}.hero__logo{height:48px;}.hero__tagline{font-size:var(--font-size-md);}.portfolio-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}.portfolio-item__overlay{padding:var(--space-5);}.split{grid-template-columns:1fr;gap:var(--space-10);}.footer__grid{grid-template-columns:1fr;gap:var(--space-10);text-align:center;}.footer__links{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:var(--space-4);}.footer__brand{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);}.grid--auto{grid-template-columns:1fr;}.media-placeholder{aspect-ratio:16 / 9;}.card{padding:var(--space-6);}.nav__panel{top:72px;padding:var(--space-8) var(--space-4);}.nav__panel a{font-size:var(--font-size-3xl);}.nav__inner{padding-top:var(--space-3);padding-bottom:var(--space-3);}.section__header{margin-bottom:var(--space-10);}}/* ========================================================================== Tablet:768px - 1279px ========================================================================== */ @media (min-width:768px) and (max-width:1279px){.section{padding-top:var(--space-24);padding-bottom:var(--space-24);}.hero__content{max-width:720px;padding:var(--space-10);gap:var(--space-8);}.hero__logo{height:56px;}.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;}.portfolio-item__overlay{padding:var(--space-6);}.portfolio-item__title{font-size:var(--font-size-2xl);}.split{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-12);}.footer__grid{grid-template-columns:1.5fr 1fr 1fr;gap:var(--space-12);align-items:start;}.footer__links{flex-direction:column;gap:var(--space-3);}.grid--auto{grid-template-columns:repeat(2,minmax(280px,1fr));}.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}.grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}.media-placeholder{aspect-ratio:1;}.card{padding:var(--space-8);}.card h3{font-size:var(--font-size-2xl);}.nav__panel a{font-size:var(--font-size-4xl);}.section__header{margin-bottom:var(--space-12);}.filter-bar{gap:var(--space-4);}.inline-link span{transition:transform var(--transition-fast);}.inline-link:hover span{transform:translateX(var(--space-1));}}/* ========================================================================== Desktop:1280px and above ========================================================================== */ @media (min-width:1280px){:root{--container-padding:var(--space-6);}.section{padding-top:var(--space-28);padding-bottom:var(--space-28);}.hero__content{max-width:980px;padding:var(--space-12);gap:var(--space-10);}.hero__logo{height:72px;}.portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;}.portfolio-item__overlay{padding:var(--space-8);}.portfolio-item__title{font-size:var(--font-size-2xl);}.split{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-16);}.footer__grid{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--space-16);align-items:start;}.footer__links{flex-direction:column;gap:var(--space-4);}.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}.grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}.grid--auto{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));}.media-placeholder{aspect-ratio:4 / 3;}.card{padding:var(--space-10);}.card h3{font-size:var(--font-size-2xl);}.card p{font-size:var(--font-size-md);}.section__header{margin-bottom:var(--space-14);}.nav__panel a{font-size:var(--font-size-5xl);}.filter-bar{gap:var(--space-5);}.filter-btn{padding:var(--space-2) var(--space-5);}.scroll-indicator{bottom:var(--space-10);}.nav__inner{padding-top:var(--space-4);padding-bottom:var(--space-4);}}/* ========================================================================== Small tablet:768px - 1024px (iPad portrait) ========================================================================== */ @media (min-width:768px) and (max-width:1024px) and (orientation:portrait){.hero__content{max-width:640px;}.portfolio-grid{gap:3px;}.split{gap:var(--space-10);}.grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}}/* ========================================================================== Large tablet:1024px - 1279px (iPad landscape) ========================================================================== */ @media (min-width:1024px) and (max-width:1279px){.hero__content{max-width:800px;}.portfolio-grid{gap:3px;}.grid--4{grid-template-columns:repeat(3,minmax(0,1fr));}}/* ========================================================================== Container responsiveness ========================================================================== */ @media (max-width:767px){.container{padding-left:var(--space-4);padding-right:var(--space-4);}}@media (min-width:768px) and (max-width:1279px){.container{padding-left:var(--space-6);padding-right:var(--space-6);}.container--narrow{padding-left:var(--space-8);padding-right:var(--space-8);}}@media (min-width:1280px){.container{padding-left:var(--space-8);padding-right:var(--space-8);}.container--narrow{max-width:var(--content-max);padding-left:var(--space-12);padding-right:var(--space-12);}}/* ========================================================================== Typography responsiveness ========================================================================== */ @media (max-width:374px){.display{font-size:var(--font-size-4xl);}h1{font-size:var(--font-size-4xl);}h2{font-size:var(--font-size-3xl);}h3{font-size:var(--font-size-2xl);}}@media (min-width:375px) and (max-width:767px){.display{font-size:var(--font-size-5xl);}h1{font-size:var(--font-size-4xl);}h2{font-size:var(--font-size-3xl);}h3{font-size:var(--font-size-2xl);}.lead{font-size:var(--font-size-lg);}}/* ========================================================================== Navigation breakpoints ========================================================================== */ @media (max-width:767px){.nav__links{display:none;}.nav__toggle{display:inline-flex;}.nav--transparent{background:transparent;}.nav--solid{background:var(--color-black);}}@media (min-width:768px) and (max-width:1279px){.nav__links{display:flex;gap:var(--space-6);}.nav__toggle{display:inline-flex;}.nav__link{font-size:var(--font-size-xs);}}@media (min-width:1280px){.nav__links{display:flex;gap:var(--space-8);}.nav__toggle{display:none;}.nav__link{font-size:var(--font-size-sm);}}/* ========================================================================== Hero responsiveness ========================================================================== */ @media (max-width:767px){.hero__cta{padding:var(--space-3) var(--space-6);font-size:var(--font-size-xs);}.scroll-indicator{width:36px;height:36px;}.scroll-indicator svg{width:18px;height:18px;}}@media (min-width:768px) and (max-width:1279px){.hero__cta{padding:var(--space-3) var(--space-8);}.scroll-indicator{width:44px;height:44px;}.scroll-indicator svg{width:20px;height:20px;}}/* ========================================================================== Card responsiveness ========================================================================== */ @media (max-width:767px){.card{padding:var(--space-6);}.card h3{font-size:var(--font-size-xl);}.card p{font-size:var(--font-size-sm);}}/* ========================================================================== Prose (long-form text) responsiveness ========================================================================== */ @media (max-width:767px){.prose{font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);}}/* ========================================================================== Footer responsiveness ========================================================================== */ @media (max-width:767px){.footer{padding-top:var(--space-12);padding-bottom:var(--space-6);}.footer__brand{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);}.footer__logo{height:var(--space-6);}.footer__bottom{margin-top:var(--space-10);padding-top:var(--space-5);font-size:var(--font-size-xs);}}/* ========================================================================== Portfolio item responsiveness ========================================================================== */ @media (max-width:767px){.portfolio-item{aspect-ratio:16 / 10;}}@media (min-width:768px) and (max-width:1279px){.portfolio-item{aspect-ratio:4 / 3;}}/* ========================================================================== Hero mini (portfolio page) responsiveness ========================================================================== */ @media (max-width:767px){.section--hero-mini{padding-top:calc(var(--space-12) + var(--space-8));padding-bottom:var(--space-6);}}@media (min-width:768px) and (max-width:1279px){.section--hero-mini{padding-top:calc(var(--space-14) + var(--space-8));padding-bottom:var(--space-8);}}/* ========================================================================== Portfolio grid responsiveness ========================================================================== */ @media (max-width:767px){.portfolio-grid{grid-template-columns:1fr;gap:3px;}.portfolio-item{aspect-ratio:16 / 10;}}@media (min-width:768px) and (max-width:1279px){.portfolio-grid{grid-template-columns:repeat(2,1fr);gap:3px;}}/* ========================================================================== Reduced motion ========================================================================== */ @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0ms !important;animation-iteration-count:1 !important;transition-duration:0ms !important;}}