/* Outer marketing shell: nav, grain-gradient background, case-study template, buttons */

:root{
  --grain-warm-deep:#7a4f30;
  --grain-warm-mid:#a5794f;
  --grain-warm-light:#c9a37e;
  --grain-cool-deep:#0f2f42;
  --grain-cool-mid:#1c3a52;
  --grain-cool-light:#2d4f68;
  --grain-neutral:#3c352c;
  --yellow:#e5bf00;
  --yellow-hover:#f2cc17;
  --ink-on-dark:#f7f3ea;
  --ink-on-dark-muted:rgba(247,243,234,0.82);
  --nav-bg:#faf5ea;
  --nav-accent:#e8a24d;
  --nav-accent-current:var(--grain-cool-deep);
}

.shell{min-height:100vh;display:flex;flex-direction:column;position:relative;isolation:isolate;}

.shell-nav{position:relative;z-index:5;background:var(--nav-bg);box-shadow:0 1px 0 rgba(28,25,23,0.08);overflow:hidden;}
.shell-nav-inner{position:relative;display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:var(--space-4) var(--space-6);box-sizing:border-box;}
.shell-nav::after{content:'';position:absolute;inset:0;opacity:0.05;mix-blend-mode:multiply;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-repeat:repeat;}
.shell-nav .logo-link img{display:block;}
.shell-nav .logo-mark{width:44px;height:44px;display:block;}
.shell-nav nav{display:flex;gap:var(--space-6);}
.shell-nav .nav-link{position:relative;font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--ink-soft);text-decoration:none;padding-bottom:5px;transition:color 150ms ease-out,font-weight 150ms ease-out;}
.shell-nav .nav-link::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:1px;background:var(--nav-accent);transform:scaleX(0);transform-origin:left center;transition:transform 450ms cubic-bezier(0.34,1.56,0.64,1);}
.shell-nav .nav-link:hover{color:var(--ink);font-weight:var(--weight-bold);}
.shell-nav .nav-link:hover::after{transform:scaleX(1);}
.shell-nav .nav-link[aria-current="page"]{color:var(--ink);font-weight:var(--weight-bold);}
.shell-nav .nav-link[aria-current="page"]::after{background:var(--nav-accent-current);transform:scaleX(1);}

/* grain gradient background layer, fixed behind content */
.grain-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--grain-neutral);}
.grain-bg::before{content:'';position:absolute;inset:-10%;background:
    radial-gradient(ellipse 55% 45% at 12% 18%, var(--grain-warm-light) 0%, var(--grain-warm-mid) 35%, transparent 65%),
    radial-gradient(ellipse 60% 55% at 88% 85%, var(--grain-cool-mid) 0%, var(--grain-cool-deep) 45%, transparent 70%),
    linear-gradient(135deg, var(--grain-warm-deep) 0%, var(--grain-neutral) 45%, var(--grain-cool-deep) 100%);
}
.grain-bg.flip::before{background:
    radial-gradient(ellipse 55% 45% at 88% 18%, var(--grain-warm-light) 0%, var(--grain-warm-mid) 35%, transparent 65%),
    radial-gradient(ellipse 60% 55% at 12% 85%, var(--grain-cool-mid) 0%, var(--grain-cool-deep) 45%, transparent 70%),
    linear-gradient(45deg, var(--grain-warm-deep) 0%, var(--grain-neutral) 45%, var(--grain-cool-deep) 100%);
}
.grain-bg.vertical::before{background:
    radial-gradient(ellipse 60% 40% at 50% 8%, var(--grain-warm-light) 0%, var(--grain-warm-mid) 40%, transparent 68%),
    radial-gradient(ellipse 65% 50% at 50% 100%, var(--grain-cool-mid) 0%, var(--grain-cool-deep) 45%, transparent 72%),
    linear-gradient(180deg, var(--grain-warm-deep) 0%, var(--grain-neutral) 50%, var(--grain-cool-deep) 100%);
}
.grain-bg::after{content:'';position:absolute;inset:0;opacity:0.34;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-repeat:repeat;}

.shell-main{position:relative;z-index:1;flex:1;width:100%;}

/* buttons */
.btn-yellow{display:inline-block;background:var(--yellow);color:var(--espresso-dark);font-family:var(--font-serif);font-size:var(--text-md);font-weight:var(--weight-semibold);text-decoration:underline;text-underline-offset:3px;padding:var(--space-3) var(--space-6);border-radius:var(--radius-sm);transition:background-color 150ms var(--ease-standard);border:none;cursor:pointer;}
.btn-yellow:hover{background:var(--yellow-hover);color:var(--espresso-dark);}

/* home page */
.home-hero-wrap{position:relative;max-width:1080px;margin:0 auto;padding:var(--space-8) var(--space-6) 0;display:flex;align-items:center;justify-content:center;}
.home-hero-wrap .desk-scene{position:relative;z-index:1;}
.home-caption{text-align:center;font-family:var(--font-serif);font-size:var(--text-base);color:var(--ink-on-dark-muted);max-width:640px;margin:var(--space-5) auto 0;padding:0 var(--space-5);}

.about-me-section{max-width:760px;margin:0 auto;padding:var(--space-9) var(--space-6) var(--space-9);text-align:center;}
.about-me-section h2{font-family:var(--font-serif);font-size:var(--text-2xl);color:var(--ink-on-dark);font-weight:var(--weight-semibold);margin:0 0 var(--space-7);}
.about-me-section h2 .num-badge{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--yellow);color:var(--espresso-dark);font-size:var(--text-lg);vertical-align:middle;margin:0 6px;}
.quick-list{list-style:none;margin:0 0 var(--space-7);padding:0;display:flex;flex-direction:column;gap:var(--space-5);text-align:left;}
.quick-list li{display:flex;gap:var(--space-3);font-family:var(--font-sans);font-size:var(--text-md);color:var(--ink-on-dark-muted);line-height:var(--leading-relaxed);}
.quick-list .q-num{flex:none;color:var(--yellow);font-weight:var(--weight-bold);}
.quick-list strong{color:var(--ink-on-dark);font-weight:var(--weight-semibold);}

/* case study template */
.case-hero-wrap{max-width:900px;margin:0 auto;padding:var(--space-8) var(--space-6) 0;}
.case-hero-wrap img{width:100%;height:auto;display:block;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);}
.case-body{max-width:760px;margin:0 auto;padding:var(--space-7) var(--space-6) var(--space-9);}
.case-body h1{font-family:var(--font-sans);font-weight:800;font-size:var(--text-2xl);color:var(--ink-on-dark);margin:0 0 var(--space-5);}
.case-body h3{font-family:var(--font-sans);font-weight:var(--weight-bold);font-size:var(--text-md);color:var(--ink-on-dark);margin:var(--space-5) 0 var(--space-2);}
.case-body p{font-family:var(--font-sans);font-size:var(--text-base);color:var(--ink-on-dark-muted);line-height:var(--leading-relaxed);margin:0 0 var(--space-4);}
.case-body ul{list-style:none;margin:0 0 var(--space-4);padding:0;display:flex;flex-direction:column;gap:var(--space-3);}
.case-body li{font-family:var(--font-sans);font-size:var(--text-base);color:var(--ink-on-dark-muted);line-height:var(--leading-relaxed);}
.case-body li strong{color:var(--ink-on-dark);font-weight:var(--weight-semibold);}
.case-body .btn-yellow{margin-top:var(--space-3);}
.case-figure{margin:var(--space-6) 0;}
.case-figure img{width:100%;height:auto;display:block;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);}
.case-figure figcaption{font-family:var(--font-serif);font-size:var(--text-sm);color:var(--ink-on-dark-muted);text-align:center;margin-top:var(--space-3);}

/* work listing */
.work-list{max-width:960px;margin:0 auto;padding:var(--space-8) var(--space-6) var(--space-9);}
.work-list h1{font-family:var(--font-sans);font-weight:800;font-size:var(--text-2xl);color:var(--ink-on-dark);margin:0 0 var(--space-7);text-align:center;}
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);}
.work-card{display:block;text-decoration:none;background:rgba(250,245,234,0.06);border:1px solid rgba(247,243,234,0.14);border-radius:var(--radius-md);overflow:hidden;transition:transform 150ms var(--ease-standard),border-color 150ms var(--ease-standard);}
.work-card:hover{border-color:rgba(247,243,234,0.35);transform:translateY(-2px);}
.work-card img{width:100%;height:200px;object-fit:cover;display:block;}
.work-card-body{padding:var(--space-4) var(--space-5) var(--space-5);}
.work-card-tag{font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--yellow);}
.work-card h2{font-family:var(--font-sans);font-weight:var(--weight-bold);font-size:var(--text-lg);color:var(--ink-on-dark);margin:var(--space-2) 0 var(--space-2);}
.work-card p{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--ink-on-dark-muted);line-height:var(--leading-normal);margin:0;}

/* art page */
.art-wrap{max-width:1000px;margin:0 auto;padding:var(--space-8) var(--space-6) var(--space-9);}
.art-wrap h1{font-family:var(--font-sans);font-weight:800;font-size:var(--text-2xl);color:var(--ink-on-dark);margin:0 0 var(--space-6);text-align:center;}
.art-wrap img{width:100%;height:auto;display:block;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);}
.art-caption{text-align:center;font-family:var(--font-serif);font-size:var(--text-base);color:var(--ink-on-dark-muted);max-width:600px;margin:var(--space-5) auto 0;}
.art-piece{max-width:760px;margin:0 auto;text-align:left;}
.art-piece img{width:100%;height:auto;display:block;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);margin-bottom:var(--space-5);}
.art-body p{font-family:var(--font-sans);font-size:var(--text-base);color:var(--ink-on-dark-muted);line-height:var(--leading-relaxed);margin:0 0 var(--space-4);}
.art-body .btn-yellow{margin-top:var(--space-3);}

/* about page */
.about-wrap{max-width:720px;margin:0 auto;padding:var(--space-8) var(--space-6) var(--space-9);}
.about-wrap h1{font-family:var(--font-sans);font-weight:800;font-size:var(--text-2xl);color:var(--ink-on-dark);margin:0 0 var(--space-5);}
.about-wrap p{font-family:var(--font-sans);font-size:var(--text-base);color:var(--ink-on-dark-muted);line-height:var(--leading-relaxed);margin:0 0 var(--space-4);}
.about-wrap .btn-yellow{margin-top:var(--space-2);}

@media (min-width:821px){
  .case-hero-wrap.hero-compact{max-width:675px;}
}

@media (max-width:820px){
  .shell-nav-inner{padding:var(--space-4);}
  .shell-nav nav{gap:var(--space-4);}
  .work-grid{grid-template-columns:1fr;}
  .case-hero-wrap,.home-hero-wrap{padding-left:var(--space-4);padding-right:var(--space-4);}
}
@media (max-width:480px){
  .shell-nav .nav-link{font-size:var(--text-sm);}
  .about-me-section h2{font-size:var(--text-xl);}
}