/* ===== STUDIO NOVA — shared styles ===== */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap');

*{ margin:0; padding:0; box-sizing:border-box; }
:root{
  --ink:#0a0a0a; --paper:#f3f0e9; --paper2:#ece8df;
  --acid:#d8ff3e; --pink:#ff5cb8; --blue:#3d5cff; --orange:#ff6b2c;
  --shadow:6px 6px 0 var(--ink);
}
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%;
  overflow-x:hidden; }
body{ font-family:'Onest',sans-serif; background:var(--paper); color:var(--ink);
  width:100%; max-width:100%; overflow-x:hidden; -webkit-font-smoothing:antialiased;
  word-wrap:break-word; overflow-wrap:break-word; }
button,input,select,textarea{ font:inherit; }
/* One typeface across both language versions; hierarchy comes from weight. */
body *{ font-family:'Onest',sans-serif !important; }
/* clip (not hidden) prevents iOS from side-panning the page when a decorative
   element pokes past the edge — kills the horizontal jitter + fixes the fixed nav */
@supports (overflow:clip){ html,body{ overflow-x:clip; } }
::selection{ background:var(--acid); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; height:auto; }
.star{ display:inline-block; width:.8em; height:.8em; margin:0 .06em; vertical-align:-.06em;
  background:currentColor; -webkit-mask:url('img/star.svg') center/contain no-repeat; mask:url('img/star.svg') center/contain no-repeat; }
/* no-JS / old-browser safety: don't hide scroll-reveal content */
@media (scripting: none){ .reveal{ opacity:1 !important; transform:none !important; } }
/* old browsers without -webkit-text-stroke would render outlined text invisible */
@supports not ((-webkit-text-stroke: 2px #000) or (text-stroke: 2px #000)){
  .stroke{ -webkit-text-fill-color:currentColor !important; color:var(--ink) !important; }
}

/* film grain overlay */
.grain{ position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* custom cursor — ring + label + colored comet trail */
.cursor{ position:fixed; width:18px; height:18px; border-radius:50%; background:var(--ink); z-index:95;
  pointer-events:none; transform:translate(-50%,-50%); mix-blend-mode:difference;
  display:flex; align-items:center; justify-content:center;
  transition:width .28s cubic-bezier(.2,.8,.2,1),height .28s cubic-bezier(.2,.8,.2,1),background .25s; }
.cursor .lbl{ font-family:'Space Mono'; font-weight:700; font-size:13px; text-transform:uppercase;
  color:var(--ink); opacity:0; white-space:nowrap; transform:scale(.6); transition:opacity .2s,transform .2s; }
.cursor.big{ width:94px; height:94px; background:var(--acid); mix-blend-mode:normal; }
.cursor.big .lbl{ opacity:1; transform:scale(1); }
.trail{ position:fixed; width:11px; height:11px; border-radius:50%; z-index:94; pointer-events:none;
  transform:translate(-50%,-50%); mix-blend-mode:multiply; }
@media(hover:none){ .cursor,.trail{ display:none; } }

/* NAV */
nav{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; justify-content:space-between;
  align-items:center; gap:12px; padding:16px 28px; background:rgba(243,240,233,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:2px solid var(--ink); }
.navtoggle{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
nav .logo{ display:flex; align-items:center; font-weight:900; font-size:20px; letter-spacing:-1px; }
nav .logo img{ display:block; width:min(156px,38vw); height:auto; }
nav .links{ display:flex; gap:8px; font-family:'Space Mono'; font-size:13px; }
nav .links a{ padding:6px 12px; border:2px solid transparent; border-radius:30px; transition:.2s; }
nav .links a:hover,nav .links a.active{ border-color:var(--ink); }
nav .links a.cta{ background:var(--ink); color:var(--paper); }
nav .logo{ margin-right:auto; }
nav .links{ order:1; }
.burger{ order:3; }
.burger{ display:none; cursor:pointer; }

/* generic section */
.wrap{ max-width:1280px; margin:0 auto; padding:0 28px; }
section{ padding:80px 0; }
.label{ font-family:'Space Mono'; font-size:13px; text-transform:uppercase; letter-spacing:2px;
  border-top:2px solid var(--ink); padding-top:8px; margin-bottom:40px; display:flex; justify-content:space-between; }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:'Space Mono'; font-weight:700;
  font-size:15px; padding:14px 26px; border:2px solid var(--ink); border-radius:40px; background:var(--acid);
  transition:.2s; cursor:pointer; }
.btn:hover{ transform:translate(-3px,-3px); box-shadow:var(--shadow); }
.btn.dark{ background:var(--ink); color:var(--paper); }

/* WORK CARDS with visual */
.work-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.card{ position:relative; border:2px solid var(--ink); border-radius:14px; overflow:hidden; cursor:pointer;
  transition:transform .25s; background:var(--paper); display:flex; flex-direction:column; }
.card:hover{ transform:translate(-4px,-4px); box-shadow:var(--shadow); }
.card .thumb{ aspect-ratio:16/10; position:relative; overflow:hidden; border-bottom:2px solid var(--ink); }
.card .thumb > div{ position:absolute; inset:0; transition:transform .4s; }
.card:hover .thumb > div{ transform:scale(1.06); }
.card .info{ padding:16px 18px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.card .info h3{ font-size:20px; font-weight:900; letter-spacing:-.02em; }
.card .info .tag{ font-family:'Space Mono'; font-size:11px; padding:4px 8px; border:1.5px solid var(--ink);
  border-radius:20px; white-space:nowrap; }
.card .no{ position:absolute; top:12px; left:12px; font-family:'Space Mono'; font-size:12px;
  background:var(--paper); border:2px solid var(--ink); border-radius:20px; padding:2px 10px; z-index:2; }
.span4{ grid-column:span 4; } .span3{ grid-column:span 3; } .span2{ grid-column:span 2; }

/* visual fills (placeholders that already look like work) */
.v-acid{ background:
  radial-gradient(circle at 30% 30%,var(--ink) 0 14%,transparent 15%),
  radial-gradient(circle at 70% 65%,var(--pink) 0 22%,transparent 23%),var(--acid); }
.v-blue{ background:
  repeating-linear-gradient(45deg,var(--blue) 0 22px,#2c45d6 22px 44px); color:#fff; }
.v-pink{ background:
  radial-gradient(circle at 50% 50%,var(--paper) 0 18%,transparent 19%),
  radial-gradient(circle at 50% 50%,var(--ink) 0 30%,transparent 31%),var(--pink); }
.v-ink{ background:
  linear-gradient(135deg,transparent 48%,var(--acid) 48% 52%,transparent 52%),
  linear-gradient(45deg,transparent 48%,var(--pink) 48% 52%,transparent 52%),var(--ink); }
.v-orange{ background:
  repeating-radial-gradient(circle at 20% 80%,var(--orange) 0 12px,#e85a1c 12px 24px); }
.v-grid{ background:
  linear-gradient(var(--ink) 2px,transparent 2px) 0 0/40px 40px,
  linear-gradient(90deg,var(--ink) 2px,transparent 2px) 0 0/40px 40px,var(--acid); }

/* PRICING */
.price-wrap{ display:grid; grid-template-columns:repeat(3,1fr); border:2px solid var(--ink); border-radius:14px; overflow:hidden; }
.tier{ padding:32px 24px; border-right:2px solid var(--ink); transition:background .25s; }
.tier:last-child{ border-right:none; }
.tier:hover{ background:var(--acid); }
.tier h4{ font-family:'Space Mono'; font-size:14px; text-transform:uppercase; }
.tier .num{ font-size:50px; font-weight:900; letter-spacing:-.03em; margin:14px 0; }
.tier ul{ list-style:none; font-size:15px; line-height:2; }
.tier li::before{ content:'→ '; }

footer{ background:var(--ink); color:var(--paper); padding:70px 0; }
footer h2{ font-size:clamp(40px,8vw,120px); font-weight:900; letter-spacing:-.04em; line-height:.9; }
footer a.mail{ color:var(--acid); }
footer .row{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:40px; font-family:'Space Mono'; font-size:13px; }
footer .row a:hover{ color:var(--acid); }
/* footer contacts + social icons */
.foot-contacts{ display:flex; flex-wrap:wrap; gap:8px 30px; margin-top:34px; font-family:'Space Mono'; font-size:clamp(15px,2.4vw,19px); }
.foot-contacts a{ border-bottom:2px solid var(--acid); padding-bottom:1px; }
.foot-contacts a:hover{ color:var(--acid); }
.socials{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.socials a{ width:48px; height:48px; border:2px solid var(--paper); border-radius:50%; display:flex;
  align-items:center; justify-content:center; color:var(--paper);
  transition:transform .2s,background .2s,color .2s,border-color .2s; }
.socials a svg{ width:22px; height:22px; fill:currentColor; display:block; }
.socials a .mono{ font-family:'Space Mono'; font-weight:700; font-size:13px; letter-spacing:-.5px; }
.socials a:hover{ background:var(--acid); border-color:var(--acid); color:var(--ink); transform:translateY(-3px); }
.legal{ margin-top:22px; font-size:11px; line-height:1.45; opacity:.45; max-width:66ch; }

@media(max-width:860px){
  .work-grid{ grid-template-columns:1fr; }
  .span4,.span3,.span2{ grid-column:span 1; }
  .price-wrap{ grid-template-columns:1fr; }
  .tier{ border-right:none; border-bottom:2px solid var(--ink); }
  /* burger button (CSS-only, no JS needed) */
  .burger{ display:flex; align-items:center; justify-content:center; width:46px; height:46px;
    border:2px solid var(--ink); border-radius:13px; background:var(--paper); font-size:21px; line-height:1;
    transition:background .2s,transform .15s; z-index:55; }
  .burger:active{ transform:scale(.94); }
  nav .navtoggle:checked ~ .burger{ background:var(--acid); font-size:0; }
  nav .navtoggle:checked ~ .burger::after{ content:'✕'; font-size:20px; font-weight:700; color:var(--ink); }
  /* full-screen menu overlay */
  nav .links{ position:fixed; inset:0; height:100vh; height:100dvh; flex-direction:column;
    justify-content:center; align-items:flex-start; gap:2px; background:var(--paper);
    padding:96px 30px 40px; display:none; z-index:48; }
  nav .navtoggle:checked ~ .links{ display:flex; animation:menuIn .25s ease; }
  @keyframes menuIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
  nav .links a{ font-family:'Archivo',sans-serif; font-weight:900; font-size:clamp(30px,9vw,44px);
    letter-spacing:-.02em; line-height:1.15; padding:8px 0; border:none; border-radius:0; }
  nav .links a.active{ color:var(--ink); -webkit-text-stroke:0; text-decoration:underline;
    text-decoration-color:var(--acid); text-decoration-thickness:6px; text-underline-offset:4px; }
  nav .links a.cta{ background:none; color:var(--ink); }
  nav .links a.cta::after{ content:''; }
  /* decorative footer line inside the menu */
  nav .links::after{ content:'@design_betty · DesignBetty'; position:absolute; left:30px; bottom:30px;
    font-family:'Space Mono'; font-weight:400; font-size:13px; letter-spacing:1px; }
}

/* fallback for browsers without aspect-ratio (Opera Mini, old KaiOS) */
@supports not (aspect-ratio: 1 / 1){
  .card .thumb{ min-height:200px; }
}

/* small phones / feature phones */
@media(max-width:520px){
  .wrap{ padding:0 18px; }
  nav{ padding:14px 18px; }
  section{ padding:60px 0; }
  .label{ font-size:11px; letter-spacing:1px; }
  footer{ padding:54px 0; }
  footer .row{ font-size:12px; gap:10px; }
}
@media(max-width:360px){
  .wrap{ padding:0 14px; }
  nav .logo{ font-size:17px; }
}

/* ===== blog article (shared) ===== */
.art-head{ padding:118px 0 28px; }
.art-head .crumbs{ font-family:'Space Mono'; font-size:13px; margin-bottom:18px; }
.art-head .crumbs a{ border-bottom:1px solid var(--ink); }
.art-head .meta{ font-family:'Space Mono'; font-size:13px; display:flex; flex-wrap:wrap; gap:14px; margin-bottom:18px; }
.art-head .meta .cat{ background:var(--acid); padding:2px 10px; border-radius:20px; }
.art-head h1{ font-size:clamp(32px,6vw,68px); font-weight:900; letter-spacing:-.03em; line-height:.98; max-width:20ch; }
.cover{ aspect-ratio:21/9; border:2px solid var(--ink); border-radius:16px; margin:26px 0 0;
  display:flex; align-items:center; justify-content:center; overflow:hidden; text-align:center; padding:20px; }
.cover b{ font-family:'Space Mono'; font-weight:700; font-size:clamp(20px,5vw,46px); text-transform:uppercase; letter-spacing:3px; }
.article{ max-width:720px; margin:0 auto; }
.article p{ font-size:18px; line-height:1.7; margin:20px 0; }
.article p.lead{ font-size:21px; line-height:1.55; }
.article h2{ font-size:clamp(24px,4vw,34px); font-weight:900; letter-spacing:-.02em; margin:44px 0 4px; }
.article h3{ font-size:21px; font-weight:800; margin:26px 0 2px; }
.article ul,.article ol{ margin:16px 0 16px 22px; }
.article li{ font-size:18px; line-height:1.6; margin:10px 0; }
.article blockquote{ border-left:4px solid var(--acid); padding:8px 0 8px 22px; font-size:22px; font-weight:600; margin:28px 0; }
.cta-box{ border:2px solid var(--ink); border-radius:16px; padding:28px; margin:46px 0; background:var(--paper2);
  display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; }
.cta-box h3{ font-size:23px; font-weight:900; letter-spacing:-.02em; margin:0; }
.related{ max-width:720px; margin:50px auto 0; border-top:2px solid var(--ink); padding-top:22px; }
.related h4{ font-family:'Space Mono'; font-size:13px; text-transform:uppercase; letter-spacing:2px; margin-bottom:10px; }
.related a{ display:block; font-size:20px; font-weight:800; padding:13px 0; border-bottom:1px solid rgba(10,10,10,.14); letter-spacing:-.01em; transition:padding .2s; }
.related a:hover{ padding-left:10px; }
@supports not (aspect-ratio: 1 / 1){ .cover{ min-height:180px; } }
@media(max-width:860px){ .cta-box{ flex-direction:column; align-items:flex-start; } }

/* thinner outlined text on smaller screens so the stroke looks balanced */
@media(max-width:860px){ .stroke,.namestrip .o{ -webkit-text-stroke-width:1.6px !important; } }
@media(max-width:560px){ .stroke,.namestrip .o{ -webkit-text-stroke-width:1.3px !important; } }
@media(max-width:400px){ .stroke,.namestrip .o{ -webkit-text-stroke-width:1px !important; } }
/* Seamless ticker: app.js duplicates one segment, so the loop restarts invisibly. */
.marquee, .catbar, .namestrip{ overflow:hidden; }
.marquee .marquee-track, .catbar .marquee-track, .namestrip .marquee-track{
  display:flex; width:max-content; will-change:transform;
  animation:marquee-scroll var(--marquee-speed, 24s) linear infinite !important;
}
.marquee .marquee-item, .catbar .marquee-item, .namestrip .marquee-item{
  display:block; flex:none; animation:none !important;
}
.marquee .marquee-item *, .catbar .marquee-item *, .namestrip .marquee-item *{ animation:none !important; }
@keyframes marquee-scroll{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){
  .marquee .marquee-track, .catbar .marquee-track, .namestrip .marquee-track{ animation:none !important; }
}