/*
 * DIBSIT design-system contract.
 *
 * Loaded after app.css. This file owns reusable visual roles, global design
 * decisions and responsive presentation. app.css owns component mechanics.
 *
 * CSS breakpoint constants: compact <= 980px, mobile <= 680px.
 */

@font-face{
  font-family:"DIBSIT Unsteady";
  src:url("https://raw.githubusercontent.com/Jorgelino328/overclocked/c3e96d93e3d67478a12ed56d8152a6cba562bf01/assets/fonts/public_domain/opentype_fonts/Unsteady%20Oversteer.otf") format("opentype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

:root{
  /* Theme aliases */
  --ds-page-max:var(--max);
  --ds-font-sans:var(--font);
  --ds-font-mono:var(--mono);

  /* Spacing: use the nearest value; on an exact tie use the larger value. */
  --ds-space-1:4px;
  --ds-space-2:8px;
  --ds-space-3:12px;
  --ds-space-4:16px;
  --ds-space-5:24px;
  --ds-space-6:32px;
  --ds-space-7:48px;
  --ds-space-8:64px;
  --ds-space-9:96px;
  --ds-space-10:128px;
  --ds-space-11:160px;
  --ds-space-12:192px;

  /* Text measures */
  --ds-measure-narrow:520px;
  --ds-measure-default:560px;
  --ds-measure-wide:590px;

  /* Layout */
  --ds-mobile-content-left:var(--ds-space-7);
  --ds-mobile-content-right:var(--ds-space-4);
  --ds-hero-min-height:calc(100svh - var(--ds-space-10));
  --ds-hero-min-height-mobile:calc(100svh - var(--ds-space-9));
  --ds-hero-columns:minmax(0,.86fr) minmax(300px,.82fr);
  --ds-hero-gap:clamp(var(--ds-space-6),6vw,var(--ds-space-9));
  --ds-hero-gap-compact:var(--ds-space-6);
  --ds-hero-gap-mobile:var(--ds-space-5);
  --ds-section-space:clamp(var(--ds-space-9),14vw,var(--ds-space-12));
  --ds-section-space-mobile:var(--ds-space-9);
  --ds-intro-gap:clamp(var(--ds-space-6),7vw,var(--ds-space-10));
  --ds-intro-after:clamp(var(--ds-space-8),9vw,var(--ds-space-10));
  --ds-project-flow-gap:clamp(var(--ds-space-10),15vw,var(--ds-space-12));
  --ds-project-gap:clamp(var(--ds-space-5),6vw,var(--ds-space-9));
  --ds-project-gap-mobile:var(--ds-space-6);
  --ds-about-gap:clamp(var(--ds-space-6),8vw,var(--ds-space-10));

  /* Heading roles */
  --ds-heading-weight:450;
  --ds-heading-transform:uppercase;
  --ds-heading-hero-size:clamp(3.35rem,6.6vw,7rem);
  --ds-heading-hero-line:.88;
  --ds-heading-hero-tracking:-.068em;
  --ds-heading-section-size:clamp(3rem,5.7vw,6.4rem);
  --ds-heading-section-line:.93;
  --ds-heading-section-tracking:-.064em;
  --ds-heading-project-size:clamp(2.8rem,5vw,5.4rem);
  --ds-heading-project-line:.94;
  --ds-heading-project-tracking:-.06em;
  --ds-heading-hero-size-mobile:clamp(2.7rem,12vw,4rem);
  --ds-heading-hero-line-mobile:.9;
  --ds-heading-hero-tracking-mobile:-.058em;
  --ds-heading-section-size-mobile:clamp(2.25rem,10.8vw,3.6rem);
  --ds-heading-section-line-mobile:.96;
  --ds-heading-section-tracking-mobile:-.052em;
  --ds-heading-project-size-mobile:clamp(2.15rem,10.2vw,3.4rem);
  --ds-heading-project-line-mobile:.97;
  --ds-heading-project-tracking-mobile:-.05em;

  /* Copy roles */
  --ds-copy-body-size:15px;
  --ds-copy-body-size-mobile:14px;
  --ds-copy-body-line:1.84;
  --ds-copy-lead-size:clamp(.96rem,1.08vw,1.06rem);
  --ds-copy-lead-size-mobile:.94rem;
  --ds-copy-lead-line:1.72;
  --ds-copy-lead-line-mobile:1.68;

  /* Motion */
  --ds-motion-fast:160ms;
  --ds-motion-default:240ms;
  --ds-motion-slow:400ms;
  --ds-motion-ambient:700ms;
  --ds-ease-standard:cubic-bezier(.2,.7,.2,1);
  --ds-ease-soft:ease;
  --ds-ease-linear:linear;

  /* Technical Voronoi layer */
  --ds-tech-opacity:.76;
  --ds-tech-opacity-dark:.84;
  --ds-tech-opacity-mobile:.84;
  --ds-tech-opacity-mobile-dark:.9;
}

/* Global base presentation */
body{
  transition:
    background var(--ds-motion-default) var(--ds-ease-soft),
    color var(--ds-motion-default) var(--ds-ease-soft);
}

.wrap{
  width:min(calc(100% - var(--ds-space-7)),var(--ds-page-max));
  margin-inline:auto;
}

.micro{
  font:500 10px/1.55 var(--ds-font-mono);
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--muted);
}

.brand{
  font-family:"DIBSIT Unsteady",var(--ds-font-sans);
  font-size:26px;
  font-weight:700;
  font-synthesis:weight;
  line-height:1;
  letter-spacing:-.08em;
  text-transform:lowercase;
  white-space:nowrap;
  color:var(--ink);
  background:transparent !important;
  box-shadow:none !important;
  border:0;
  padding:0;
  -webkit-text-stroke:.25px currentColor;
  paint-order:stroke fill;
}

html[data-theme="dark"] .brand{
  color:var(--ink);
  background:transparent !important;
}

/* Semantic heading roles: HTML level describes structure, class describes appearance. */
.heading-hero,
.heading-section,
.heading-project{
  margin:0;
  font-weight:var(--ds-heading-weight);
  text-transform:var(--ds-heading-transform);
}

.heading-hero{
  font-size:var(--ds-heading-hero-size);
  line-height:var(--ds-heading-hero-line);
  letter-spacing:var(--ds-heading-hero-tracking);
}

.heading-section{
  font-size:var(--ds-heading-section-size);
  line-height:var(--ds-heading-section-line);
  letter-spacing:var(--ds-heading-section-tracking);
}

.heading-project{
  font-size:var(--ds-heading-project-size);
  line-height:var(--ds-heading-project-line);
  letter-spacing:var(--ds-heading-project-tracking);
}

.heading-hero .accent,
.heading-section .accent,
.heading-project .accent{
  color:var(--accent);
}

/* Semantic copy roles */
.copy-lead,
.copy-body{
  margin:0;
  color:var(--muted);
}

.copy-lead{
  font-size:var(--ds-copy-lead-size);
  line-height:var(--ds-copy-lead-line);
}

.copy-body{
  font-size:var(--ds-copy-body-size);
  line-height:var(--ds-copy-body-line);
}

.measure-narrow{max-width:var(--ds-measure-narrow);}
.measure-default{max-width:var(--ds-measure-default);}
.measure-wide{max-width:var(--ds-measure-wide);}

/* Shared text actions and metadata */
.text-link{
  gap:var(--ds-space-5);
  margin-top:var(--ds-space-6);
  padding-bottom:var(--ds-space-2);
  border-bottom:1px solid currentColor;
  font:500 11px/1.3 var(--ds-font-mono);
  text-transform:uppercase;
  letter-spacing:.05em;
}

.text-link span{
  color:var(--accent);
  transition:transform var(--ds-motion-default) var(--ds-ease-standard);
}

.text-link:hover span{
  transform:translateX(6px);
}

.project-tags{
  gap:var(--ds-space-2) var(--ds-space-4);
  margin-top:var(--ds-space-5);
  color:var(--muted);
  font:500 10px/1.5 var(--ds-font-mono);
  text-transform:uppercase;
  letter-spacing:.06em;
}

.project-tags span::before{
  content:"-";
  margin-right:var(--ds-space-2);
  color:var(--accent);
}

/* Main layout rhythm */
.hero{
  padding:var(--ds-space-9) 0 var(--ds-space-7);
}

.hero-grid{
  min-height:var(--ds-hero-min-height);
  grid-template-columns:var(--ds-hero-columns);
  gap:var(--ds-hero-gap);
}

.hero-copy{
  max-width:var(--ds-measure-wide);
}

.hero-copy .copy-lead{
  margin-top:var(--ds-space-5);
}

.hero-copy .text-link{
  margin-top:var(--ds-space-5);
}

.hero-side{
  min-height:360px;
}

.section-shell{
  padding:var(--ds-section-space) 0;
}

.intro-block{
  gap:var(--ds-intro-gap);
  margin-bottom:var(--ds-intro-after);
}

.intro-block .copy-body,
.project-copy .copy-body{
  margin-top:var(--ds-space-5);
}

.project-flow{
  gap:var(--ds-project-flow-gap);
}

.project{
  min-height:64svh;
  gap:var(--ds-project-gap);
}

.project-copy{
  max-width:var(--ds-measure-wide);
}

.project-space{
  min-height:240px;
}

.about{
  gap:var(--ds-about-gap);
}

.about .heading-section,
.contact .heading-section{
  margin:var(--ds-space-4) 0 var(--ds-space-5);
}

.about-space{
  min-height:260px;
}

.contact{
  min-height:74svh;
  text-align:center;
}

.contact-inner{
  max-width:860px;
  padding:var(--ds-space-9) 0;
}

.contact-inner .copy-body{
  margin-inline:auto;
}

footer{
  padding:var(--ds-space-5) 0 var(--ds-space-6);
  color:var(--muted);
}

.footer-row{
  gap:var(--ds-space-4);
}

/* Voronoi image and technical presentation */
.grid-photo{
  opacity:.85;
  filter:grayscale(0) contrast(1.08) brightness(.88);
  transition:
    opacity var(--ds-motion-default) var(--ds-ease-soft),
    filter var(--ds-motion-default) var(--ds-ease-soft);
}

html[data-theme="dark"] .grid-photo{
  opacity:.85;
  filter:grayscale(0) contrast(1.08) brightness(.82);
}

.grid-tech{
  opacity:var(--ds-tech-opacity);
  transition:opacity var(--ds-motion-default) var(--ds-ease-soft);
}

.grid-tech-line{
  stroke:var(--line-strong);
  stroke-width:1.15;
}

.grid-tech-line-soft{
  stroke:var(--line-strong);
  stroke-width:.85;
  opacity:.62;
}

.grid-tech-line-accent{
  stroke:var(--accent);
  stroke-width:1.35;
}

.grid-tech-node{
  fill:var(--bg);
  stroke:var(--line-strong);
  stroke-width:1.1;
}

.grid-tech-node-accent{
  fill:var(--accent);
  stroke:var(--accent);
  stroke-width:1;
}

.grid-tech-text{
  fill:var(--muted);
  font:500 9px/1 var(--ds-font-mono);
  letter-spacing:.085em;
}

.grid-tech-text-strong{
  fill:var(--ink);
  font:650 9px/1 var(--ds-font-mono);
  letter-spacing:.085em;
}

.grid-tech-text-accent{
  fill:var(--accent);
  font:650 9px/1 var(--ds-font-mono);
  letter-spacing:.085em;
}

.grid-tech-value{
  fill:var(--ink);
  font:560 18px/1 var(--ds-font-mono);
  letter-spacing:-.035em;
}

.grid-tech-label{
  fill:var(--muted);
  font:500 7px/1 var(--ds-font-mono);
  letter-spacing:.08em;
}

html[data-theme="dark"] .grid-tech{
  opacity:var(--ds-tech-opacity-dark);
}

/* Legal page presentation reuses global roles. */
.legal-shell{
  min-height:calc(100svh - var(--ds-space-9));
  padding:var(--ds-space-10) 0 var(--ds-space-8);
}

.legal-content{
  padding-left:clamp(0px,3vw,var(--ds-space-7));
}

.legal-content .heading-section{
  margin:var(--ds-space-3) 0 var(--ds-space-6);
}

.legal-block{
  margin-top:var(--ds-space-6);
  padding-top:var(--ds-space-5);
}

.legal-block:first-of-type{
  margin-top:0;
}

.legal-label{
  margin-bottom:var(--ds-space-3);
}

.legal-address{
  color:var(--ink);
}

.legal-back{
  margin-top:var(--ds-space-6);
}

@media (max-width:980px){
  .hero-grid{
    grid-template-columns:minmax(0,1fr);
    gap:var(--ds-hero-gap-compact);
  }

  .hero-side{
    min-height:clamp(220px,31vw,300px);
  }

  .project-space{
    min-height:220px;
  }

  .about-space{
    min-height:200px;
  }
}

@media (max-width:680px){
  html,
  body,
  .page{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  :root{
    --nav-safe-left:0px;
  }

  main,
  footer{
    width:100%;
    max-width:100%;
    padding-left:0;
  }

  .wrap{
    width:auto;
    max-width:none;
    margin-left:var(--ds-mobile-content-left);
    margin-right:var(--ds-mobile-content-right);
  }

  .brand{
    font-size:23px;
  }

  .hero-grid > *,
  .intro-block > *,
  .project > *,
  .about > *{
    min-width:0;
  }

  .hero{
    min-height:100svh;
    padding:var(--ds-space-8) 0 var(--ds-space-6);
  }

  .hero-grid{
    grid-template-columns:minmax(0,1fr);
    min-height:var(--ds-hero-min-height-mobile);
    gap:var(--ds-hero-gap-mobile);
    align-content:start;
  }

  .hero-copy{
    width:100%;
    max-width:100%;
    padding-left:0;
  }

  .heading-hero,
  .heading-section,
  .heading-project{
    max-width:100%;
  }

  .heading-hero{
    font-size:var(--ds-heading-hero-size-mobile);
    line-height:var(--ds-heading-hero-line-mobile);
    letter-spacing:var(--ds-heading-hero-tracking-mobile);
  }

  .heading-section{
    font-size:var(--ds-heading-section-size-mobile);
    line-height:var(--ds-heading-section-line-mobile);
    letter-spacing:var(--ds-heading-section-tracking-mobile);
  }

  .heading-project{
    font-size:var(--ds-heading-project-size-mobile);
    line-height:var(--ds-heading-project-line-mobile);
    letter-spacing:var(--ds-heading-project-tracking-mobile);
  }

  .copy-lead,
  .copy-body,
  .measure-narrow,
  .measure-default,
  .measure-wide,
  .project-tags,
  .footer-row{
    width:100%;
    max-width:100%;
    overflow-wrap:break-word;
    word-break:normal;
  }

  .copy-lead{
    font-size:var(--ds-copy-lead-size-mobile);
    line-height:var(--ds-copy-lead-line-mobile);
  }

  .copy-body{
    font-size:var(--ds-copy-body-size-mobile);
  }

  .text-link{
    max-width:100%;
    gap:var(--ds-space-4);
  }

  .hero-side{
    min-height:clamp(170px,50vw,240px);
  }

  .section-shell{
    padding:var(--ds-section-space-mobile) 0;
  }

  .project{
    min-height:auto;
    gap:var(--ds-project-gap-mobile);
  }

  .project-space{
    min-height:clamp(180px,48vw,240px);
  }

  .about-space{
    min-height:clamp(170px,44vw,220px);
  }

  .contact-inner{
    padding-left:0;
    padding-right:0;
  }

  .grid-tech{
    opacity:var(--ds-tech-opacity-mobile);
  }

  html[data-theme="dark"] .grid-tech{
    opacity:var(--ds-tech-opacity-mobile-dark);
  }

  .grid-tech-text,
  .grid-tech-text-strong,
  .grid-tech-text-accent{
    font-size:8.5px;
  }

  .grid-tech-value{
    font-size:16px;
  }

  .legal-shell{
    padding:var(--ds-space-9) 0 var(--ds-space-8);
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}