/* Gothic effects for Portfolio 2026 — no JavaScript dependency required. */
:root{--gothic-paper:#f1e9df;--gothic-rose:#b65c72;--gothic-moss:#a6b49c;--gothic-ink:#050407}
html{scroll-behavior:smooth}
body{font-family:"Nunito Sans",Arial,sans-serif;text-rendering:optimizeLegibility}
h1,h2,h3,.wordmark,.project-card h3,.skills-card h4,.contact-page h1,.work-page-intro h1{font-family:"Lora",Georgia,serif;font-weight:600;letter-spacing:-.025em}
h1 em,h2 em,.work-page-intro h1 em,.contact-page h1 em{font-family:"Lora",Georgia,serif;font-weight:500;font-style:italic}
.wordmark span,.eyebrow-line,.notice-dot{filter:drop-shadow(0 0 5px #b65c7266)}
.gothic-mandala{position:fixed;z-index:-1;pointer-events:none;width:min(70vw,760px);aspect-ratio:1;right:-28vw;top:22vh;border-radius:50%;opacity:.065;background:repeating-conic-gradient(from 0deg,transparent 0deg 8deg,#b65c72 8.3deg 8.8deg,transparent 9deg 15deg),radial-gradient(circle,transparent 0 23%,#a6b49c 23.2% 23.45%,transparent 23.7% 35%,#b65c72 35.2% 35.5%,transparent 35.8% 49%,#a6b49c 49.2% 49.45%,transparent 49.8%);mask-image:radial-gradient(circle,black 0 42%,transparent 72%);animation:mandala-turn 100s linear infinite}
.gothic-mandala::before,.gothic-mandala::after{content:"";position:absolute;inset:12%;border:1px solid #b65c72;border-radius:50%;transform:rotate(45deg) scaleX(.48)}
.gothic-mandala::after{transform:rotate(-45deg) scaleX(.48)}
.gothic-mist{position:fixed;z-index:-1;pointer-events:none;inset:auto 0 0;height:34vh;opacity:.16;background:radial-gradient(ellipse at 10% 100%,#23452d66,transparent 58%),radial-gradient(ellipse at 92% 100%,#58132755,transparent 55%)}
.site-header::before{content:none!important;display:none!important}
.info-ribbon{position:relative;overflow:hidden;border-bottom:1px solid #744052;box-shadow:0 4px 18px #0005,inset 0 -1px #a6b49c18}
.info-ribbon::before{content:"";position:absolute;inset:0 auto 0 -35%;width:24%;transform:skewX(-22deg);background:linear-gradient(90deg,transparent,#fff1,transparent);pointer-events:none;animation:ribbon-glint 12s ease-in-out infinite}
.info-ribbon p{position:relative;z-index:1;font-weight:700;letter-spacing:.055em;line-height:1.55;text-wrap:balance}
.site-header nav a,.gothic-button,.home-work-cta,.contact-method a{transition:color .22s ease,border-color .22s ease,background-color .22s ease,transform .22s ease}
.site-header nav a:hover,.site-header nav a:focus-visible{transform:translateY(-1px)}
.gothic-button:hover,.home-work-cta:hover{transform:translateY(-2px)}
.project-card,.skills-card,.contact-method{box-shadow:0 12px 30px #0002}
.project-card:focus-within,.skills-card:focus-within,.contact-method:focus-within{outline:1px solid #b65c72;outline-offset:3px}
.project-card .project-image,.project-card .android-carousel,.project-card .coming-art{background-image:linear-gradient(135deg,#b65c7208,transparent 48%,#a6b49c08)}
.project-card .project-image img,.android-carousel-stage img{transition:transform .35s ease,filter .35s ease}
.project-card .project-image img:hover,.android-carousel-stage img:hover{transform:scale(1.018);filter:drop-shadow(0 6px 12px #0006)}
.project-card .project-meta{letter-spacing:.11em}
.skill-bars i.is-filled{background:linear-gradient(180deg,#d18b9d,#79263e)}
.site-footer::after{content:"";font-size:0}
@keyframes mandala-turn{to{transform:rotate(360deg)}}
@keyframes ribbon-glint{0%,60%{left:-35%;opacity:0}68%{opacity:.7}88%,100%{left:120%;opacity:0}}
@media(max-width:640px){.gothic-mandala{width:105vw;right:-54vw;top:30vh;opacity:.045}.info-ribbon p{font-size:.72rem;letter-spacing:.025em}h1,h2,h3,.wordmark{letter-spacing:-.015em}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.gothic-mandala,.info-ribbon::before{animation:none!important}.site-header nav a,.gothic-button,.home-work-cta,.contact-method a,.project-card .project-image img,.android-carousel-stage img{transition:none!important}}


/* Native disclosure controls keep the project cards compact until a visitor opens a sample. */
body{isolation:isolate}
.hero-index{font-family:"Lora",Georgia,serif;letter-spacing:.015em}
.project-samples-toggle{
  width:100%;
  min-width:0;
  margin-top:12px;
  border-top:1px solid #4b2936;
  border-bottom:1px solid #4b2936;
  background:linear-gradient(90deg,#120b10,#0b0b0b 55%,#0c120d);
}
.project-samples-toggle summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:48px;
  padding:12px clamp(14px,2vw,22px);
  color:#e5c9d0;
  font-size:clamp(.82rem,1vw,.95rem);
  font-weight:700;
  line-height:1.45;
  list-style:none;
  cursor:pointer;
}
.project-samples-toggle summary::-webkit-details-marker{display:none}
.project-samples-toggle summary::marker{content:""}
.project-samples-toggle summary:hover{color:#fff}
.project-samples-toggle summary:focus-visible{outline:2px solid #d49aaa;outline-offset:3px}
.project-samples-toggle .expand-symbol{
  display:grid;
  place-items:center;
  flex:0 0 28px;
  width:28px;
  height:28px;
  border:1px solid #754052;
  border-radius:50%;
  color:#d18b9d;
  font-size:1.15rem;
  line-height:1;
  transition:transform .2s ease,background-color .2s ease;
}
.project-samples-toggle[open] .expand-symbol{transform:rotate(45deg);background:#4a1424}
.project-samples-toggle .samples-toggle-content{padding:0 clamp(12px,1.8vw,20px) 18px;min-width:0}
#projects .android-samples-toggle{order:2;width:100%;margin-top:12px}
#projects .android-samples-toggle .android-carousel{width:100%;margin-top:0;border-top:0}
#projects .branding-samples-toggle{order:3;width:100%;margin-top:auto}
#projects .branding-samples-toggle .branding-gallery{width:100%;min-height:0;padding:clamp(12px,2vw,22px);grid-template-columns:repeat(2,minmax(0,1fr))}
#projects .branding-samples-toggle .branding-gallery img{height:clamp(130px,15vw,190px)}
#projects .oop-samples-toggle{order:2;width:calc(100% - 2 * clamp(14px,1.7vw,22px));margin:12px clamp(14px,1.7vw,22px) 20px}
#projects .oop-samples-toggle .samples-toggle-content{padding:12px}
#projects .oop-samples-toggle .oop-browser{width:100%;margin:0}
#projects .oop-samples-toggle .oop-sample-panel pre{max-width:100%;white-space:pre;overflow-x:auto}
@media(max-width:640px){
  .project-samples-toggle summary{padding:10px 12px;font-size:.8rem}
  #projects .branding-samples-toggle .branding-gallery{grid-template-columns:1fr}
  #projects .branding-samples-toggle .branding-gallery img{height:clamp(160px,52vw,250px)}
  #projects .oop-samples-toggle{width:calc(100% - 28px);margin:12px 14px 18px}
  #projects .oop-samples-toggle .samples-toggle-content{padding:8px}
}
@media(prefers-reduced-motion:reduce){.project-samples-toggle .expand-symbol{transition:none}}

/* Portfolio 2026 — tactile print texture, restrained motion and layered colour.
   Inline SVG grain is decorative, local, lightweight and does not require a third-party library. */
body{
  background-color:#0b080d;
  background-image:
    radial-gradient(ellipse at 8% 14%,rgba(116,35,61,.20),transparent 34%),
    radial-gradient(ellipse at 90% 46%,rgba(102,104,70,.10),transparent 31%),
    radial-gradient(ellipse at 50% 100%,rgba(130,70,46,.12),transparent 46%);
  background-attachment:fixed;
}
body::before{
  content:"";
  position:fixed;
  z-index:-1;
  inset:0;
  pointer-events:none;
  opacity:.19;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E"),
    repeating-linear-gradient(117deg,transparent 0 17px,rgba(230,190,154,.025) 18px,transparent 19px 38px);
  background-size:180px 180px,auto;
  mix-blend-mode:screen;
}
main{position:relative}
.hero,.home-about-teaser,.home-work-cta-section,.contact-section,.work-section,.about-section,.contact-page,.work-page-intro{
  position:relative;
  isolation:isolate;
}
.hero::before{
  border-color:rgba(206,129,71,.20);
}
.hero-copy .eyebrow,.section-wrap>.eyebrow{color:#d6b9a7}
.hero-tags span,.skill-list span,.about-tags span{
  border-radius:2px;
  background:linear-gradient(135deg,rgba(46,0,20,.62),rgba(28,30,32,.58));
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}
.project-card,.skills-card,.contact-method,.creative-samples-grid .creative-sample{
  border-color:rgba(206,129,71,.30);
  background-image:
    linear-gradient(135deg,rgba(95,32,46,.18),transparent 46%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 5px),
    linear-gradient(155deg,#21171c 0%,#110e12 76%);
}
.project-card:hover,.skills-card:hover,.contact-method:hover{
  border-color:#ce8147;
  box-shadow:6px 7px 0 rgba(206,129,71,.12),0 18px 35px rgba(0,0,0,.24);
}
.hero-index{
  border:1px solid rgba(206,129,71,.60);
  box-shadow:5px 5px 0 rgba(46,0,20,.82),inset 0 0 0 1px rgba(255,255,255,.035);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,filter .25s ease;
}
.hero-index:hover{
  transform:translateY(-4px) rotate(-1deg);
  border-color:#e5a36f;
  box-shadow:8px 9px 0 rgba(46,0,20,.86),0 0 28px rgba(206,129,71,.12);
  filter:brightness(1.08);
}
.hero-index:focus-visible{
  outline:3px solid #ce8147;
  outline-offset:5px;
}
.site-header{
  border-bottom-color:rgba(206,129,71,.24);
}
.site-header nav a[aria-current="page"]{
  color:#e6a06b;
  text-decoration:underline;
  text-decoration-color:rgba(206,129,71,.6);
  text-underline-offset:7px;
}
.info-ribbon{
  background-image:repeating-linear-gradient(135deg,rgba(206,129,71,.045) 0 1px,transparent 1px 9px);
}
.gothic-button,.home-work-cta,.contact-method-primary a{
  border-radius:2px;
  border-color:rgba(206,129,71,.66);
  box-shadow:4px 4px 0 rgba(46,0,20,.85);
}
.gothic-button:hover,.home-work-cta:hover,.contact-method-primary a:hover{
  box-shadow:6px 6px 0 rgba(46,0,20,.9);
}
.site-footer{
  border-top-color:rgba(206,129,71,.28);
}
@media(max-width:760px){
  body{background-attachment:scroll}
  body::before{opacity:.12}
}
@media(prefers-reduced-motion:reduce){
  .hero-index{transition:none!important}
}

/* --- Art direction pass: editorial collage, imperfect ink and copper details --- */
:root{
  --portfolio-copper:#ce8147;
  --portfolio-wine:#2e0014;
  --portfolio-charcoal:#1c1e20;
  --portfolio-cream:#f2e7dd;
}
.hero{
  background:
    radial-gradient(ellipse at 88% 16%,rgba(206,129,71,.10),transparent 30%),
    linear-gradient(115deg,transparent 0 66%,rgba(46,0,20,.14) 66.2% 66.5%,transparent 66.7%);
}
.hero-copy h1{
  text-wrap:balance;
  text-shadow:0 2px 0 rgba(0,0,0,.28);
}
.hero-copy h1::selection,.hero-copy p::selection{background:var(--portfolio-copper);color:#120b0e}
.eyebrow{
  text-shadow:0 0 18px rgba(206,129,71,.12);
}
.eyebrow-line{
  background:linear-gradient(90deg,var(--portfolio-copper),#f0c6a2);
}
.portrait-frame{
  border-color:rgba(206,129,71,.62);
  box-shadow:12px 12px 0 var(--portfolio-wine),15px 15px 0 rgba(206,129,71,.20);
}
.portrait-frame::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:5px;
  pointer-events:none;
  border:1px solid rgba(242,231,221,.17);
  clip-path:polygon(0 0,34% 0,34% 1px,66% 1px,66% 0,100% 0,100% 34%,calc(100% - 1px) 34%,calc(100% - 1px) 66%,100% 66%,100% 100%,66% 100%,66% calc(100% - 1px),34% calc(100% - 1px),34% 100%,0 100%,0 66%,1px 66%,1px 34%,0 34%);
}
.portrait-caption{
  padding:7px 11px;
  border:1px solid rgba(206,129,71,.45);
  background:rgba(11,8,13,.9);
  box-shadow:3px 3px 0 rgba(46,0,20,.8);
}
.home-about-teaser,.home-work-cta-section,.contact-section,.work-section,.about-section,.contact-page,.work-page-intro{
  background-image:
    repeating-linear-gradient(135deg,rgba(206,129,71,.018) 0 1px,transparent 1px 13px);
}
.home-about-teaser::before,.home-work-cta-section::before,.contact-section::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:clamp(120px,20vw,260px);
  aspect-ratio:1;
  right:4%;
  top:12%;
  border:1px solid rgba(206,129,71,.16);
  border-radius:50%;
  box-shadow:0 0 0 14px rgba(206,129,71,.018),0 0 0 28px rgba(206,129,71,.014);
  pointer-events:none;
}
.home-work-cta-section::before{right:auto;left:2%;top:18%}
.contact-section::before{right:8%;top:8%;width:clamp(100px,15vw,190px)}
.home-about-emblem{
  filter:drop-shadow(6px 7px 0 rgba(46,0,20,.7));
}
.home-about-emblem span:first-child{
  text-shadow:0 0 16px rgba(206,129,71,.35);
}
.project-card,.skills-card,.contact-method,.creative-samples-grid .creative-sample{
  position:relative;
  overflow:hidden;
}
.project-card::before,.skills-card::before,.contact-method::before,.creative-samples-grid .creative-sample::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:34px;
  height:34px;
  border-top:1px solid rgba(206,129,71,.72);
  border-left:1px solid rgba(206,129,71,.72);
  pointer-events:none;
  z-index:2;
}
.project-card::after,.skills-card::after,.contact-method::after,.creative-samples-grid .creative-sample::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:25px;
  height:25px;
  border-right:1px solid rgba(206,129,71,.4);
  border-bottom:1px solid rgba(206,129,71,.4);
  pointer-events:none;
}
.project-card h3,.skills-card h3,.skills-card h4,.contact-method h2{
  text-wrap:balance;
}
.project-card .project-meta,.interlude-photo-grid figcaption{
  color:#d8b49b;
}
.project-image,.sample-visual,.coming-art{
  outline:1px solid rgba(206,129,71,.16);
  outline-offset:-5px;
}
.project-image img,.sample-visual img{
  transition:transform .4s cubic-bezier(.2,.7,.2,1),filter .4s ease;
}
.project-card:hover .project-image img,.creative-sample:hover .sample-visual img{
  transform:scale(1.025);
}
a:not(.wordmark):not(.hero-index):not(.skip-link){
  text-decoration-thickness:from-font;
  text-underline-offset:.22em;
}
.site-footer{
  position:relative;
}
/* Removed decorative MM / 2026 footer marker. */
.language-toggle{
  border-color:rgba(206,129,71,.55);
}
.language-toggle:hover{
  border-color:var(--portfolio-copper);
  background:rgba(46,0,20,.5);
}
@media(max-width:760px){
  .home-about-teaser::before,.home-work-cta-section::before,.contact-section::before{opacity:.5}
  .portrait-frame{box-shadow:8px 8px 0 var(--portfolio-wine),10px 10px 0 rgba(206,129,71,.18)}
}
@media(prefers-reduced-motion:reduce){
  .project-image img,.sample-visual img{transition:none!important}
}


/* Cathedral-inspired details — rose gold, silver and a restrained deep teal. */
:root{
  --portfolio-rose-gold:#b98591;
  --portfolio-silver:#bfc2c8;
  --portfolio-teal:#3b8581;
  --portfolio-teal-soft:rgba(59,133,129,.16);
}
body{
  background-image:
    radial-gradient(ellipse at 8% 14%,rgba(116,35,61,.22),transparent 34%),
    radial-gradient(ellipse at 91% 39%,rgba(59,133,129,.075),transparent 28%),
    radial-gradient(ellipse at 50% 100%,rgba(185,133,145,.09),transparent 45%);
}
.gothic-mandala{
  background:
    repeating-conic-gradient(from 7.5deg,transparent 0deg 7deg,rgba(191,194,200,.45) 7.2deg 7.55deg,transparent 7.8deg 15deg),
    radial-gradient(circle,transparent 0 16%,rgba(185,133,145,.7) 16.2% 16.5%,transparent 16.8% 24%,rgba(191,194,200,.75) 24.2% 24.45%,transparent 24.8% 34%,rgba(59,133,129,.6) 34.2% 34.45%,transparent 34.8% 47%,rgba(185,133,145,.6) 47.2% 47.45%,transparent 47.8%);
  opacity:.075;
}
.gothic-mandala::before,.gothic-mandala::after{
  border-color:rgba(191,194,200,.58);
  box-shadow:0 0 0 12px rgba(185,133,145,.035),0 0 0 24px rgba(59,133,129,.025);
}
.site-header nav a:hover,.site-header nav a:focus-visible{
  color:var(--portfolio-silver);
  text-shadow:0 0 14px rgba(191,194,200,.2);
}
.site-header nav a[aria-current="page"]{
  text-decoration-color:rgba(185,133,145,.8);
}
.hero-copy .eyebrow,.section-wrap>.eyebrow{
  color:#d7c5cc;
}
.eyebrow-line{
  background:linear-gradient(90deg,var(--portfolio-rose-gold),var(--portfolio-silver),var(--portfolio-teal));
}
.hero-tags span,.skill-list span,.about-tags span{
  border-color:rgba(191,194,200,.23);
}
.project-card,.skills-card,.contact-method,.creative-samples-grid .creative-sample{
  border-color:rgba(191,194,200,.24);
  background-image:
    linear-gradient(135deg,rgba(185,133,145,.12),transparent 42%),
    radial-gradient(ellipse at 100% 0%,rgba(59,133,129,.09),transparent 42%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 5px),
    linear-gradient(155deg,#21171c 0%,#110e12 76%);
}
.project-card::before,.skills-card::before,.contact-method::before,.creative-samples-grid .creative-sample::before{
  border-color:rgba(185,133,145,.8);
}
.project-card::after,.skills-card::after,.contact-method::after,.creative-samples-grid .creative-sample::after{
  border-color:rgba(191,194,200,.5);
}
.project-card:hover,.skills-card:hover,.contact-method:hover{
  border-color:rgba(185,133,145,.82);
  box-shadow:5px 6px 0 rgba(46,0,20,.62),0 0 0 1px rgba(191,194,200,.08),0 18px 35px rgba(0,0,0,.24);
}
.portrait-frame{
  border-color:rgba(185,133,145,.72);
  box-shadow:12px 12px 0 var(--portfolio-wine),15px 15px 0 rgba(191,194,200,.15);
}
.portrait-caption{
  border-color:rgba(191,194,200,.38);
}
.project-card .project-meta,.interlude-photo-grid figcaption{
  color:#c9a8b2;
}
.info-ribbon{
  border-bottom-color:rgba(185,133,145,.4);
  box-shadow:0 4px 18px #0005,inset 0 -1px rgba(191,194,200,.08);
}
.gothic-button,.home-work-cta,.contact-method-primary a{
  border-color:rgba(185,133,145,.75);
}
.gothic-button:hover,.home-work-cta:hover,.contact-method-primary a:hover{
  border-color:var(--portfolio-silver);
}
.site-footer::before{
  color:rgba(185,133,145,.82);
}
.site-footer::after{
  color:var(--portfolio-silver);
  filter:drop-shadow(0 0 7px rgba(185,133,145,.3));
}
@media(max-width:760px){
  .gothic-mandala{opacity:.045}
  .portrait-frame{box-shadow:8px 8px 0 var(--portfolio-wine),10px 10px 0 rgba(191,194,200,.12)}
}