/* =========================================================
   SITE THEME — Miami Nights palette: light grey #ECEDEE page, white #F9FCFB
   cards, navy #182335 ink + sidebar, salmon #FFB29C buttons +
   brush, pink #FFCFD2 text highlights only; navy #182335 sidebar + scroller.
   ========================================================= */
:root{
  --t-page:#ECEDEE;
  --t-card:#F9FCFB;
  --t-soft:#FFFFFF;
  --t-fill:#d9dbde;
  --t-ink:#182335;
  --t-muted:#4a5468;
  --t-label:#C4593C;
  --t-line:rgba(24,35,53,.16);
  --t-stone:#FFB29C;
  --t-red:#D96A4C;
  color-scheme:light;
}
html, body{ background:var(--t-page) !important; color:var(--t-ink); }
::selection{ background:#FFCFD2; color:#182335; }

/* sidebar */
:root{ --chrome-bg:#182335; --chrome-ink:#F9FCFB; }

/* props that are paper stay paper */
html body .ad-s-top{ background:#fbfbf8 !important; }
html body .ad-s-front{ background:repeating-linear-gradient(#fdfdfb 0 2px, #d8d7d0 2px 3px) !important; }
html body .ad-s-side{ background:repeating-linear-gradient(#f4f3ee 0 2px, #cfcec6 2px 3px) !important; }
/* fridge note cards keep dark ink on cream paper */
html body .sp-magnet-text{ color:#182335 !important; }
html body .sp-magnet-text p:not(.small-label){ color:#3a4150 !important; }
html body .sp-magnet-text .small-label{ color:#C4593C !important; }

/* =========================================================
   SLEEK — bold condensed caps, square outlined scarlet
   buttons, sharp corners (after the "Silent Power" reference)
   ========================================================= */
@font-face{
  font-family:'Oswald';
  src:url('fonts/Oswald-var.woff') format('woff');   /* SIL OFL, fonts/Oswald-OFL.txt */
  font-weight:200 700;
  font-style:normal;
  font-display:swap;
}
:root{ --t-cond:'Oswald', 'Work Sans', Arial, sans-serif; }

/* buttons: square, outlined in scarlet, fill on hover */
html body .work-card .explore-btn,
html body .contact-action,
html body .resume-peek-cta,
html body .back-to-top,
html body .mobile-notice-primary,
html body .project-end-links a{
  border-radius:0 !important;
  border:2px solid #D96A4C !important;
  background:transparent !important;
  color:#FFFFFF !important;
  box-shadow:none !important;
  font-family:var(--t-cond) !important;
  font-weight:500 !important;
  font-size:15px !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
}
html body .back-to-top{ display:inline-flex; padding:10px 18px; }
@media (hover:hover) and (pointer:fine){
  html body .work-card .explore-btn:hover,
  html body .contact-action:hover,
  html body .resume-peek:hover .resume-peek-cta,
  html body .back-to-top:hover{
    background:#D96A4C !important;
    color:#fff !important;
    box-shadow:none !important;
  }
}
html body .contact-action.is-copied{ background:#FFB29C !important; border-color:#FFB29C !important; color:#182335 !important; }
html body .gx-nav{ border-radius:0; border-color:#182335; background:#D96A4C; }
html body .gx-dot{ border-radius:0; }

/* labels and small caps in a condensed face */
html body .eyebrow,
html body .small-label,
html body .section-number,
html body .project-type,
html body .project-link,
html body .pj-num,
html body .dx .dx-eyebrow,
html body .dx .dx-label,
html body .dx .dx-num,
html body .dx .dx-step-label,
html body .rx .rx-eyebrow,
html body .rx .rx-label,
html body .resume-section .resume-folder-label,
html body .work-meta span,
html body .date-range,
html body .contact-links a span,
html body .project-facts span,
html body .dx .dx-facts dt,
html body .rx-facts dt{
  font-family:var(--t-cond) !important;
  font-weight:500 !important;
  letter-spacing:.08em !important;
}
html body .project-link,
html body .contact-links a:hover b{ color:#D96A4C !important; }

/* sharp corners */
html body .project-box,
html body .work-image,
html body .work-image img,
html body .art-card,
html body .project-thumb,
html body .project-facts,
html body .project-jump a,
html body .pj-icon,
html body .dx-chips li,
html body .dx .dx-index a,
html body .rx-skills li,
html body .rx-findings-card,
html body .rx-figure img,
html body .dx-figure img,
html body .dx-case-cover,
html body .gx-zoom, html body .gx-zoom img,
html body .ad-props,
html body .ad-feature,
html body .ad-thumb,
html body .ss-video video,
html body .ss-shot img,
html body .ss-text,
html body .vv-terminal,
html body .sp-takeaway,
html body .sketchy-text-panel,
html body .project-two-intro-copy,
html body .project-meta,
html body .reference-text-card,
html body .project-three-text-card,
html body .project-three-media,
html body .large-media img,
html body .resume-lightbox-inner,
html body .art-grid-item, html body .art-grid img{
  border-radius:0 !important;
}


/* =========================================================
   CARDS ARE WHITE — not another shade of dark blue.
   Inside them the ink flips back to Egyptian blue.
   ========================================================= */
:root{ --t-card:#F9FCFB; --t-soft:#FFFFFF; --t-line-rgb:24,35,53; }
html body .ad-prop,
html body .ad-prop-media,
html body .ad-stage .ad-props,
html body .bird-asset-card,
html body .description-box,
html body .design-section,
html body .design-text-box,
html body .detail-image,
html body .dx .dx-chips li,
html body .dx-case-cover,
html body .dx-compare,
html body .dx-index a,
html body .final-project,
html body .findings,
html body .garden-note-card,
html body .image-placeholder,
html body .mosaic-text-card,
html body .presentation,
html body .project-box,
html body .project-details,
html body .project-facts,
html body .project-intro,
html body .project-jump a,
html body .project-meta,
html body .project-three-text-card,
html body .reference-card,
html body .reference-text-card,
html body .resume-display,
html body .resume-peek-back,
html body .resume-peek-pocket,
html body .resume-peek-sheet,
html body .rx-findings-card,
html body .rx-skills li,
html body .sketchy-media-card,
html body .sketchy-screenshot,
html body .sketchy-sprite-card,
html body .sketchy-text-panel,
html body .ss-text,
html body .static-asset-card,
html body .sp-takeaway{
  --t-ink:#182335;
  --t-muted:#4a5468;
  --t-label:#C4593C;
  --t-line-rgb:24,35,53;
  color:var(--t-ink);
}

/* headings in scarlet */
html body h1:not(.hero-name),
html body h2,
html body .dx .dx-title,
html body .rx .rx-title,
html body .ap-title{ color:#D96A4C !important; }
html body .rx-title .rx-ch.is-hot{ animation:none; }

/* the contact area is a band of the page, not a card */
html body .contact-section{ background:transparent !important; }

/* salmon for secondary accents */
html body .work-meta b{ color:#D96A4C !important; }
html body .gx-dot.is-on, html body .gx-dot.is-on:hover{ background:#FFB29C; }
html body .ad-thumb.is-on{ outline-color:#FFB29C; }
html body .contact-links a span{ color:#D96A4C !important; }
html body .project-number{ color:#C4593C !important; }
html body footer{ background:transparent !important; color:var(--t-muted) !important; }

/* =========================================================
   Red sidebar, pink brush + section headings, cream page titles
   ========================================================= */
:root{ --chrome-bg:#182335; --chrome-ink:#F9FCFB; }
html body #snake-ghost{ stroke:rgba(24,35,53,.18) !important; }
html body h2{ color:#182335 !important; }
html body .work-meta b{ color:#D96A4C !important; }
html body .dx .dx-title,
html body .rx .rx-title,
html body h1.ap-title,
html body .project-hero h1{ color:#182335 !important; }
/* name on the pink brush */
html body .hero-name .hero-name-jianna{ color:#F9FCFB !important; }
html body .hero-name .teal-accent,
html body .hero-name .hero-name-shao{ color:#182335 !important; }

/* =========================================================
   BRIGHTER — cream panels behind sections, images and text.
   Section headings stay on the navy page; the content sits on cream.
   ========================================================= */
html body .t-panel,
html body .work-card,
html body #art .art-grid,
html body .resume-folders,
html body .contact-links,
html body .dx-skills,
html body .dx-step,
html body .gx-carousel,
html body .gx-blurb,
html body .rx-body-wide,
html body .rx-setup,
html body .rx-photos,
html body .rx-present,
html body .rx-outputs,
html body main.portfolio{
  background:#F9FCFB !important;
  --t-ink:#182335;
  --t-muted:#4a5468;
  --t-label:#C4593C;
  --t-line-rgb:24,35,53;
  --t-card:#F2F3F4;
  --t-soft:#F7F8F9;
  color:var(--t-ink);
  padding:clamp(22px, 3vw, 44px) !important;
  box-sizing:border-box;
}
html body .t-panel h2, html body .t-panel h3,
html body .work-card h3,
html body .dx-step h2, html body .dx-step h3,
html body .rx-present h2, html body .rx-outputs h3{ color:#182335 !important; }
html body .t-panel p, html body .work-card p,
html body .dx-step p, html body .rx-body-wide p, html body .rx-setup p,
html body .rx-present p, html body .rx-outputs p,
html body .gx-blurb, html body figcaption{ color:var(--t-muted); }
html body .t-panel-project{ margin-top:clamp(18px, 2vw, 28px); }
/* buttons are solid red so they read on cream and on navy */
html body .work-card .explore-btn,
html body .contact-action,
html body .resume-peek-cta,
html body .back-to-top,
html body .mobile-notice-primary,
html body .project-end-links a{
  background:#D96A4C !important;
  color:#FFFFFF !important;
}
@media (hover:hover) and (pointer:fine){
  html body .work-card .explore-btn:hover,
  html body .contact-action:hover,
  html body .resume-peek:hover .resume-peek-cta,
  html body .back-to-top:hover,
  html body .project-end-links a:hover{
    background:#C4593C !important;
    border-color:#C4593C !important;
    color:#fff !important;
  }
}
html body .contact-links a span{ color:#C4593C !important; }
html body .contact-links a b{ color:#182335 !important; }
html body .resume-folder-label{ color:#C4593C !important; }
html body .resume-section .resume-folders{ padding:28px 24px !important; gap:28px 40px; flex-shrink:1; }

/* Lily palette touch-ups */
html body .hero-postcard-hint{ color:#182335 !important; }
html body .section .eyebrow, html body .eyebrow{ color:#D96A4C !important; }
html body .section-heading,
html body .project-hero hr,
html body .section-heading + *{ border-color:rgba(255,178,156,.6) !important; }
html body .work-result::before{ border-color:#FFB29C !important; }
html body .resume-lightbox{ background:rgba(24,35,53,.82) !important; }

/* Miami Nights buttons: salmon with deep-teal text, teal on hover */
html body .work-card .explore-btn,
html body .contact-action,
html body .resume-peek-cta,
html body .back-to-top,
html body .mobile-notice-primary,
html body .project-end-links a{
  background:#FFB29C !important;
  border-color:#FFB29C !important;
  color:#182335 !important;
}
@media (hover:hover) and (pointer:fine){
  html body .work-card .explore-btn:hover,
  html body .contact-action:hover,
  html body .resume-peek:hover .resume-peek-cta,
  html body .back-to-top:hover,
  html body .project-end-links a:hover{
    background:#182335 !important;
    border-color:#182335 !important;
    color:#F9FCFB !important;
  }
}
html body .gx-nav{ background:#FFB29C; border-color:#182335; }

/* Library Work carousel arrows: round, no ring */
html body .gx-nav{ border-radius:50% !important; border:0 !important; background:#FFB29C !important; color:#182335 !important; box-shadow:0 6px 16px -6px rgba(24,35,53,.35) !important; }
html body .gx-nav:hover{ background:#182335 !important; color:#F9FCFB !important; }

/* =========================================================
   MOBILE FIT — cards never run past the right edge
   ========================================================= */
@media (max-width:700px){
  html body .project-two-v16-layout{ grid-template-columns:minmax(0, 1fr) !important; gap:28px !important; }
  html body .project-two-right-column{ width:100% !important; margin:0 !important; }
  html body .t-panel,
  html body .work-card,
  html body #art .art-grid,
  html body .contact-links,
  html body .dx-skills,
  html body .dx-step,
  html body .gx-blurb,
  html body .rx-body-wide,
  html body .rx-setup,
  html body .rx-photos,
  html body .rx-present,
  html body .rx-outputs,
  html body main.portfolio{ padding:18px 16px !important; }
  html body .resume-section .resume-folders{ padding:18px 16px !important; width:100%; max-width:100%; }
  html body .resume-section .resume-folders .resume-peek{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:12px !important;
  }
  html body .t-panel img, html body .t-panel video, html body .t-panel figure,
  html body .rx img, html body .dx img{ max-width:100%; }
  html body .t-panel > *, html body .project-section > *{ min-width:0; max-width:100%; }
}
/* decorative pieces (blueprint lines, sparks) never widen the page */
html body main, html body .rx, html body .dx, html body .portfolio-header{ overflow-x:clip; }
html body .resume-section .resume-folders{ max-width:100%; box-sizing:border-box; flex-wrap:wrap; }
@media (max-width:1100px){
  html body .resume-section .resume-heading-row > *{ max-width:100%; }
}
@media (max-width:420px){
  html body .resume-section .resume-folder,
  html body .resume-section .resume-peek{ max-width:100%; }
}
@media (max-width:700px){
  html body .resume-section .resume-folders #cv-preview-button,
  html body .resume-section .resume-folders #resume-preview-button{ flex-direction:column !important; align-items:flex-start !important; }
  html body .resume-section .resume-folders #cv-preview-button .resume-peek-side{ align-items:flex-start !important; }
  html body .resume-section .resume-folders .resume-folder:last-child{ align-self:flex-start !important; }
}