@keyframes greetRoll {
  0% { transform: translateY(-0em); }
  9% { transform: translateY(-0em); }
  12.5% { transform: translateY(-1em); }
  21.5% { transform: translateY(-1em); }
  25% { transform: translateY(-2em); }
  34% { transform: translateY(-2em); }
  37.5% { transform: translateY(-3em); }
  46.5% { transform: translateY(-3em); }
  50% { transform: translateY(-4em); }
  59% { transform: translateY(-4em); }
  62.5% { transform: translateY(-5em); }
  71.5% { transform: translateY(-5em); }
  75% { transform: translateY(-6em); }
  84% { transform: translateY(-6em); }
  87.5% { transform: translateY(-7em); }
  96.5% { transform: translateY(-7em); }
  100% { transform: translateY(-8em); }
  }

  @font-face { font-family: 'Chillax'; src: url('assets/fonts/Chillax-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
  @font-face { font-family: 'Chillax'; src: url('assets/fonts/Chillax-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
/*
Theme Name: DM Portfolio
Theme URI: https://itsmedaryl.com/
Author: Daryl Magos
Author URI: https://itsmedaryl.com/
Description: Dark editorial portfolio theme for Daryl Magos — fixed hero with a cursor-tracking dot grid, a sticky-stacking Selected Work gallery, full case studies in an overlay, and a working contact form. Projects are editable as a custom post type.
Version: 1.0.8
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dm-portfolio
Tags: portfolio, one-column, custom-colors, custom-menu, featured-images, translation-ready
*/

  :root {
    --grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNDAnIGhlaWdodD0nMjQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjg1JyBudW1PY3RhdmVzPSczJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzI0MCcgaGVpZ2h0PScyNDAnIGZpbHRlcj0ndXJsKCNuKScgb3BhY2l0eT0nLjUnLz48L3N2Zz4=");
    --grad: linear-gradient(96deg, #E4361C 0%, #F0592A 46%, #F5893A 100%);
    --bg: #181616;
    --ink: #FFFDDB;
  }
  html { scroll-behavior: smooth; background: #181616; }
  body { margin: 0; background: #181616; color: #FFFDDB; font-family: "Inter Tight", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
  a { color: #FFFDDB; text-decoration: none; }
  a:hover { color: #E4361C; }
  * { box-sizing: border-box; }
  ::selection { background: #FF2E86; color: #181616; }
  :focus-visible { outline: 2px solid #E4361C; outline-offset: 4px; }
  @keyframes marqueeX { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
  @keyframes markIn { 0% { opacity: 0; transform: scale(.86) translateY(14px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
  @keyframes markPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
  @keyframes preRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes preBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes floatA { 0% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(14px,-22px,0) rotate(12deg); } 100% { transform: translate3d(0,0,0) rotate(0deg); } }
  @keyframes floatB { 0% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(-18px,16px,0) rotate(-14deg); } 100% { transform: translate3d(0,0,0) rotate(0deg); } }
  @keyframes floatC { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(10px,18px,0) scale(1.12); } 100% { transform: translate3d(0,0,0) scale(1); } }
  @keyframes pulseRing { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
  @keyframes scrollNudge { 0% { transform: translateY(-100%); } 100% { transform: translateY(240%); } }
  @keyframes slowSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  @keyframes caseIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes dotDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-36px,-36px,0); } }
  @keyframes dotGlow { 0% { transform: translate(-50%,-50%) scale(.9); opacity: .55; } 100% { transform: translate(-50%,-50%) scale(1.15); opacity: .9; } }
  @keyframes heroPulse { 0% { opacity: .2; } 100% { opacity: .55; } }
  @keyframes grainShift { 0% { transform: translate3d(0,0,0); } 25% { transform: translate3d(-2%,1.5%,0); } 50% { transform: translate3d(1.5%,-2%,0); } 75% { transform: translate3d(-1%,-1%,0); } 100% { transform: translate3d(0,0,0); } }
  @keyframes gradShift { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
  @keyframes riseIn { from { transform: translateY(105%); } to { transform: translateY(0); } }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
  @media (max-width: 900px) {
    [data-nav-links] { display: none !important; }
    [data-nav-toggle] { display: inline-flex !important; }
    [data-nav-cta] { display: none !important; }
  }
  @media (max-width: 700px) {
    [data-approach-row] { grid-template-columns: auto 1fr !important; row-gap: 12px !important; }
    [data-approach-row] p { grid-column: 1 / -1 !important; }
  }
  @keyframes navDrop { from { transform: translateY(-100%); } to { transform: translateY(0); } }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation: none !important; transition: none !important; }
  }

/* --- WordPress admin bar + editor bits ------------------------------------ */
  body.admin-bar [data-ref="navRef"] { top: 32px; }
  @media screen and (max-width: 782px) {
    body.admin-bar [data-ref="navRef"] { top: 46px; }
  }
  img { max-width: 100%; height: auto; }
  .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal;
  }

/* --- Tablet + mobile: tighten the 16.7vw page gutter and card padding ----- */
@media (max-width: 1100px) {
  .dm-root header,
  .dm-root main > section,
  .dm-root main > div > section,
  .dm-root [data-stack],
  .dm-root main > div > div[style*="max(clamp(18px,9.7vw,140px),(100% - 1320px)/2)"],
  .dm-root main > div[style*="max(clamp(18px,9.7vw,140px),(100% - 1320px)/2)"],
  .dm-root footer {
    padding-left: clamp(20px, 5vw, 56px) !important;
    padding-right: clamp(20px, 5vw, 56px) !important;
  }
  .dm-root [data-stack-inner] {
    padding: clamp(22px, 3.4vw, 44px) !important;
    gap: clamp(18px, 2.6vw, 34px) !important;
  }
  .dm-root [data-case-modal] > div:last-child {
    padding: clamp(72px, 9vw, 96px) clamp(16px, 4vw, 40px) clamp(32px, 5vw, 64px) !important;
  }
  .dm-root [data-case-modal] > div:last-child > div {
    padding: clamp(22px, 3.4vw, 48px) !important;
  }
}

@media (max-width: 860px) {
  .dm-root [data-stack-inner] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .dm-root [data-stack-inner] > a {
    order: 0 !important;
    height: clamp(200px, 48vw, 320px) !important;
  }
  .dm-root [data-stack-inner] > div {
    order: 1 !important;
  }
  .dm-root [data-stack] {
    gap: 18px !important;
  }
}

@media (max-width: 700px) {
  .dm-root header,
  .dm-root main > section,
  .dm-root main > div > section,
  .dm-root [data-stack],
  .dm-root main > div > div[style*="max(clamp(18px,9.7vw,140px),(100% - 1320px)/2)"],
  .dm-root main > div[style*="max(clamp(18px,9.7vw,140px),(100% - 1320px)/2)"],
  .dm-root footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .dm-root [data-stack-inner] {
    padding: 22px !important;
  }
  /* Project details drops below the narrative rather than squeezing beside it. */
  .dm-root [data-case-modal] aside,
  .dm-root main aside {
    position: static !important;
    flex: 1 1 100% !important;
  }
  .dm-root [data-case-modal] figure,
  .dm-root main figure {
    max-width: 100% !important;
  }
  /* Body copy and figure captions step down a touch on small screens. */
  .dm-root p[style*="font-size:20px"] {
    font-size: 18px !important;
  }
}

@media (max-width: 480px) {
  .dm-root header {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    gap: 10px !important;
  }
  .dm-root footer {
    gap: 10px !important;
  }
  .dm-root [data-stack-inner] h3 {
    font-size: clamp(26px, 8vw, 36px) !important;
  }
}

/* --- Mobile: hero height + vertical rhythm -------------------------------- */
@media (max-width: 860px) {
  .dm-root main > section[aria-label="Introduction"] {
    min-height: auto !important;
    padding-top: 104px !important;
    padding-bottom: clamp(36px, 9vw, 64px) !important;
  }
  .dm-root main > section[aria-label="Introduction"] h1 {
    font-size: clamp(38px, 11.5vw, 64px) !important;
  }
  .dm-root main > div > section#work {
    padding-top: clamp(28px, 7vw, 48px) !important;
    padding-bottom: 14px !important;
  }
  .dm-root main > div > section#work h2 {
    font-size: clamp(34px, 11vw, 60px) !important;
  }
  .dm-root main > div > section {
    padding-top: clamp(40px, 9vw, 72px) !important;
    padding-bottom: clamp(40px, 9vw, 72px) !important;
  }
  .dm-root main > div > section h2 {
    font-size: clamp(36px, 12vw, 68px) !important;
  }
  .dm-root [data-stack] {
    padding-bottom: clamp(36px, 9vw, 64px) !important;
  }
}

/* --- Bulletproof gutter override: every element carrying the 16.7vw page
       gutter inline, whatever its nesting ----------------------------------- */
@media (max-width: 1100px) {
  .dm-root [style*="16.7vw"] {
    padding-left: clamp(20px, 4.5vw, 48px) !important;
    padding-right: clamp(20px, 4.5vw, 48px) !important;
  }
}
@media (max-width: 700px) {
  .dm-root [style*="16.7vw"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* --- Tablet + mobile: case study media and text run full width ------------- */
@media (max-width: 1100px) {
  .dm-root [data-case-modal] figure,
  .dm-root main figure,
  .dm-root [data-case-modal] article > div[style*="aspect-ratio:16/10"],
  .dm-root main article > div[style*="aspect-ratio:16/10"] {
    max-width: 100% !important;
    width: 100% !important;
  }
  .dm-root [data-case-modal] article > p[style*="36ch"],
  .dm-root main article > p[style*="36ch"] {
    max-width: 100% !important;
  }
  .dm-root [data-case-modal] article > div[style*="flex-wrap:wrap"] > div,
  .dm-root main article > div[style*="flex-wrap:wrap"] > div {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  .dm-root [data-stack-inner] p[style*="44ch"],
  .dm-root [data-stack-inner] h3 {
    max-width: 100% !important;
  }
  .dm-root main > div > section p[style*="34ch"],
  .dm-root main > section p[style*="34ch"],
  .dm-root main > div > section p[style*="32ch"] {
    max-width: 100% !important;
  }
}

/* --- Tablet + mobile: every case-study block fills the container ----------- */
@media (max-width: 1100px) {
  .dm-root article,
  .dm-root article > div,
  .dm-root article > p,
  .dm-root article figure,
  .dm-root article figure > div,
  .dm-root article figure img,
  .dm-root article > div > div,
  .dm-root article > div > div > div,
  .dm-root article aside {
    max-width: 100% !important;
    width: 100% !important;
    flex-basis: 100% !important;
    min-width: 0 !important;
  }
  .dm-root article > div[style*="flex-wrap:wrap"] {
    display: block !important;
  }
  .dm-root article aside {
    position: static !important;
    margin-top: clamp(24px, 5vw, 40px) !important;
  }
}

/* --- Mobile + tablet: case study spacing and type scale ------------------- */
@media (max-width: 1100px) {
  .dm-root [data-case-modal] > div:last-child > div,
  .dm-root main > div > div > article {
    gap: clamp(16px, 2.6vw, 26px) !important;
  }
  .dm-root article {
    gap: clamp(16px, 3vw, 26px) !important;
  }
  .dm-root article > div[style*="flex-wrap:wrap"] > div {
    gap: clamp(18px, 3.4vw, 30px) !important;
  }
  .dm-root article p,
  .dm-root article li {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
  .dm-root article > p[style*="36ch"] {
    font-size: clamp(19px, 4.6vw, 26px) !important;
    line-height: 1.25 !important;
  }
  .dm-root article figcaption {
    font-size: 13px !important;
  }
  .dm-root article aside span[style*="font-size:16px"] {
    font-size: 15px !important;
  }
  .dm-root article h3 {
    font-size: clamp(28px, 7.4vw, 44px) !important;
  }
}

/* --- Mobile: taller hero, larger headline --------------------------------- */
@media (max-width: 860px) {
  .dm-root main > section[aria-label="Introduction"] {
    min-height: 82vh !important;
    padding-top: 120px !important;
    padding-bottom: clamp(48px, 12vw, 88px) !important;
  }
  .dm-root main > section[aria-label="Introduction"] h1 {
    font-size: clamp(46px, 13.5vw, 76px) !important;
    line-height: 1.06 !important;
  }
}

/* --- Mobile + tablet: balance the case panel, shrink the close button ------ */
@media (max-width: 1100px) {
  /* The floated close button was reserving space on the right of the first
     blocks — pin it instead so every block gets the same gutter. */
  .dm-root [data-case-modal] > div:last-child > div {
    position: relative !important;
  }
  .dm-root [data-case-modal] [data-case-close] {
    position: absolute !important;
    top: clamp(12px, 2.4vw, 20px) !important;
    right: clamp(12px, 2.4vw, 20px) !important;
    float: none !important;
    margin: 0 !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 16px !important;
  }
  .dm-root article > div:first-child:not([data-stack-inner]) {
    padding-right: 44px !important;
  }
  .dm-root article p,
  .dm-root article li {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
  .dm-root article figcaption {
    font-size: 12px !important;
  }
  .dm-root article figure > div,
  .dm-root article > div[style*="aspect-ratio:16/10"] {
    aspect-ratio: 4 / 3 !important;
  }
}

/* --- Mobile: project card media matches the text column exactly ------------ */
@media (max-width: 860px) {
  .dm-root [data-stack-inner] {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: stretch !important;
  }
  .dm-root [data-stack-inner] > a,
  .dm-root [data-stack-inner] > div,
  .dm-root [data-stack-inner] > a > img {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    justify-self: stretch !important;
  }
}

/* --- Same rules, unscoped, so they apply regardless of wrapper class ------- */
@media (max-width: 1100px) {
  [style*="16.7vw"] { padding-left: clamp(20px,4.5vw,48px) !important; padding-right: clamp(20px,4.5vw,48px) !important; }
  [data-stack-inner] { padding: clamp(22px,3.4vw,44px) !important; gap: clamp(18px,2.6vw,30px) !important; }
  article p, article li { font-size: 15px !important; line-height: 1.6 !important; }
  article figcaption { font-size: 12px !important; }
  article figure, article figure > div, article figure img,
  article > div[style*="aspect-ratio:16/10"], article > p[style*="36ch"] { max-width: 100% !important; width: 100% !important; }
  article > div[style*="flex-wrap:wrap"] { display: block !important; }
  article aside { position: static !important; width: 100% !important; margin-top: clamp(24px,5vw,40px) !important; }
  [data-case-modal] > div:last-child > div { position: relative !important; }
  [data-case-modal] [data-case-close] {
    position: absolute !important; top: clamp(12px,2.4vw,20px) !important; right: clamp(12px,2.4vw,20px) !important;
    float: none !important; margin: 0 !important; width: 34px !important; height: 34px !important; font-size: 16px !important;
  }
  article > div:first-child:not([data-stack-inner]) { padding-right: 44px !important; }
}
@media (max-width: 860px) {
  [data-stack-inner] {
    display: block !important;
  }
  [data-stack-inner] > a,
  [data-stack-inner] > div {
    display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important;
  }
  [data-stack-inner] > a { height: clamp(200px,48vw,320px) !important; margin-bottom: 18px !important; }
  [data-stack] { gap: 18px !important; }
  main > section[aria-label="Introduction"] {
    min-height: 82vh !important; padding-top: 120px !important; padding-bottom: clamp(48px,12vw,88px) !important;
  }
  main > section[aria-label="Introduction"] h1 { font-size: clamp(46px,13.5vw,76px) !important; line-height: 1.06 !important; }
  main > div > section#work { padding-top: clamp(28px,7vw,48px) !important; padding-bottom: 14px !important; }
  main > div > section h2 { font-size: clamp(36px,12vw,68px) !important; }
}
@media (max-width: 700px) {
  [style*="16.7vw"] { padding-left: 20px !important; padding-right: 20px !important; }
  [data-stack-inner] { padding: 20px !important; }
}

/* --- Mobile: restore the gap between card media and copy ------------------- */
@media (max-width: 860px) {
  .dm-root [data-stack-inner] > a[data-open-case],
  [data-stack-inner] > a[data-open-case] {
    margin: 0 0 clamp(18px, 3vw, 28px) !important;
  }
  .dm-root [data-stack-inner] > div,
  [data-stack-inner] > div {
    margin: 0 !important;
  }
  /* Card padding stays symmetric on every side. */
  .dm-root [data-stack-inner],
  [data-stack-inner] {
    padding: clamp(20px, 3.4vw, 40px) !important;
  }
}

/* --- Mobile sticky nav: only the burger remains once scrolled -------------- */
@media (max-width: 900px) {
  header > a:first-child { transition: opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1); }
  header[data-scrolled="true"] > a:first-child { opacity: 0 !important; pointer-events: none !important; transform: translateX(-8px) !important; }
}

@keyframes ribbonDrift1 { 0%,100% { transform: translate(0,0) rotate(0deg) scale(1); } 20% { transform: translate(8%,6%) rotate(20deg) scale(1.18); } 45% { transform: translate(-6%,10%) rotate(-16deg) scale(0.88); } 70% { transform: translate(10%,-6%) rotate(14deg) scale(1.12); } }
@keyframes ribbonDrift2 { 0%,100% { transform: translate(0,0) rotate(0deg) scale(1); } 30% { transform: translate(-10%,-8%) rotate(-24deg) scale(1.22); } 60% { transform: translate(8%,6%) rotate(18deg) scale(0.85); } 85% { transform: translate(-4%,10%) rotate(-10deg) scale(1.1); } }