/*
Theme Name: DigitalMack
Theme URI: https://digitalmack.com/
Author: Tim
Author URI: https://digitalmack.com/
Description: A clean, technical one-page personal calling card for DigitalMack — selected work, capabilities, an about note, and contact. Edit your name, tagline, projects, featured book, and social links from Appearance → Customize.
Version: 1.0.0
Requires at least: 5.5
Tested up to: 6.5
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: digitalmack
*/

:root{
    --bg:#f4f3ef;
    --paper:#fbfaf7;
    --ink:#111110;
    --muted:#85827a;
    --line:#d7d4c9;
    --accent:#f24d10;
    --mono:'JetBrains Mono', ui-monospace, monospace;
    --sans:'Archivo', system-ui, sans-serif;
    --maxw:1180px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg);color:var(--ink);font-family:var(--mono);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

  .rv{opacity:1;transform:none;}
  @media (prefers-reduced-motion:no-preference){
    .rv.in{animation:rvIn .7s cubic-bezier(.2,.7,.2,1) both;}
  }
  @keyframes rvIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

  /* frame grid */
  .frame{position:fixed;inset:18px;border:1px solid var(--line);pointer-events:none;z-index:60;}
  .frame:before,.frame:after{content:"";position:absolute;background:var(--line);}
  .frame:before{left:0;right:0;top:50%;height:1px;opacity:0;}
  .tick{position:absolute;width:9px;height:9px;border:1.5px solid var(--accent);}
  .tick.tl{top:-5px;left:-5px;border-right:none;border-bottom:none;}
  .tick.tr{top:-5px;right:-5px;border-left:none;border-bottom:none;}
  .tick.bl{bottom:-5px;left:-5px;border-right:none;border-top:none;}
  .tick.br{bottom:-5px;right:-5px;border-left:none;border-top:none;}
  @media(max-width:680px){.frame{inset:10px;}}

  header{position:fixed;top:18px;left:18px;right:18px;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid transparent;transition:border-color .3s;}
  header.scrolled{border-color:var(--line);}
  .bar{display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 26px;}
  .brand{display:flex;align-items:center;gap:11px;}
  .brand img{width:26px;height:26px;}
  .brand b{font-family:var(--mono);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;}
  .barx{font-size:12px;color:var(--muted);letter-spacing:.05em;}
  .barx .blink{color:var(--accent);}

  main{padding:0 18px;}
  .inner{max-width:var(--maxw);margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line);background:linear-gradient(var(--paper),var(--paper));}
  .pad{padding:0 40px;}
  @media(max-width:680px){.pad{padding:0 22px;}}

  .meta-row{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:18px 40px;border-bottom:1px solid var(--line);}
  .meta-row .blink{color:var(--accent);}

  .hero{position:relative;overflow:hidden;padding:120px 40px 90px;border-bottom:1px solid var(--line);}
  .hero > *{position:relative;z-index:2;}
  .hbg{position:absolute;inset:0;z-index:0;pointer-events:none;}
  .hbg .grid{position:absolute;inset:-60px;background-image:radial-gradient(rgba(17,17,16,.07) 1px,transparent 1.6px);background-size:28px 28px;animation:gridpan 38s linear infinite;mask-image:radial-gradient(120% 100% at 30% 20%,#000 35%,transparent 78%);-webkit-mask-image:radial-gradient(120% 100% at 30% 20%,#000 35%,transparent 78%);}
  .hbg .blob{position:absolute;border-radius:50%;filter:blur(46px);will-change:transform;}
  .hbg .b1{width:420px;height:420px;background:radial-gradient(closest-side,rgba(242,77,16,.26),transparent 70%);top:-140px;left:4%;animation:floatA 19s ease-in-out infinite;}
  .hbg .b2{width:340px;height:340px;background:radial-gradient(closest-side,rgba(242,77,16,.16),transparent 70%);top:30px;right:6%;animation:floatB 24s ease-in-out infinite;}
  .hbg .b3{width:240px;height:240px;background:radial-gradient(closest-side,rgba(17,17,16,.05),transparent 70%);bottom:-120px;left:38%;animation:floatA 28s ease-in-out infinite reverse;}
  @keyframes gridpan{from{background-position:0 0;}to{background-position:28px 28px;}}
  @keyframes floatA{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(46px,34px) scale(1.08);}}
  @keyframes floatB{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-40px,28px) scale(1.1);}}
  @media (prefers-reduced-motion:reduce){.hbg .grid,.hbg .blob{animation:none;}}
  .kicker{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin-bottom:30px;}
  .socials{display:flex;gap:13px;margin-top:36px;}
  .socials a{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:11px;color:var(--ink);background:rgba(255,255,255,.55);transition:border-color .3s,color .3s,transform .3s;}
  .socials a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px);}
  .socials svg{width:18px;height:18px;fill:currentColor;}
  .feat{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;padding:22px 40px;border-bottom:1px solid var(--line);background:rgba(242,77,16,.05);transition:background .3s;}
  .feat:hover{background:rgba(242,77,16,.1);}
  .feat .ftag{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:var(--accent);padding:6px 11px;font-weight:700;white-space:nowrap;}
  .feat .ftitle{font-family:var(--sans);font-weight:600;font-size:clamp(14px,1.9vw,19px);letter-spacing:-.005em;}
  .feat .ftitle b{color:var(--accent);font-weight:700;}
  .feat .far{font-family:var(--sans);font-weight:700;font-size:18px;transition:transform .3s;}
  .feat:hover .far{transform:translate(4px,-4px);}
  .hero h1{font-family:var(--sans);font-weight:900;font-size:clamp(46px,9.5vw,118px);line-height:.92;letter-spacing:-.03em;text-transform:uppercase;}
  .hero h1 .o{color:var(--accent);}
  .hero .desc{margin-top:36px;max-width:60ch;font-size:14.5px;line-height:1.75;color:#33312c;}
  .hero .desc .hl{background:var(--accent);color:#fff;padding:1px 6px;}

  .sec-label{display:flex;align-items:center;gap:14px;padding:24px 40px;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.2em;text-transform:uppercase;}
  .sec-label .num{color:var(--accent);font-weight:700;}
  .sec-label .ln{flex:1;height:1px;background:var(--line);}
  .sec-label .ct{color:var(--muted);}

  /* project table */
  .prow{display:grid;grid-template-columns:54px 1fr 150px 230px 40px;align-items:center;gap:20px;padding:30px 40px;border-bottom:1px solid var(--line);transition:background .3s;position:relative;}
  .prow:hover{background:#fff;}
  .prow .id{font-size:12px;color:var(--muted);}
  .prow .nm{font-family:var(--sans);font-weight:700;font-size:clamp(22px,3vw,34px);letter-spacing:-.01em;transition:color .3s;}
  .prow .ds{font-size:13px;color:var(--muted);margin-top:5px;max-width:52ch;}
  .prow .dp{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);}
  .prow .ur{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .prow .ar{justify-self:end;font-family:var(--sans);font-weight:700;font-size:18px;transition:transform .3s;}
  .prow:hover .nm{color:var(--accent);}
  .prow:hover .ar{transform:translate(4px,-4px);}

  .disc{display:grid;grid-template-columns:repeat(3,1fr);}
  .disc .c{padding:40px;border-right:1px solid var(--line);}
  .disc .c:last-child{border-right:none;}
  .disc .c .t{font-family:var(--sans);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.02em;margin-bottom:14px;}
  .disc .c .t .b{color:var(--accent);}
  .disc .c p{font-size:13px;color:var(--muted);line-height:1.7;}

  .about{padding:80px 40px;border-bottom:1px solid var(--line);}
  .about p{font-family:var(--sans);font-weight:500;font-size:clamp(22px,3vw,34px);line-height:1.4;letter-spacing:-.01em;max-width:24ch;}
  .about p .o{color:var(--accent);}

  .contact{padding:90px 40px;text-align:center;}
  .contact .k{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:26px;}
  .contact a{font-family:var(--sans);font-weight:800;font-size:clamp(30px,6.5vw,80px);letter-spacing:-.02em;display:inline-block;border-bottom:3px solid transparent;transition:border-color .35s,color .35s;}
  .contact a:hover{color:var(--accent);border-color:var(--accent);}

  .foot{display:flex;justify-content:space-between;align-items:center;padding:22px 40px;border-top:1px solid var(--line);font-size:11.5px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;flex-wrap:wrap;gap:8px;}

  @media(max-width:780px){
    .prow{grid-template-columns:1fr;gap:8px;}
    .prow .id,.prow .ur{display:none;}
    .prow .ar{justify-self:start;}
    .disc{grid-template-columns:1fr;}
    .disc .c{border-right:none;border-bottom:1px solid var(--line);}
    .barx{display:none;}
    .feat{grid-template-columns:auto 1fr;gap:14px;}
    .feat .far{display:none;}
  }
  @media(max-width:560px){
    .frame{inset:8px;}
    header{top:8px;left:8px;right:8px;}
    .bar{padding:0 16px;height:54px;}
    .meta-row{padding:14px 20px;font-size:9.5px;letter-spacing:.1em;gap:8px;}
    .hero{padding:96px 20px 64px;}
    .sec-label{padding:18px 20px;}
    .prow{padding:24px 20px;}
    .feat{padding:18px 20px;}
    .disc .c{padding:28px 20px;}
    .about{padding:56px 20px;}
    .contact{padding:64px 20px;}
    .foot{padding:18px 20px;flex-direction:column;align-items:flex-start;}
  }
  @media(max-width:380px){
    .meta-row{flex-wrap:wrap;}
    .socials a{width:40px;height:40px;}
  }