/* APPEARANCE — shared portfolio skin. Keep this stylesheet last.
   Day uses the original palette. Night changes semantic UI colors, never
   artwork or case-study screenshots. Night borrows Nullform Art's type,
   charcoal/steel palette, and hard geometry. Day stays soft and rounded. */
@font-face {
  font-family: 'Portfolio Geologica';
  src: url('../images/projects/nullform-art/geologica.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root { color-scheme: light; }
:root[data-theme="night"] {
  color-scheme: dark;
  --cream: #151215;
  --surface: #24292f;
  --inverse-surface: #101014;
  --ink: #f4f4f4;
  --ink-soft: #d0d5d9;
  --warm-gray: #b7c0c3;
  --light-gray: #3d434a;
  --teal: #00eeee;
  --teal-deep: #83dede;
  --teal-light: #1e3439;
  --sans: 'Portfolio Geologica', Calibri, Arial, sans-serif;
  --serif: var(--sans);
  --mono: Consolas, 'Courier New', monospace;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-pill: 0px;
  --accent-coral: #ff9786;
  --shadow-soft: 0 8px 30px rgba(0, 0, 0, .18);
  --shadow-hover: 0 12px 40px rgba(0, 0, 0, .28);
  --night-line: #41474e;
}

/* Quiet switch: rounded in Day, square in Night. Native keyboard navigation. */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  color: #b6bfca;
  background: var(--inverse-surface, #1a1a2e);
}
.footer-copyright { line-height: 1.6; }
.theme-picker {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 3px;
  border: 1px solid rgba(188, 209, 212, .16);
  border-radius: 999px;
  background: transparent;
  color: #afb8bc;
  font: 400 .8rem/1 'Outfit', system-ui, sans-serif;
}
.theme-picker[hidden] { display: none; }
.theme-picker legend,
.theme-auto-note,
.theme-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.theme-option { position: relative; cursor: pointer; }
.theme-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
}
.theme-option input:checked + span {
  color: #a0d9d7;
  background: rgba(131, 222, 222, .085);
}
.theme-option input:focus-visible + span {
  outline: 2px solid #8beae3;
  outline-offset: 3px;
}
@media (hover: hover) {
  .theme-option:hover span { background: rgba(190, 207, 209, .1); color: #f0f4f2; }
}
@media (max-width: 600px) {
  .footer { flex-direction: column; justify-content: center; text-align: center; }
}

/* The same skyline after dark: industrial steel and a cold, distant glow.
   Filters apply only to decorative parallax layers, never content images. */
[data-theme="night"] .hero {
  background: radial-gradient(ellipse at 65% 65%, #333e46 0%, #1a2027 44%, #151215 85%);
}
[data-theme="night"] .parallax-layer--sun { filter: grayscale(1); opacity: .35; }
[data-theme="night"] .parallax-layer--l1 { filter: grayscale(1) brightness(.48); }
[data-theme="night"] .parallax-layer--l2 { filter: grayscale(1) brightness(.52); }
[data-theme="night"] .parallax-layer--l3 { filter: grayscale(1) brightness(.68); }
[data-theme="night"] .parallax-layer--l4 { filter: grayscale(1) brightness(.76); }
[data-theme="night"] .parallax-layer--l5 { filter: grayscale(1) brightness(.85); }
[data-theme="night"] .pelican { color: #101014; }
[data-theme="night"] .parallax-blur { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
[data-theme="night"] .hero::before {
  background: radial-gradient(ellipse at 50% 35%, rgba(16, 16, 20, .5), transparent 75%);
}
[data-theme="night"] .hero-accent { color: #83dede; }
[data-theme="night"] .nav.scrolled,
[data-theme="night"] body.menu-open .nav,
[data-theme="night"] body > nav:not(.nav) {
  background: rgba(21, 18, 21, .96);
  box-shadow: 0 1px 0 var(--night-line);
}
[data-theme="night"] .mobile-menu { background: #24292f; }

/* Explicit controls keep dark ink on bright cyan (white would wash out). */
[data-theme="night"] :is(.btn-primary, .form-submit, .gate-btn),
[data-theme="night"] :is(.btn-outline, .project-cta):hover,
[data-theme="night"] :is(.featured-filter, .archive-filter):is(.active, .is-active, :hover),
[data-theme="night"] :is(.progression-tab, .pb-tab).active {
  background: var(--teal);
  border-color: var(--teal);
  color: #072425;
}
[data-theme="night"] :is(.btn-primary, .form-submit, .gate-btn):hover { background: #8beae3; color: #072425; }
[data-theme="night"] :is(.featured-filter, .archive-filter, .card, .archive-tile, .writing-card,
  .project-card, .exp-item, .gallery-cta, .context-bar, .progression-tab, .pb-tab,
  .dev-block, .dev-block-header, .field-input, .gate-input) { border-color: var(--night-line); }
[data-theme="night"] :is(.btn-outline, .project-cta) { border-color: rgba(128, 226, 219, .45); }
[data-theme="night"] :is(.carousel-btn, .lightbox-nav) { background: #25383c; color: #eff2ee; }
[data-theme="night"] :is(.carousel-btn, .lightbox-nav):hover { background: #395457; }
[data-theme="night"] .carousel-dot { background: #64777b; }
[data-theme="night"] .carousel-dot.active { background: var(--teal); }
[data-theme="night"] .carousel-label { color: var(--warm-gray); }
[data-theme="night"] .toast-close { color: var(--ink-soft); }
[data-theme="night"] .archive-tile-img--placeholder { background: linear-gradient(135deg, #123c39, #1c5b55); }
/* Client marks are monochrome identity assets, separate from the artwork. */
[data-theme="night"] .clients-grid img { filter: grayscale(1) invert(1) brightness(1.25); }
/* Printed workshop notes and demo cards intentionally retain their own paper. */
[data-theme="night"] :is(.pb-card, .loader-card:not(.dark)) { --ink: #1a1a2e; --warm-gray: #6b6b7b; }
[data-theme="night"] .loader-card.dark { --ink: #eff2ee; }
[data-theme="night"] body:not(.nullform-art-exiting) .page-loader { background: rgba(21, 18, 21, .96); }
[data-theme="night"] .page-loader .pl-grid span { background: #80e2db; }
[data-theme="night"] .footer { border-top-color: var(--night-line); }
/* The locked project uses a pale copyright footer in Day. */
[data-theme="night"] .footer { background: var(--inverse-surface); }

/* Nullform's geometry and type rhythm — content stays in the same order. */
[data-theme="night"] :is(h1, h2, h3, h4, .exp-company, .project-title) {
  font-weight: 400;
  letter-spacing: -.045em;
}
[data-theme="night"] .hero h1 {
  font-size: clamp(3.75rem, 10vw, 8rem);
  line-height: 1;
  letter-spacing: -.065em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  text-shadow: none;
}
[data-theme="night"] .hero-plate { max-width: min(94%, 960px); }
[data-theme="night"] .hero-tagline { font-size: clamp(1rem, 1.8vw, 1.2rem); font-weight: 400; letter-spacing: 0; }
[data-theme="night"] :is(.section-heading, .site-contact-heading) {
  font-size: clamp(2.1rem, 4.5vw, 3.75rem);
  line-height: 1.1;
}
[data-theme="night"] :is(.section-label, .project-label, .project-meta-label, .project-category,
  .archive-tile-meta, .writing-type, .hero-note, .exp-dates,
  .context-item-label, .tag, .nav-links a, .nav-back, .field-label) {
  font-family: var(--mono);
  font-weight: 400;
}
[data-theme="night"] .hero-note { color: #c3caca; letter-spacing: .12em; }
[data-theme="night"] .nav-logo {
  font-family: 'DM Serif Display', Georgia, serif;
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #50555b;
  background: #151215;
  color: #f4f4f4;
}
[data-theme="night"] .nav-links a { font-size: .78rem; }
[data-theme="night"] :is(.project-img, .archive-tile, .gallery-tile, .gallery-tile-img,
  .zoomable, .lightbox-stage, .lightbox-img, .carousel-btn, .lightbox-nav,
  .lightbox-close, .lightbox-zoom, .lightbox-zoom-btn, .progression-tab, .pb-tab,
  .field-input, .form-submit, .gate-input, .gate-btn, .btn-primary, .btn-outline,
  .featured-filter, .archive-filter, .card, .tag, .project-cta, .toast,
  .writing-card, .writing-img, .theme-picker, .theme-option span,
  .callout, .carousel-wrapper, .carousel-dot, .progression-stage,
  .text-with-image img, .text-with-image .image-placeholder,
  .image-grid img, .image-grid .image-placeholder,
  .dev-tab, .dev-tabs, .dev-menu-toggle, .dev-menu-toggle span,
  .dev-block-header code, .loader-card, .kudos-board, .pb-card,
  .pb-dot, .nav-toggle-bar, .page-loader .pl-grid span) { border-radius: 0; }
[data-theme="night"] :focus-visible { border-radius: 0; }
[data-theme="night"] .theme-picker { font-family: var(--mono); }
[data-theme="night"] :is(.featured-filter, .archive-filter) {
  font-family: var(--mono);
  font-size: .8rem;
  border-width: 1px;
}
[data-theme="night"] :is(.featured-filter, .archive-filter).is-active {
  color: var(--teal);
  background: #253439;
  border-color: var(--teal);
  box-shadow: inset 3px 0 0 var(--teal);
}
[data-theme="night"] .project-img { border: 1px solid var(--night-line); }
[data-theme="night"] .project-cta.link-arrow { padding: .75rem 1.15rem; border-width: 1px; }
[data-theme="night"] .tag { font-size: .75rem; border-left: 2px solid #747c83; background: #24292f; }
[data-theme="night"] .pillar { border-top: 3px solid #747c83; background: #1c2025; }
[data-theme="night"] .pillar-number { font-family: var(--mono); color: #83dede; opacity: 1; font-size: 1rem; }
[data-theme="night"] .writing-card { border-left: 3px solid #747c83; }
[data-theme="night"] .about-aside { border-top: 3px solid #747c83; }
[data-theme="night"] .site-contact-intro { text-align: left; }
[data-theme="night"] .site-contact-text { max-width: 760px; color: #b7c0c3; }
[data-theme="night"] .bg-ink .field-input { background: #1c2025; border-color: #50555b; }
[data-theme="night"] .bg-ink .field-input::placeholder { color: #a5adad; opacity: 1; }
[data-theme="night"] .form-submit { border: 1px solid var(--teal); }
[data-theme="night"] :is(.bg-white, .clients, .site-contact) { border-top: 1px solid var(--night-line); }
@media (hover: hover) and (pointer: fine) {
  [data-theme="night"] :is(.card--hoverable, .archive-tile, .gallery-tile, .writing-card):hover {
    transform: none;
    box-shadow: 0 0 0 1px #83dede;
  }
}
@media (max-width: 600px) {
  [data-theme="night"] .hero-plate { margin-top: -180px; }
  [data-theme="night"] .hero h1 { font-size: clamp(3.3rem, 15vw, 5.5rem); }
  [data-theme="night"] .hero-tagline { font-size: 1rem; }
}
@media (max-height: 560px) and (min-width: 601px) {
  [data-theme="night"] .hero-plate { margin-top: 0; }
  [data-theme="night"] .hero h1 { font-size: clamp(3.5rem, 8vw, 5rem); }
}