/*
Theme Name: Torelh Chaos Portfolio
Theme URI: https://torelh.dk
Author: OpenAI
Description: A colorful, experimental portfolio theme with editable projects and muted hover video previews.
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: torelh-chaos
*/
:root {
  --paper: #f3f0e8;
  --ink: #171717;
  --blue: #2547ff;
  --orange: #ff5b25;
  --pink: #ff68b8;
  --lime: #d7ff37;
  --purple: #8052ff;
  --line: rgba(23,23,23,.22);
  --gutter: clamp(18px, 3vw, 46px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: Arial, Helvetica, sans-serif; font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
img, video { display: block; max-width: 100%; }
.site-header {
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding: 22px var(--gutter); border-bottom:1px solid var(--line);
  position:relative; z-index:5;
}
.site-brand { font-weight:900; letter-spacing:-.08em; font-size:clamp(24px,3vw,40px); text-transform:uppercase; }
.site-brand .brand-dot { color:var(--orange); }
.primary-nav { display:flex; gap:clamp(18px,3vw,48px); align-items:center; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.primary-nav a { border-bottom:2px solid transparent; padding:5px 0; }
.primary-nav a:hover { border-color:var(--orange); }
.menu-toggle { display:none; border:1px solid var(--ink); background:transparent; padding:9px 12px; font-weight:800; text-transform:uppercase; }
.site-main { overflow:hidden; }
.hero {
  min-height: min(720px, 78vh); padding: clamp(45px,8vw,120px) var(--gutter) 55px;
  position:relative; display:flex; flex-direction:column; justify-content:space-between;
}
.hero-kicker { font-size:11px; text-transform:uppercase; letter-spacing:.16em; font-weight:800; }
.hero-title {
  font-size:clamp(76px, 16vw, 230px); line-height:.76; letter-spacing:-.105em;
  text-transform:uppercase; font-weight:900; max-width:1100px; margin:50px 0;
  position:relative; z-index:2;
}
.hero-title .outline { color:transparent; -webkit-text-stroke:2px var(--ink); }
.hero-bottom { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; position:relative; z-index:2; }
.hero-note { max-width:360px; font-size:clamp(14px,1.5vw,19px); line-height:1.3; }
.hero-index { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
.chaos-shape { position:absolute; pointer-events:none; z-index:1; }
.shape-star {
  width:clamp(100px,17vw,245px); aspect-ratio:1; right:13%; top:15%;
  background:var(--orange); clip-path:polygon(50% 0,61% 34%,98% 18%,75% 50%,100% 79%,62% 68%,50% 100%,38% 68%,0 82%,25% 50%,2% 18%,40% 34%);
  transform:rotate(-17deg); animation: wobble 9s ease-in-out infinite alternate;
}
.shape-orbit {
  width:clamp(130px,21vw,290px); aspect-ratio:1; right:4%; bottom:8%;
  border:clamp(12px,2vw,26px) solid var(--blue); border-radius:48% 52% 44% 56%;
  transform:rotate(28deg); animation: drift 12s ease-in-out infinite alternate;
}
.shape-orbit:after { content:""; position:absolute; width:40%; height:40%; background:var(--pink); border-radius:50%; left:-15%; top:10%; }
.shape-scribble { left:48%; top:34%; width:130px; height:90px; border:8px solid var(--purple); border-left:0; border-bottom:0; border-radius:50%; transform:rotate(28deg); }
@keyframes wobble { to { transform:rotate(18deg) scale(1.08); } }
@keyframes drift { to { transform:translate(-25px,18px) rotate(-12deg); } }
.section-heading {
  padding:22px var(--gutter); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:15px;
  text-transform:uppercase; font-size:11px; font-weight:900; letter-spacing:.14em;
}
.project-grid {
  padding: clamp(20px,3vw,46px) var(--gutter) 90px;
  display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(24px,4vw,60px) clamp(14px,2vw,28px);
}
.project-card { grid-column:span 6; min-width:0; position:relative; }
.project-card:nth-child(4n+2) { grid-column:span 5; margin-top:90px; }
.project-card:nth-child(4n+3) { grid-column:2 / span 6; margin-top:-25px; }
.project-card:nth-child(4n+4) { grid-column:8 / span 5; margin-top:65px; }
.project-link { display:block; }
.project-media {
  position:relative; overflow:hidden; background:#ddd; aspect-ratio:4/3;
  isolation:isolate;
}
.project-card:nth-child(3n) .project-media { aspect-ratio: 5/6; }
.project-card:nth-child(4n) .project-media { aspect-ratio: 16/10; }
.project-media img, .project-media video {
  width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.project-media video { position:absolute; inset:0; opacity:0; }
.project-card.is-playing video { opacity:1; }
.project-link:hover .project-media img { transform:scale(1.035) rotate(-.5deg); }
.project-card.is-playing .project-media img { opacity:0; }
.project-meta { display:flex; justify-content:space-between; gap:12px; padding-top:12px; align-items:baseline; }
.project-title { margin:0; font-size:clamp(17px,2vw,27px); line-height:1; font-weight:800; letter-spacing:-.055em; }
.project-category { font-size:10px; text-transform:uppercase; letter-spacing:.12em; font-weight:800; text-align:right; }
.project-card:nth-child(odd):after {
  content:""; position:absolute; width:clamp(34px,5vw,70px); aspect-ratio:1; background:var(--lime);
  border-radius:50%; right:-22px; top:14%; z-index:-1;
}
.project-card:nth-child(3n):after {
  width:70px; height:70px; border-radius:0; background:var(--pink);
  clip-path:polygon(50% 0,100% 100%,0 75%); right:auto; left:-30px; top:60%;
}
.empty-projects { padding:50px var(--gutter); font-size:18px; }
.page-intro { padding:clamp(55px,10vw,130px) var(--gutter) 55px; }
.page-title { font-size:clamp(54px,11vw,150px); line-height:.85; letter-spacing:-.09em; text-transform:uppercase; margin:0; }
.page-content { padding:0 var(--gutter) 100px; max-width:1000px; font-size:clamp(17px,2vw,23px); line-height:1.5; }
.single-project-head { padding:clamp(45px,8vw,110px) var(--gutter) 35px; position:relative; }
.single-project-head:after { content:""; position:absolute; width:120px; height:120px; border:18px solid var(--orange); border-radius:50%; right:12%; top:12%; pointer-events:none; }
.single-project-title { font-size:clamp(55px,12vw,160px); line-height:.82; letter-spacing:-.09em; text-transform:uppercase; margin:0; max-width:1100px; }
.single-project-description { max-width:680px; margin-top:28px; font-size:18px; line-height:1.45; }
.project-body { padding:20px var(--gutter) 90px; }
.project-body > * { max-width:1100px; margin-left:auto; margin-right:auto; }
.project-body img { width:100%; height:auto; margin:35px auto; }
.project-body p { max-width:700px; font-size:18px; line-height:1.55; }
.project-body video { width:100%; margin:35px auto; }
.project-footer-nav { display:flex; justify-content:space-between; gap:20px; padding:28px var(--gutter); border-top:1px solid var(--line); text-transform:uppercase; font-size:12px; font-weight:900; }
.site-footer { padding:55px var(--gutter) 25px; background:var(--ink); color:var(--paper); position:relative; overflow:hidden; }
.footer-big { font-size:clamp(55px,12vw,165px); line-height:.8; letter-spacing:-.1em; font-weight:900; text-transform:uppercase; margin:0 0 55px; position:relative; z-index:1; }
.footer-row { display:flex; justify-content:space-between; gap:20px; font-size:11px; text-transform:uppercase; letter-spacing:.1em; position:relative; z-index:1; }
.footer-splash { position:absolute; width:180px; height:180px; background:var(--purple); border-radius:42% 58% 62% 38%; right:12%; top:15%; transform:rotate(35deg); }
@media (max-width:700px) {
  .site-header { align-items:flex-start; }
  .menu-toggle { display:block; }
  .primary-nav { display:none; position:absolute; top:100%; left:0; right:0; padding:20px var(--gutter); background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; }
  .primary-nav.is-open { display:flex; }
  .hero { min-height:620px; }
  .hero-title { font-size:clamp(70px,20vw,130px); }
  .shape-star { right:8%; top:28%; }
  .shape-orbit { right:-8%; bottom:10%; }
  .shape-scribble { left:58%; top:50%; }
  .project-grid { display:block; padding-top:25px; }
  .project-card, .project-card:nth-child(4n+2), .project-card:nth-child(4n+3), .project-card:nth-child(4n+4) {
    margin:0 0 42px; width:100%;
  }
  .project-card:nth-child(even) { width:88%; margin-left:auto !important; }
  .project-card:nth-child(odd) { width:94%; }
  .project-card:nth-child(3n) .project-media { aspect-ratio:4/3; }
  .project-meta { align-items:flex-start; }
  .project-category { max-width:38%; }
  .footer-row { flex-direction:column; }
}

/* Project card options added in v1.1 */
.project-card-wide { grid-column: span 2; }
.project-card-tall .project-media { aspect-ratio: 3 / 4; }
.project-card-wide .project-media { aspect-ratio: 16 / 9; }
.project-sticker { position:absolute; z-index:3; top:12px; right:12px; display:inline-block; padding:8px 11px; background:var(--lime); color:var(--ink); border:1px solid var(--ink); border-radius:999px; font-size:10px; line-height:1; font-weight:900; letter-spacing:.08em; text-transform:uppercase; transform:rotate(5deg); }
.project-card { position:relative; }
@media (max-width:700px) { .project-card-wide { grid-column:span 1; } }


/* Editable front page: Gutenberg content sits above the automatic project grid. */
.front-page-content { position:relative; padding: clamp(28px, 5vw, 72px) var(--gutter) 45px; }
.front-page-content > * { max-width: 1200px; margin-left:auto; margin-right:auto; }
.front-page-content > .alignwide { max-width: 1400px; }
.front-page-content > .alignfull { max-width:none; margin-left:calc(var(--gutter) * -1); margin-right:calc(var(--gutter) * -1); }
.front-page-content h1, .front-page-content h2, .front-page-content h3 { font-weight:900; letter-spacing:-.075em; line-height:.92; text-transform:uppercase; }
.front-page-content h1 { font-size:clamp(58px, 12vw, 160px); }
.front-page-content h2 { font-size:clamp(38px, 7vw, 92px); }
.front-page-content p, .front-page-content li { font-size:clamp(17px, 2vw, 22px); line-height:1.45; }
.front-page-content .wp-block-image img, .front-page-content .wp-block-gallery img { border:2px solid var(--ink); }
.front-page-content .wp-block-button__link { background:var(--ink); color:var(--paper); border-radius:0; font-weight:900; text-transform:uppercase; }
.front-page-content .wp-block-cover, .front-page-content .wp-block-group { position:relative; }
.front-page-content .wp-block-separator { border:0; height:8px; max-width:180px; background:var(--orange); margin-top:35px; margin-bottom:35px; }
.project-placeholder { width:100%; height:100%; min-height:260px; background:linear-gradient(135deg,#2547ff,#ff68b8,#d7ff37); }


/* Floating sticker layer */
.torelh-floating-layer{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.torelh-floating-item{position:absolute;left:var(--float-x);top:var(--float-y);width:var(--float-size);height:auto;max-width:none;object-fit:contain;transform:translate(-50%,-50%) rotate(var(--float-rotation));filter:drop-shadow(3px 5px 0 rgba(0,0,0,.12));will-change:transform}
.torelh-floating-item.motion-float{animation:torelh-float 7s ease-in-out infinite}
.torelh-floating-item.motion-spin{animation:torelh-spin 16s linear infinite}
.torelh-floating-item.motion-bounce{animation:torelh-bounce 3.8s ease-in-out infinite}
.torelh-floating-item.motion-none{animation:none}
.torelh-floating-item.speed-slow{animation-duration:12s}
.torelh-floating-item.speed-fast{animation-duration:3.5s}
@keyframes torelh-float{0%,100%{transform:translate(-50%,-50%) rotate(var(--float-rotation)) translateY(0)}50%{transform:translate(-50%,-50%) rotate(calc(var(--float-rotation) + 7deg)) translateY(-22px)}}
@keyframes torelh-spin{from{transform:translate(-50%,-50%) rotate(var(--float-rotation))}to{transform:translate(-50%,-50%) rotate(calc(var(--float-rotation) + 360deg))}}
@keyframes torelh-bounce{0%,100%{transform:translate(-50%,-50%) rotate(var(--float-rotation)) translateY(0)}50%{transform:translate(-50%,-50%) rotate(var(--float-rotation)) translateY(-34px)}}
@media(max-width:700px){.torelh-floating-item{width:calc(var(--float-size) * .68);opacity:.88}}
@media(prefers-reduced-motion:reduce){.torelh-floating-item{animation:none!important}}