/* Typography is loaded once in each page head: Lora for headings and Nunito Sans for body text. */

:root{
  color-scheme:dark;
  --ink:#0b080d;
  --paper:#eee4eb;
  --burgundy:#2b1021;
  --copper:#c27b92;
  --muted:#b8a8b4;
  --line:#493344;
  --surface:#140e17;
  --surface-raised:#211522;
  --mono:'Nunito Sans',Arial,sans-serif;
  --sans:'Nunito Sans',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:85px}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--sans);line-height:1.65}
a{color:inherit}
::selection{background:var(--copper);color:var(--ink)}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:3px solid var(--copper);outline-offset:4px;border-radius:4px}
.skip-link{position:absolute;left:12px;top:8px;z-index:1000;transform:translateY(-160%);padding:12px 16px;background:var(--copper);color:var(--ink);font-weight:800;border-radius:6px}
.skip-link:focus{transform:translateY(0)}
.notice{display:flex;justify-content:center;align-items:center;gap:10px;padding:10px 18px;background:var(--burgundy);color:var(--paper);font-size:.76rem;font-weight:700;text-align:center;letter-spacing:.02em;border-bottom:1px solid #6f2947}
.notice-dot{width:8px;height:8px;border-radius:50%;background:var(--copper);flex:none;box-shadow:0 0 0 4px #b85c7a22}
.site-header{min-height:76px;padding:0 6vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:24px;background:#110b16ee;position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}
.wordmark{font-size:1.55rem;font-weight:800;text-decoration:none;letter-spacing:-.1em}
.wordmark span{color:var(--copper)}
.wordmark.full-name{font-size:clamp(.9rem,1.6vw,1.2rem);letter-spacing:-.045em;white-space:nowrap}
nav{display:flex;gap:clamp(16px,3vw,42px)}
nav a,.language-toggle{font-size:.78rem;font-weight:700;text-decoration:none}
nav a{transition:color .2s ease}
nav a:hover,.contact-links a:hover{color:var(--copper)}
.language-toggle{border:1px solid #603147;border-radius:100px;background:transparent;color:var(--paper);padding:9px 14px;cursor:pointer;min-height:44px;min-width:64px}
.section-wrap{padding-left:8vw;padding-right:8vw}
.hero{position:relative;isolation:isolate;min-height:630px;padding-top:95px;padding-bottom:90px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:5vw;overflow:hidden}
.hero:before,.hero:after{content:"";position:absolute;z-index:-1;border:1px solid #b85c7a44;border-radius:50%;pointer-events:none}
.hero:before{width:370px;height:370px;right:-180px;top:50px}
.hero:after{width:180px;height:180px;left:-125px;bottom:45px;border-color:#2b102177}
.hero-copy{position:relative;z-index:2}
.eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.eyebrow-line{width:30px;height:2px;background:var(--copper)}
h1,h2,h3,p{margin-top:0}
h1,h2{font-size:clamp(2.9rem,6.2vw,6.2rem);line-height:.99;letter-spacing:-.075em;margin:24px 0}
h1 em,h2 em{font-style:normal;color:var(--copper)}
.hero-intro{max-width:510px;font-size:1.05rem;color:#d4c3ce;line-height:1.8}
.text-link{display:inline-flex;gap:14px;align-items:center;margin-top:20px;padding-bottom:7px;border-bottom:2px solid var(--copper);font-size:.88rem;font-weight:800;text-decoration:none;transition:color .2s ease,gap .2s ease}
.text-link:hover{color:var(--copper);gap:20px}
.text-link span:last-child{font-size:1.2rem}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:46px}
.hero-tags span,.skill-list span,.about-tags span{border:1px solid var(--line);border-radius:100px;padding:7px 11px;font:.62rem var(--mono);letter-spacing:.03em;background:#2b102133}
.portrait-wrap{position:relative;min-height:420px;display:flex;align-items:center;justify-content:center}
.portrait-frame{position:relative;z-index:1;width:min(78%,340px);aspect-ratio:4/5;background:var(--surface);border:1px solid #603147;padding:12px;transform:rotate(2deg);box-shadow:14px 14px 0 var(--burgundy)}
.portrait{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;filter:saturate(.88)}
.portrait-shape{position:absolute;border-radius:50%;animation:float-shape 8s ease-in-out infinite}
.shape-one{width:250px;height:250px;background:var(--burgundy);border:1px solid #b85c7a77;right:0;top:15px}
.shape-two{width:90px;height:90px;background:var(--copper);left:5%;bottom:25px;animation-delay:-3s}
.portrait-caption{position:absolute;z-index:2;bottom:2px;left:5%;font:.68rem var(--mono);transform:rotate(-5deg);color:#f0e6ec}
.hero-stamp{position:absolute;right:-1%;bottom:45px;z-index:3;display:grid;place-content:center;width:100px;height:100px;background:var(--copper);color:var(--ink);border:1px solid #f2cad9;border-radius:50%;font:.68rem/1.2 var(--mono);text-align:center;transform:rotate(12deg);animation:stamp-wiggle 7s ease-in-out infinite}
.hero-stamp span{color:var(--burgundy);font-size:1.6rem}
.hero-index{position:absolute;right:8vw;bottom:22px;font:.65rem var(--mono);color:#B3C8C5;letter-spacing:.12em}
.work-section{padding-top:100px;padding-bottom:110px;background:var(--burgundy);position:relative;overflow:hidden}
.work-section:before{content:"";position:absolute;right:-130px;top:80px;width:300px;height:300px;border:1px solid #b85c7a55;border-radius:50%;pointer-events:none}
.section-heading{max-width:800px;margin-bottom:48px;position:relative}
.section-heading h2,.about-section h2,.contact-section h2{font-size:clamp(2.5rem,5vw,4.7rem)}
.section-lead{max-width:650px;color:#C5D8D3;line-height:1.8}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;position:relative}
.project-card{background:var(--surface);padding:16px 16px 26px;min-width:0;border:1px solid #315653;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.project-card:hover{transform:translateY(-4px);border-color:var(--copper);box-shadow:8px 8px 0 #b85c7a33}
.project-featured{grid-column:span 2;display:grid;grid-template-columns:1.05fr .95fr;column-gap:26px;align-items:start}
.project-featured .project-image{grid-row:span 5}
.project-image{position:relative;aspect-ratio:16/10;background:#110b16;overflow:hidden}
.project-image img{width:100%;height:100%;object-fit:contain;display:block;background:#110b16}
.image-employee,.image-calculator{background:#110b16}
.image-label{position:absolute;left:12px;top:12px;padding:6px 9px;background:var(--copper);color:var(--ink);font:.62rem var(--mono)}
.project-meta{display:flex;justify-content:space-between;gap:12px;margin:20px 0 10px;font:.62rem var(--mono);color:#B5C9C5;text-transform:uppercase}
.project-card h3{font-size:clamp(1.2rem,2vw,1.75rem);letter-spacing:-.05em;margin-bottom:10px;line-height:1.2}
.project-card p{color:#C8D9D5;font-size:.91rem;line-height:1.8}
.skill-list{display:flex;gap:6px;flex-wrap:wrap;margin-top:20px}
.skill-list span{font-size:.58rem;padding:6px 9px;background:#2b102133}
.project-coming{background:#2b1021;color:var(--paper)}
.coming-art{aspect-ratio:16/10;background:#110b16;color:var(--paper);display:flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden;font:.7rem var(--mono);letter-spacing:.15em}
.coming-art:before,.coming-art:after{content:"";position:absolute;width:170px;height:170px;border:1px solid #b85c7a55;border-radius:50%}
.coming-art:before{left:-80px;top:-80px}
.coming-art:after{right:-70px;bottom:-100px}
.coming-art span:first-child{font-size:clamp(5rem,15vw,10rem);font-family:var(--sans);font-weight:800;letter-spacing:-.1em;color:var(--copper)}
.coming-art span:nth-child(2){font-size:3rem;color:var(--paper)}
.coming-art span:last-child{position:absolute;bottom:14px;right:14px}
.privacy-note{margin-top:30px;font-size:.82rem;color:#C5D8D3}
.privacy-note span{color:var(--copper);margin-right:8px}
.branding-gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center;padding:18px;background:#110b16;min-height:220px;border:1px solid #385458}
.branding-gallery figure{margin:0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.branding-gallery img{display:block;width:100%;height:110px;object-fit:contain;background:transparent;image-rendering:auto}
.branding-gallery figure:first-child img{height:72px;width:auto;max-width:100%;object-fit:contain}
.branding-gallery figure:nth-child(2) img{height:88px;max-width:100%;object-fit:contain}
.branding-gallery figcaption{font:.62rem var(--mono);letter-spacing:.06em;color:#B5C9C5;text-align:center}
.about-section{padding-top:120px;padding-bottom:120px;display:grid;grid-template-columns:.35fr 1fr;gap:6vw;align-items:start;position:relative;overflow:hidden}
.about-mark{font-size:clamp(5rem,15vw,11rem);color:var(--copper);line-height:1;animation:slow-spin 24s linear infinite}
.about-section>div:last-child{max-width:850px}
.about-section p:not(.eyebrow){max-width:760px;color:#d4c3ce;line-height:1.9}
.about-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.contact-section{padding-top:95px;padding-bottom:100px;background:#0A151B;color:var(--paper);position:relative;overflow:hidden}
.contact-section:after{content:"";position:absolute;width:280px;height:280px;border:1px solid #b85c7a44;border-radius:50%;right:-110px;top:35px;pointer-events:none}
.contact-section h2 em{color:var(--copper)}
.contact-section>p:not(.eyebrow){max-width:600px;color:#d4c3ce}
.contact-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;position:relative;z-index:1}
.contact-links a{border:1px solid #608C86;border-radius:100px;padding:12px 18px;text-decoration:none;font-weight:700;font-size:.84rem;min-height:44px;display:inline-flex;align-items:center;transition:border-color .2s ease,color .2s ease}
.site-footer{min-height:90px;display:flex;justify-content:space-between;align-items:center;gap:20px;background:var(--ink)}
.site-footer>span{font:.62rem var(--mono);color:#B5C9C5}
.image-placeholder{display:none;place-content:center;gap:12px;text-align:center;padding:24px;color:var(--paper);font-size:.76rem;overflow-wrap:anywhere}
.portrait-placeholder{height:100%;font-size:.68rem}
.placeholder-mark{font-size:4rem;font-weight:800;letter-spacing:-.1em;color:var(--copper)}
.project-placeholder{height:100%;min-height:200px;background:linear-gradient(135deg,var(--burgundy),var(--ink))}
.placeholder-number{font-size:3rem;font-weight:800;letter-spacing:-.08em;color:var(--copper)}
.project-image img:not([src]){display:none}
@keyframes float-shape{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-12px) rotate(5deg)}}
@keyframes stamp-wiggle{0%,90%,100%{transform:rotate(12deg)}94%{transform:rotate(18deg)}97%{transform:rotate(8deg)}}
@keyframes slow-spin{to{transform:rotate(360deg)}}
@media(max-width:800px){
  .site-header{padding:0 5vw;height:68px}
  .section-wrap{padding-left:6vw;padding-right:6vw}
  .hero{grid-template-columns:1fr;gap:30px;padding-top:65px;padding-bottom:70px}
  .hero h1{font-size:clamp(3rem,11vw,5rem)}
  .hero-copy{max-width:650px}
  .portrait-wrap{min-height:360px}
  .portrait-frame{width:min(65%,300px)}
  .shape-one{right:15%}
  .hero-stamp{right:10%;bottom:20px}
  .hero-index{right:6vw}
  .project-featured{grid-template-columns:1fr;grid-column:span 2}
  .project-featured .project-image{grid-row:auto}
  .project-grid{gap:16px}
  .project-card{padding:12px 12px 20px}
  .about-section{grid-template-columns:1fr;gap:10px;padding-top:80px;padding-bottom:80px}
  .about-mark{font-size:5rem}
  .contact-section{padding-top:75px;padding-bottom:75px}
}
@media(max-width:540px){
  nav{gap:12px}
  nav a{font-size:.68rem}
  .site-header{gap:12px}
  .language-toggle{padding:7px 10px;font-size:.68rem}
  .wordmark{font-size:1.35rem}
  .wordmark.full-name{font-size:.84rem;letter-spacing:-.04em}
  .notice{font-size:.68rem}
  .hero{padding-top:48px}
  .hero-tags{margin-top:30px}
  .portrait-wrap{min-height:320px}
  .portrait-frame{width:65%}
  .project-grid{grid-template-columns:1fr}
  .project-featured{grid-column:span 1;display:block}
  .project-card h3{font-size:1.4rem}
  .section-heading h2,.about-section h2,.contact-section h2{font-size:clamp(2.5rem,10vw,3.6rem)}
  .site-footer{padding-top:20px;padding-bottom:20px;flex-wrap:wrap}
  .site-footer>span:last-child{width:100%}
  .branding-gallery{padding:12px;gap:8px}
  .branding-gallery figure:first-child img{height:62px}
  .branding-gallery figure:nth-child(2) img{height:76px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}


/* Android gallery: compact image, robust controls and responsive sizing */
.android-project{min-width:0}
.android-carousel{min-width:0;width:100%;background:#0A151B;border:1px solid var(--line);align-self:start;display:flex;flex-direction:column;overflow:hidden}
.android-carousel-stage{position:relative;display:flex;align-items:center;justify-content:center;height:190px;min-height:190px;padding:12px 58px;overflow:hidden;background:#0A151B}
.android-carousel-stage img{display:block;width:100%;height:100%;max-width:100%;max-height:160px;object-fit:contain;object-position:center}
.android-carousel-stage .image-label{position:absolute;left:10px;top:10px;z-index:1;pointer-events:none;font-size:.54rem;padding:4px 6px}
.android-carousel-controls{display:flex;align-items:center;justify-content:center;padding:7px 10px;border-top:1px solid var(--line)}
.carousel-arrow{position:absolute;top:50%;z-index:2;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;border:1px solid #8BC9BC;border-radius:50%;background:rgba(16,58,54,.96);color:var(--paper);font-size:1.25rem;line-height:1;cursor:pointer;touch-action:manipulation;pointer-events:auto;box-shadow:0 2px 10px #0008}
.carousel-arrow-prev{left:8px}
.carousel-arrow-next{right:8px}
.carousel-arrow:hover,.carousel-arrow:active{background:var(--burgundy);border-color:var(--copper)}
.carousel-arrow:focus-visible{outline:3px solid var(--copper);outline-offset:3px}
.carousel-counter{min-width:54px;text-align:center;font:.72rem var(--mono);color:#f0e6ec;font-variant-numeric:tabular-nums}
.android-project-copy{min-width:0}
.carousel-hint{margin-top:18px;font-size:.75rem!important;color:#B5C9C5!important}
@media(max-width:800px){
  .android-project{grid-template-columns:1fr}
  .android-carousel-stage{height:175px;min-height:175px;padding:10px 56px}
  .android-carousel-stage img{max-height:145px}
}
@media(max-width:540px){
  .android-carousel-stage{height:155px;min-height:155px;padding:8px 50px}
  .android-carousel-stage img{max-height:125px}
  .carousel-arrow{width:44px;height:44px;font-size:1.1rem}
  .carousel-arrow-prev{left:4px}
  .carousel-arrow-next{right:4px}
  .android-carousel-controls{padding:6px}
}
@media(max-width:360px){
  .android-carousel-stage{height:140px;min-height:140px;padding:6px 46px}
  .android-carousel-stage img{max-height:112px}
}


/* C# coursework: compact code panels and a distinct technical case-study layout */
.project-oop{grid-column:span 2;background:linear-gradient(135deg,#132E33 0%,#102F2B 100%);border-color:#3B6B66;padding:clamp(18px,3vw,32px)}
.project-oop:hover{box-shadow:8px 8px 0 #b85c7a22}
.oop-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.oop-heading .project-meta{margin-top:0}
.oop-heading h3{font-size:clamp(1.8rem,3.8vw,3rem);letter-spacing:-.06em}
.oop-grade{display:grid;place-items:center;flex:none;width:76px;height:76px;border:1px solid var(--copper);border-radius:50%;color:var(--copper);font:700 1.9rem/1 var(--sans);box-shadow:inset 0 0 0 6px #b85c7a11}
.oop-grade span{font:.58rem var(--mono);margin-top:-14px;letter-spacing:.04em}
.interaction-hint{margin:22px 0 -10px;padding:12px 14px;border-left:3px solid var(--copper);background:#B6FF3B0A;color:#D1D4C8;font-size:.82rem;line-height:1.7}
.interaction-hint:before{content:"↳";display:inline-block;margin-right:8px;color:var(--copper);font-family:var(--mono)}
.oop-samples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px}
.code-sample{min-width:0;border:1px solid #426965;background:#0C2025;align-self:start}
.code-sample summary{display:flex;align-items:center;gap:10px;padding:14px 12px;cursor:pointer;font-size:.82rem;font-weight:800;list-style:none}
.code-sample summary::-webkit-details-marker{display:none}
.code-sample summary::after{content:"+";margin-left:auto;color:var(--copper);font:1.2rem var(--mono)}
.code-sample[open] summary::after{content:"−"}
.code-sample summary span:first-child{color:var(--copper);font:.65rem var(--mono)}
.code-sample>p{padding:0 12px;margin:0 0 12px;font-size:.76rem!important;line-height:1.65!important}
.code-sample pre{margin:0;padding:14px 12px;overflow-x:auto;border-top:1px solid #294A4A;border-bottom:1px solid #294A4A;color:#D9F0E8;font: .7rem/1.65 'Nunito Sans',monospace;tab-size:4;white-space:pre}
.code-sample code{font:inherit}
.sample-source{display:block;padding:9px 12px;color:#8ECFBE;font:.62rem var(--mono);letter-spacing:.04em}
.oop-note{margin:18px 0 0!important;color:#BBD2CC!important;font-size:.76rem!important}
@media(max-width:800px){
  .oop-samples{grid-template-columns:repeat(2,minmax(0,1fr))}
  .code-sample:last-child{grid-column:span 2}
}
@media(max-width:540px){
  .project-oop{grid-column:span 1}
  .oop-samples{grid-template-columns:1fr}
  .code-sample:last-child{grid-column:auto}
  .oop-grade{width:62px;height:62px;font-size:1.6rem}
  .oop-grade span{margin-top:-11px}
}


/* Marika's original visual direction: nocturnal grunge, dark academia and analog-retro details.
   Custom palette; no company brand palette or assets are used. */
body{
  background:
    radial-gradient(ellipse at 78% 8%,#16251d55 0%,transparent 34rem),
    radial-gradient(ellipse at 8% 42%,#17152744 0%,transparent 38rem),
    #090A0F;
}
::selection{background:#B6FF3B;color:#090A0F}
.site-header{
  background:rgba(9,10,15,.91);
  border-bottom:1px solid #424638;
  box-shadow:0 8px 26px #0008;
}
.wordmark span{color:#B6FF3B;text-shadow:0 0 16px #B6FF3B66}
.notice{
  background:linear-gradient(90deg,#101510,#1b2118 50%,#101510);
  border-bottom:1px solid #3e4a2d;
}
.notice-dot{background:#B6FF3B;box-shadow:0 0 10px #B6FF3B,0 0 0 4px #B6FF3B22}
.hero:before,.hero:after{border-color:#B6FF3B44}
.hero:before{box-shadow:0 0 50px #B6FF3B0a,inset 0 0 45px #B6FF3B08}
.eyebrow{color:#B6FF3B}
.eyebrow-line{background:#B6FF3B;box-shadow:0 0 9px #B6FF3B77}
h1 em,h2 em,.contact-section h2 em{color:#B6FF3B;text-shadow:0 0 22px #B6FF3B22}
.hero-intro,.about-section p:not(.eyebrow),.project-card p{color:#C5C5BC}
.hero-tags span,.skill-list span,.about-tags span{
  border-color:#3c4637;
  background:linear-gradient(135deg,#172018bb,#12131aee);
}
.text-link{border-color:#B6FF3B}
.text-link:hover,.contact-links a:hover{color:#B6FF3B}
.portrait-frame{
  background:#12141a;
  border-color:#64734a;
  box-shadow:14px 14px 0 #14241D,0 0 28px #B6FF3B12;
}
.shape-one{background:#14241D;border-color:#B6FF3B55}
.shape-two{background:#B6FF3B;box-shadow:0 0 28px #B6FF3B33}
.hero-stamp{
  background:#B6FF3B;
  border-color:#D5FF93;
  box-shadow:0 0 30px #B6FF3B22;
}
.hero-stamp span{color:#14241D}
.work-section{
  background:
    radial-gradient(ellipse at 92% 0%,#1b2b1e 0%,transparent 34rem),
    linear-gradient(145deg,#101510,#101116 62%,#14121b);
}
.work-section:before{border-color:#B6FF3B33}
.project-card{
  background:linear-gradient(150deg,#171920,#101116 72%);
  border-color:#353b35;
  box-shadow:0 8px 24px #0002;
}
.project-card:hover{
  border-color:#82964c;
  box-shadow:0 12px 35px #0006,0 0 0 1px #B6FF3B18;
}
.project-meta{color:#B8B9AA}
.image-label{
  background:#B6FF3B;
  color:#090A0F;
  box-shadow:0 2px 12px #0008;
}
.project-image,.project-image img,.coming-art,.branding-gallery{background:#090A0F}
.project-coming{background:#12150F}
.coming-art:before,.coming-art:after{border-color:#B6FF3B33}
.coming-art span:first-child{color:#B6FF3B}
.privacy-note{color:#BFC0B6}
.privacy-note span{color:#B6FF3B}
.branding-gallery{border-color:#343B34}
.branding-gallery figcaption{color:#B8B9AA}
.about-mark{color:#B6FF3B;text-shadow:0 0 24px #B6FF3B1c}
.contact-section{
  background:
    radial-gradient(ellipse at 90% 10%,#14241d 0%,transparent 28rem),
    #08090D;
  border-top:1px solid #343b34;
}
.contact-section:after{border-color:#B6FF3B33}
.contact-links a{border-color:#505847}
.site-footer{background:#08090D;border-top:1px solid #242820}
.site-footer>span{color:#A4A59B}
.language-toggle{border-color:#526044}
.language-toggle:hover{border-color:#B6FF3B;color:#B6FF3B}
a:focus-visible,button:focus-visible{outline-color:#B6FF3B}
.skip-link{background:#B6FF3B;color:#090A0F}
.image-placeholder{background:#101116}
.placeholder-mark,.placeholder-number{color:#B6FF3B}
.project-placeholder{background:linear-gradient(135deg,#14241D,#090A0F)}
/* Subtle analog scanlines and grain-like stripes, made entirely in CSS. */
.work-section:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.12;
  background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,#8f9a7d 4px);
  mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent);
}
.work-section>.section-heading,.work-section>.project-grid{position:relative;z-index:1}

/* Android screenshots: larger viewing area while preserving full image proportions. */
.android-carousel{
  background:#080A0D;
  border:1px solid #4a5a3d;
  box-shadow:0 12px 30px #0008,0 0 24px #B6FF3B0b;
}
.android-carousel-stage{
  height:330px;
  min-height:330px;
  padding:16px 64px;
  background:
    radial-gradient(ellipse at center,#18201a 0%,#0b0d11 70%);
}
.android-carousel-stage img{
  max-height:294px;
  filter:drop-shadow(0 6px 14px #000a);
}
.android-carousel-stage .image-label{background:#B6FF3B;color:#090A0F}
.android-carousel-controls{border-top-color:#30392b;background:#0a0c0f}
.carousel-arrow{
  border-color:#B6FF3B99;
  background:rgba(10,15,12,.96);
  color:#B6FF3B;
  box-shadow:0 0 0 3px #090A0F,0 0 16px #B6FF3B20,0 4px 14px #000b;
}
.carousel-arrow:hover,.carousel-arrow:active{
  background:#B6FF3B;
  border-color:#D5FF93;
  color:#090A0F;
  box-shadow:0 0 22px #B6FF3B66;
}
.carousel-arrow:focus-visible{outline-color:#B6FF3B}
.carousel-counter{color:#B6FF3B}
.carousel-hint{color:#B6BBA8!important}
.project-oop{
  background:linear-gradient(135deg,#171d17 0%,#101116 75%);
  border-color:#46533a;
}
.project-oop:hover{box-shadow:0 12px 35px #0008,0 0 0 1px #B6FF3B22}
.oop-grade{border-color:#B6FF3B;color:#B6FF3B;box-shadow:inset 0 0 0 6px #B6FF3B0c,0 0 22px #B6FF3B0b}
.code-sample{border-color:#394536;background:#0b0d11}
.code-sample summary span:first-child,.code-sample summary::after{color:#B6FF3B}
.code-sample pre{border-color:#30392b;color:#DCE9D0;background:#080A0D}
.sample-source{color:#B6FF3B}
.oop-note{color:#B8C1AD!important}
@media(max-width:800px){
  .android-carousel-stage{height:285px;min-height:285px;padding:14px 58px}
  .android-carousel-stage img{max-height:249px}
}
@media(max-width:540px){
  .android-carousel-stage{height:250px;min-height:250px;padding:12px 52px}
  .android-carousel-stage img{max-height:214px}
}
@media(max-width:360px){
  .android-carousel-stage{height:220px;min-height:220px;padding:10px 48px}
  .android-carousel-stage img{max-height:184px}
}
@media(prefers-reduced-motion:reduce){
  .work-section:after{display:none}
}


/* Slightly larger Android screenshots and accessible OOP sample navigation. */
.android-carousel-stage{height:360px;min-height:360px}
.android-carousel-stage img{max-height:322px}
@media(max-width:800px){
  .android-carousel-stage{height:315px;min-height:315px;padding:14px 58px}
  .android-carousel-stage img{max-height:279px}
}
@media(max-width:540px){
  .android-carousel-stage{height:280px;min-height:280px;padding:12px 52px}
  .android-carousel-stage img{max-height:244px}
}
@media(max-width:360px){
  .android-carousel-stage{height:245px;min-height:245px;padding:10px 48px}
  .android-carousel-stage img{max-height:209px}
}
.oop-browser{margin-top:24px;border:1px solid #46533a;background:#0b0d11;box-shadow:0 10px 28px #0005;min-width:0}
.oop-browser-toolbar{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid #30392b;background:#12150f}
.oop-browser-toolbar label{font-size:.78rem;font-weight:800;color:#D1D4C8}
.oop-browser-toolbar select{width:100%;min-height:44px;padding:8px 36px 8px 12px;border:1px solid #64734a;border-radius:3px;background:#090A0F;color:#F0F0E8;font:inherit;font-size:.82rem}
.oop-browser-toolbar select:focus-visible,.oop-nav-button:focus-visible{outline:3px solid #B6FF3B;outline-offset:3px}
.oop-sample-panels{min-width:0}
.oop-sample-panel{padding:clamp(16px,2.5vw,26px);min-width:0}
.oop-sample-panel[hidden]{display:none}
.sample-panel-heading{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.sample-panel-heading h4{margin:0;font-size:1.1rem;line-height:1.4;color:#F0F0E8}
.sample-task{display:inline-flex;align-items:center;justify-content:center;min-width:70px;min-height:30px;padding:5px 8px;border:1px solid #536341;color:#B6FF3B;font:.68rem var(--mono)}
.oop-sample-panel>p{margin:0 0 16px;color:#C5C5BC;font-size:.86rem;line-height:1.8}
.oop-sample-panel pre{margin:0;max-width:100%;overflow-x:auto;padding:18px;border:1px solid #30392b;background:#07090b;color:#E4EAD8;font:.78rem/1.75 var(--mono);tab-size:4;white-space:pre}
.oop-sample-panel code{font:inherit}
.oop-browser-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid #30392b;background:#12150f}
.oop-nav-button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 14px;border:1px solid #536341;border-radius:3px;background:#0b0d11;color:#DCE9D0;font:700 .78rem var(--sans);cursor:pointer}
.oop-nav-button:last-child{justify-self:end}
.oop-nav-button:hover:not(:disabled){background:#B6FF3B;color:#090A0F;border-color:#D5FF93}
.oop-nav-button:disabled{opacity:.45;cursor:not-allowed}
.oop-counter{color:#B6FF3B;font:.75rem var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:540px){
  .oop-browser-toolbar{grid-template-columns:1fr;gap:8px}
  .oop-sample-panel{padding:14px}
  .oop-sample-panel pre{font-size:.7rem;padding:12px}
  .sample-panel-heading h4{font-size:1rem}
  .oop-browser-controls{gap:7px;padding:10px 8px}
  .oop-nav-button{padding:8px 9px;font-size:.7rem}
}


/* Introductory summary, clickable image enlargement and study topic list. */
.intro-strip{display:grid;grid-template-columns:minmax(90px,.22fr) 1fr;gap:clamp(18px,4vw,54px);align-items:start;padding-top:38px;padding-bottom:52px;border-bottom:1px solid #343b34;background:linear-gradient(100deg,#10151088,transparent 75%)}
.intro-strip-mark{font-size:clamp(2.5rem,6vw,5rem);font-weight:900;letter-spacing:-.1em;line-height:1;color:#B6FF3B;text-shadow:0 0 22px #B6FF3B24}
.intro-strip-mark span{display:block;font-size:1.2rem;letter-spacing:0;margin-top:12px}
.intro-strip-copy{max-width:920px}
.intro-strip-copy .intro-strip-title{font-size:clamp(1.65rem,3.5vw,2.7rem);line-height:1.2;margin:12px 0 16px;letter-spacing:-.05em}
.intro-strip-copy>p:not(.eyebrow){max-width:800px;color:#C5C5BC;line-height:1.8;margin:0 0 12px}
.intro-strip-copy .intro-strip-note{color:#B6FF3B;font-size:.87rem}
.study-topics{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:22px 0 0;padding:0}
.study-topics li{padding:12px 14px;border:1px solid #343b34;background:#0b0d11;color:#D8DCD0;font-size:.82rem;line-height:1.6}
.study-topics li:before{content:"✳";color:#B6FF3B;margin-right:9px}
img.image-zoomable{cursor:zoom-in}
img.image-zoomable:focus-visible{outline:3px solid #B6FF3B;outline-offset:4px}
.image-lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,36px);background:rgba(3,4,6,.94);cursor:zoom-out}
.image-lightbox[hidden]{display:none}
.image-lightbox img{display:block;max-width:96vw;max-height:92vh;width:auto;height:auto;object-fit:contain;box-shadow:0 12px 60px #000b;cursor:zoom-out}
.image-lightbox .lightbox-help{position:absolute;top:12px;right:16px;color:#F0F0E8;background:#12150f;border:1px solid #536341;padding:9px 12px;font-size:.76rem;line-height:1.5}
.image-lightbox:focus-visible{outline:3px solid #B6FF3B;outline-offset:-6px}
.oop-browser-controls .oop-nav-button{width:50%;min-width:0;height:32px;min-height:32px;padding:5px 8px}
.oop-browser-controls .oop-nav-button:first-child{justify-self:start}\n.oop-browser-controls .oop-nav-button:last-child{justify-self:end}
@media(max-width:800px){.intro-strip{grid-template-columns:1fr;gap:10px;padding-top:28px;padding-bottom:36px}.intro-strip-mark{font-size:2.5rem}.intro-strip-mark span{display:inline-block;margin:0 0 0 12px}.study-topics{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.image-lightbox img{scroll-behavior:auto}}


/* Visible copyright watermark overlays on portfolio image previews.
   Original image files remain unchanged; this is a deterrent, not copy protection. */
.android-carousel-stage::after{
  content:"©";
  position:absolute;right:10px;bottom:8px;z-index:1;pointer-events:none;
  display:grid;place-items:center;width:24px;height:24px;
  border-radius:50%;background:#090A0FCC;color:#F0E9DF;
  border:1px solid #D47A42;font:.72rem var(--mono);font-weight:700;
}
.branding-gallery figure{position:relative}
.branding-gallery figure::after{
  content:"©";
  position:absolute;left:5px;bottom:5px;z-index:1;pointer-events:none;
  display:grid;place-items:center;width:23px;height:23px;
  border-radius:50%;background:#090A0FCC;color:#F0E9DF;
  border:1px solid #D47A42;font:.7rem var(--mono);font-weight:700;
}
.hero-copyright{max-width:510px;margin:18px 0 0;color:#B8B9AA;font-size:.72rem;line-height:1.65}


/* === NIGHT SHIFT / analog grunge visual refresh === */
:root{
  --ink:#09090D;
  --paper:#F0E9DF;
  --burgundy:#251016;
  --copper:#D47A42;
  --muted:#B5A9A0;
  --line:#44343A;
  --surface:#121116;
  --surface-raised:#20191E;
  --mono:'Nunito Sans',monospace;
  --sans:'Nunito Sans',Arial,sans-serif;
}
body{
  background:
    radial-gradient(ellipse at 78% 4%,#5D241F40 0%,transparent 31rem),
    radial-gradient(ellipse at 8% 40%,#263B3033 0%,transparent 35rem),
    radial-gradient(ellipse at 84% 76%,#6C3A1D18 0%,transparent 28rem),
    repeating-linear-gradient(117deg,#FFFFFF03 0px,#FFFFFF03 1px,transparent 1px,transparent 7px),
    #09090D;
}
body:after{
  content:"";
  position:fixed;
  inset:0;
  z-index:10;
  pointer-events:none;
  opacity:.11;
  background:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,#E9D7C2 4px);
  mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
}
.site-header{
  background:rgba(9,9,13,.92);
  border-bottom:1px solid #51333A;
  box-shadow:0 10px 34px #0009;
}
.wordmark span{color:#D47A42;text-shadow:0 0 18px #D47A4266}
.notice{
  background:linear-gradient(90deg,#120D11,#2B151B 48%,#15110F);
  border-bottom:1px solid #61362E;
}
.notice-dot{background:#D47A42;box-shadow:0 0 12px #D47A42,0 0 0 4px #D47A4222}
.hero{isolation:isolate}
.hero:before,.hero:after{border-color:#D47A4266}
.hero:before{
  box-shadow:0 0 80px #D47A4212,inset 0 0 50px #D47A420A;
  animation:orbit-breathe 11s ease-in-out infinite alternate;
}
.hero:after{border-style:dashed;border-color:#71836A88}
.eyebrow{color:#DCA16F}
.eyebrow-line{background:#D47A42;box-shadow:0 0 12px #D47A4299}
h1 em,h2 em,.contact-section h2 em{
  color:#D47A42;
  text-shadow:0 0 25px #D47A4222;
}
.hero-intro,.about-section p:not(.eyebrow),.project-card p{color:#D0C5BC}
.hero-tags span,.skill-list span,.about-tags span{
  border-color:#4C3539;
  background:linear-gradient(135deg,#29151BCE,#141116EE);
}
.hero-tags span{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.hero-tags span:hover{transform:translateY(-3px) rotate(-1deg);border-color:#D47A42;box-shadow:0 5px 22px #D47A4218}
.text-link{border-color:#D47A42}
.text-link:hover,.contact-links a:hover{color:#E6A16D}
.portrait-frame{
  border-color:#8B563D;
  box-shadow:13px 13px 0 #29151B,0 0 36px #D47A4218;
}
.portrait{filter:saturate(.78) contrast(1.04)}
.shape-one{background:#24131A;border-color:#D47A4277}
.shape-two{background:#D47A42;box-shadow:0 0 34px #D47A4244}
.hero-stamp{
  background:#D47A42;border-color:#F1B982;
  box-shadow:0 0 34px #D47A422A;
}
.hero-stamp span{color:#251016}
.hero-copyright{border-left:2px solid #D47A42;padding-left:12px}
.work-section{
  background:
    radial-gradient(ellipse at 92% 0%,#422029 0%,transparent 32rem),
    linear-gradient(145deg,#130F14,#101014 60%,#1A1116);
}
.work-section:before{border-color:#D47A4244;border-style:dashed}
.work-section:after{opacity:.08;background:repeating-linear-gradient(0deg,transparent 0,transparent 4px,#D8B6A2 5px)}
.project-card{
  background:linear-gradient(145deg,#20191E,#111015 75%);
  border-color:#47343B;
  box-shadow:0 12px 28px #0004;
}
.project-card:hover{
  transform:translateY(-6px) rotate(-.25deg);
  border-color:#B56B4B;
  box-shadow:0 18px 38px #0008,0 0 0 1px #D47A4226;
}
.project-meta{color:#C69A80}
.image-label{background:#D47A42;color:#140D10;box-shadow:0 3px 14px #0009}
.project-image,.project-image img,.coming-art,.branding-gallery{background:#0A090D}
.project-coming{background:#171016;border-color:#50313B}
.coming-art:before,.coming-art:after{border-color:#D47A4266}
.coming-art span:first-child{color:#D47A42}
.privacy-note{color:#C9BDB3}
.privacy-note span{color:#D47A42}
.branding-gallery{border-color:#4B353B}
.branding-gallery figcaption{color:#BDAEA4}
.about-mark{color:#D47A42;text-shadow:0 0 28px #D47A422B}
.about-section{position:relative}
.about-section:before{
  content:"✳  /  ✳  /  ✳";
  position:absolute;right:8vw;top:36px;
  color:#D47A4270;font:.7rem var(--mono);letter-spacing:.35em;
}
.contact-section{
  background:radial-gradient(ellipse at 90% 10%,#321820 0%,transparent 29rem),#09080C;
  border-top:1px solid #443037;
}
.contact-section:after{border-color:#D47A4255;border-style:dashed}
.contact-links a{border-color:#604149;transition:transform .2s ease,background .2s ease,border-color .2s ease}
.contact-links a:hover{transform:translateY(-3px);border-color:#D47A42;background:#D47A4210}
.site-footer{background:#08070A;border-top:1px solid #33262B}
.site-footer>span{color:#B5A9A0}
.language-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:130px;min-height:44px;padding:9px 13px;
  border:1px solid #9B5D43;border-radius:3px;
  background:linear-gradient(135deg,#29171D,#111015);
  color:#F0E9DF;font:.72rem var(--mono);letter-spacing:.04em;
  box-shadow:inset 0 0 0 1px #D47A4212,0 4px 14px #0005;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.language-toggle:hover{
  transform:translateY(-1px);border-color:#E7A16D;color:#F4B989;
  background:linear-gradient(135deg,#3A1C25,#191116);
  box-shadow:0 0 18px #D47A4225;
}
.language-icon{font-size:1rem;color:#D47A42}
.language-label{font-weight:700}
.language-arrow{font-size:.95rem;color:#D47A42}
a:focus-visible,button:focus-visible{outline-color:#E7A16D}
.skip-link{background:#D47A42;color:#140D10}
.image-placeholder{background:#111015}
.placeholder-mark,.placeholder-number{color:#D47A42}
.project-placeholder{background:linear-gradient(135deg,#29151B,#09090D)}
.android-carousel{
  background:#09080C;border-color:#5B3B37;
  box-shadow:0 14px 34px #0009,0 0 26px #D47A420D;
}
.android-carousel-stage{
  background:radial-gradient(ellipse at center,#24171B 0%,#0B0A0E 72%);
}
.carousel-arrow{border-color:#D47A42AA;color:#F0B68B}
.carousel-arrow:hover,.carousel-arrow:active{background:#D47A42;border-color:#F1B982;color:#140D10;box-shadow:0 0 24px #D47A4266}
.carousel-counter{color:#DCA16F}
.project-oop{background:linear-gradient(135deg,#25171D 0%,#111015 75%);border-color:#614047}
.project-oop:hover{box-shadow:0 14px 38px #0009,0 0 0 1px #D47A4226}
.oop-grade{border-color:#D47A42;color:#DCA16F;box-shadow:inset 0 0 0 6px #D47A4210,0 0 22px #D47A4210}
.code-sample{border-color:#4B343B;background:#0D0B10}
.code-sample summary span:first-child,.code-sample summary::after{color:#DCA16F}
.code-sample pre{border-color:#382A31;color:#E8DDD2;background:#09080C}
.sample-source{color:#DCA16F}
.oop-note{color:#C9BDB3!important}
.oop-browser{border-color:#51373F;background:#0D0B10;box-shadow:0 14px 34px #0007}
.oop-browser-toolbar{border-bottom-color:#382A31;background:#191116}
.oop-browser-toolbar select{border-color:#7A4B3D}
.oop-browser-controls{border-top-color:#382A31;background:#191116}
.oop-nav-button{border-color:#7A4B3D;background:#0D0B10;color:#F0E9DF}
.oop-nav-button:hover:not(:disabled){background:#D47A42;color:#140D10;border-color:#F1B982}
.oop-counter{color:#DCA16F}
@keyframes orbit-breathe{
  0%{transform:scale(.97) rotate(-5deg);opacity:.55}
  100%{transform:scale(1.04) rotate(5deg);opacity:1}
}
@keyframes ember-drift{
  0%,100%{transform:translate3d(0,0,0);opacity:.45}
  50%{transform:translate3d(7px,-12px,0);opacity:.8}
}
@media(max-width:540px){
  .site-header{gap:8px}
  nav{gap:10px}
  nav a{font-size:.64rem}
  .language-toggle{min-width:94px;padding:7px 8px;gap:5px;font-size:.62rem}
  .language-icon{font-size:.85rem}
  .language-arrow{font-size:.8rem}
  .wordmark.full-name{font-size:.78rem}
  .about-section:before{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero:before,.hero-stamp{animation:none!important}
  .hero-tags span,.project-card,.contact-links a,.language-toggle{transition:none!important}
}


/* Copyright pop-up and compact (c)MM footer link */
.copyright-trigger{
  border:1px solid #694638;background:transparent;color:#D5B6A4;
  padding:8px 10px;font: .68rem var(--mono);letter-spacing:.025em;
  cursor:pointer;transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.copyright-trigger:hover,.copyright-trigger:focus-visible{
  color:#F0E9DF;border-color:#D47A42;background:#D47A4212;
}
.copyright-dialog{
  width:min(590px,calc(100% - 32px));max-width:590px;
  padding:0;border:1px solid #9A5D43;border-radius:5px;
  background:linear-gradient(145deg,#21151B,#0C0B10 78%);
  color:#F0E9DF;box-shadow:0 25px 100px #000C,0 0 45px #D47A4218;
}
.copyright-dialog::backdrop{background:#050407CC;backdrop-filter:blur(5px)}
.copyright-dialog-inner{position:relative;padding:clamp(24px,5vw,38px)}
.copyright-dialog h2{font-size:clamp(1.6rem,4vw,2.4rem);margin:8px 0 22px}
.copyright-dialog p:not(.eyebrow){color:#D0C5BC;font-size:.92rem;line-height:1.8}
.copyright-close{
  position:absolute;top:14px;right:14px;width:38px;height:38px;
  border:1px solid #694638;background:#130E13;color:#F0E9DF;
  font-size:1.5rem;cursor:pointer;
}
.copyright-close:hover{border-color:#D47A42;color:#EBA16D}
@media(max-width:540px){
  .copyright-trigger{font-size:.58rem;padding:7px 8px}
}


/* === REBUILT ART DIRECTION: underground editorial / cut-and-paste portfolio === */
:root{
  --ink:#0b090b;--paper:#f1e8dc;--burgundy:#35101b;--copper:#d47a42;
  --muted:#b9aaa0;--line:#4a3034;--surface:#151116;--surface-raised:#21171d;
}
html{scroll-padding-top:95px}
body{
  background:
    radial-gradient(ellipse at 72% 5%,#4b1c2538,transparent 32rem),
    radial-gradient(ellipse at 5% 60%,#31402a25,transparent 30rem),
    repeating-linear-gradient(133deg,#fff0 0 19px,#f5e7d306 20px,#fff0 21px 35px),
    #0b090b;
}
body:after{opacity:.055}
.notice{justify-content:flex-start;padding:9px 6vw;background:#d47a42;color:#1b0e0d;border:0;font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:.66rem}
.notice-dot{background:#251016;box-shadow:0 0 0 4px #25101620}
.site-header{padding-inline:6vw;background:#0b090beF;border-bottom:1px solid #654039}
.site-header nav{display:flex;gap:clamp(14px,3vw,42px)}
.site-header nav a{text-decoration:none;font-family:var(--mono);font-size:.73rem;text-transform:uppercase;letter-spacing:.06em;color:#c8b9ae}
.site-header nav a:hover{color:var(--copper)}
.wordmark{letter-spacing:-.075em}
.language-toggle{border-radius:0;transform:rotate(-2deg);min-width:120px}
.hero{
  min-height:calc(88vh - 70px);padding-top:clamp(60px,10vh,130px);padding-bottom:100px;
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(260px,.78fr);
  align-items:center;gap:clamp(30px,7vw,110px);position:relative;overflow:hidden;
}
.hero-copy{position:relative;z-index:2;max-width:780px}
.hero .eyebrow{font-size:.75rem;letter-spacing:.17em;text-transform:uppercase}
.hero h1{
  max-width:850px;font-size:clamp(3.4rem,8.2vw,8.2rem);line-height:.91;
  letter-spacing:-.095em;margin:28px 0 30px;text-wrap:balance;
}
.hero h1 em{display:inline-block;font-style:normal;color:var(--copper);transform:rotate(-2deg);text-shadow:4px 5px 0 #54212b;position:relative}
.hero h1 em:after{content:"";position:absolute;left:3%;right:-4%;bottom:-.06em;height:5px;background:var(--copper);transform:rotate(-1deg)}
.hero-intro{max-width:560px;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.85}
.text-link{display:inline-flex;align-items:center;gap:28px;padding:14px 0;border-top:1px solid var(--copper);border-bottom:1px solid var(--copper);font-family:var(--mono);text-transform:uppercase;font-size:.75rem;letter-spacing:.1em;text-decoration:none;margin-top:18px}
.hero-tags{margin-top:32px;display:flex;flex-wrap:wrap;gap:8px}
.hero-tags span{border-radius:0;transform:rotate(-1deg);font-family:var(--mono);font-size:.64rem;letter-spacing:.08em}
.portrait-wrap{width:min(100%,450px);justify-self:center;position:relative;transform:rotate(2deg);margin:20px 10px 30px}
.portrait-wrap:before{content:"";position:absolute;inset:-20px 14px 18px -15px;border:1px solid #d47a4288;transform:rotate(-7deg);z-index:-1}
.portrait-frame{border:1px solid #d47a42;padding:12px;background:#191116;box-shadow:17px 18px 0 #32151f,0 0 70px #d47a4214}
.portrait{aspect-ratio:4/5;object-fit:cover;filter:grayscale(.25) sepia(.15) contrast(1.08)}
.portrait-caption{display:block;text-align:right;font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;margin-top:20px;color:#d9b69e}
.hero-stamp{right:-32px;bottom:14%;width:100px;height:100px;border-radius:50%;font-size:.75rem;transform:rotate(11deg);animation:stamp-wobble 8s ease-in-out infinite}
.hero-index{position:absolute;right:6vw;bottom:30px;color:#a98e7e;font: .66rem var(--mono);letter-spacing:.2em}
.about-section{
  max-width:none;margin:0;padding:clamp(70px,10vw,140px) 10vw;
  display:grid;grid-template-columns:minmax(70px,.3fr) minmax(0,1fr);gap:clamp(25px,7vw,110px);
  border-top:1px solid #57343b;border-bottom:1px solid #57343b;
  background:linear-gradient(105deg,#161015 0%,#100d11 60%,#1c1116 100%);
}
.about-section>div:last-child{max-width:880px}
.about-section h2{font-size:clamp(2.4rem,5.2vw,5.5rem);line-height:1;letter-spacing:-.075em;margin:20px 0 32px}
.about-section h2 em{font-style:normal;color:#d47a42}
.about-mark{font-size:clamp(4rem,10vw,9rem);line-height:.8;transform:rotate(-13deg);align-self:start}
.study-topics{gap:0!important;border-top:1px solid #50353b;margin-top:36px}
.study-topics li{padding:16px 18px 16px 0;border-bottom:1px solid #50353b;list-style:none;font-family:var(--mono);font-size:.78rem}
.study-topics li:before{content:"↳";color:var(--copper);margin-right:14px}
.about-tags span{border-radius:0}
.work-section{
  max-width:none;margin:0;padding:clamp(70px,10vw,140px) 6vw;
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#110c11 0%,#191017 52%,#0e0c10 100%);
}
.work-section:before{inset:24px 3vw;border:1px solid #56363d;pointer-events:none}
.work-section .section-heading{position:relative;z-index:1;max-width:950px;margin:0 0 clamp(42px,7vw,95px) 8vw}
.section-heading h2{font-size:clamp(3rem,8vw,8rem);line-height:.92;letter-spacing:-.09em;margin:22px 0 28px}
.section-heading h2 em{font-style:normal;color:var(--copper);text-shadow:4px 4px 0 #49202a}
.section-lead{max-width:590px;font-size:1.02rem;color:#c8b8ad;line-height:1.9}
.project-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(18px,3vw,42px);align-items:start;position:relative;z-index:1}
.project-card{border-radius:0;overflow:hidden;min-width:0}
.project-card:nth-child(1){grid-column:1 / span 7;transform:translateY(10px)}
.project-card:nth-child(2){grid-column:8 / span 5;transform:translateY(80px) rotate(1deg)}
.project-card:nth-child(3){grid-column:2 / span 6;transform:translateY(70px) rotate(-1deg)}
.project-card:hover{transform:translateY(-5px) rotate(0);z-index:2}
.android-carousel{border:0;border-bottom:1px solid #5a3939;box-shadow:none}
.android-carousel-stage{min-height:330px}
.android-carousel-stage img{max-height:520px}
.android-project-copy,.project-card:not(.project-featured){padding:clamp(20px,3vw,34px)}
.project-featured .android-project-copy{padding:clamp(22px,3vw,36px)}
.project-image.branding-gallery{padding:24px}
.branding-gallery img{max-height:130px}
.branding-gallery figure{min-height:140px}
.project-meta{font-family:var(--mono);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;display:flex;flex-wrap:wrap;gap:12px}
.project-card h3{font-size:clamp(1.4rem,2.4vw,2.25rem);letter-spacing:-.055em;line-height:1.12}
.skill-list span{border-radius:0;font-family:var(--mono);font-size:.64rem}
.coming-art{min-height:220px;border:0;border-bottom:1px solid #5a3939}
.contact-section{
  max-width:none;margin:0;padding:clamp(75px,11vw,150px) 10vw;
  background:radial-gradient(ellipse at 85% 20%,#48202a 0%,transparent 30rem),#0b090b;
}
.contact-section h2{font-size:clamp(3rem,8vw,7.8rem);line-height:.9;letter-spacing:-.09em}
.contact-links{display:flex;gap:12px;flex-wrap:wrap}
.contact-links a{border-radius:0;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em}
.site-footer{
  max-width:none;margin:0;padding:28px 6vw 36px;display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:20px;background:#080708;border-top:1px solid #56343b;
}
.site-footer .wordmark{font-size:.95rem}
.site-footer>span{font-size:.72rem;line-height:1.7}
.site-footer .footer-note{font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;font-size:.61rem}
.copyright-trigger{display:none!important}
.image-lightbox{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:14px;padding:clamp(18px,4vw,42px);
  background:#070609F2;backdrop-filter:blur(12px);cursor:zoom-out;overflow:auto;
}
.image-lightbox[hidden]{display:none}
.image-lightbox img{
  max-width:min(88vw,1000px);max-height:70vh;object-fit:contain;
  border:1px solid #d47a42;padding:8px;background:#171116;box-shadow:0 0 70px #d47a4220;
  cursor:zoom-out
}
.lightbox-help{font: .68rem var(--mono);letter-spacing:.06em;text-align:center;color:#d9a47f}
.lightbox-rights{
  max-width:650px;width:min(90vw,650px);padding:18px 22px;
  border-left:3px solid var(--copper);background:#171116;color:#d8c9bd;
  font-size:.82rem;line-height:1.8;cursor:default;
}
.lightbox-rights strong{display:block;color:var(--copper);font: .72rem var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px}
@keyframes stamp-wobble{0%,100%{rotate:8deg}50%{rotate:15deg}}
@media(max-width:800px){
  .hero{min-height:auto;grid-template-columns:1fr;padding-top:65px;gap:35px}
  .hero-copy{max-width:700px}
  .portrait-wrap{width:min(76%,390px);justify-self:center}
  .hero-stamp{right:-20px}
  .about-section{grid-template-columns:45px minmax(0,1fr);padding-inline:6vw;gap:22px}
  .project-card:nth-child(1){grid-column:1 / span 12;transform:none}
  .project-card:nth-child(2){grid-column:2 / span 10;transform:none}
  .project-card:nth-child(3){grid-column:1 / span 11;transform:none}
  .site-footer{grid-template-columns:1fr;gap:8px}
  .site-footer .footer-note{font-size:.62rem}
}
@media(max-width:540px){
  .notice{font-size:.58rem;letter-spacing:.06em}
  .site-header{padding-inline:4vw;flex-wrap:wrap;justify-content:space-between}
  .site-header nav{order:3;width:100%;justify-content:space-between;padding:0 0 12px}
  .site-header nav a{font-size:.62rem}
  .hero h1{font-size:clamp(3.1rem,15vw,5rem)}
  .hero-tags{gap:6px}
  .about-section{grid-template-columns:1fr;padding:60px 6vw}
  .about-mark{font-size:3rem}
  .work-section{padding-inline:5vw}
  .work-section:before{inset:12px 2vw}
  .work-section .section-heading{margin-left:2vw}
  .section-heading h2{font-size:clamp(2.8rem,14vw,4.5rem)}
  .project-card:nth-child(2),.project-card:nth-child(3){grid-column:1 / span 12}
  .android-carousel-stage{min-height:250px}
  .contact-section{padding-inline:6vw}
  .image-lightbox{justify-content:flex-start}
  .image-lightbox img{max-width:94vw;max-height:53vh}
}
@media(prefers-reduced-motion:reduce){.hero-stamp{animation:none!important}}


/* === PERFECTH / VINYL SLEEVE VISUAL LANGUAGE ===
   Inspired by warm red light, smoky olive, tarnished gold and the texture of record sleeves. */
:root{--ink:#09090b;--paper:#f1e8d8;--burgundy:#271316;--copper:#c96b3b;--muted:#b9aa9b;--line:#514038;--surface:#121113;--surface-raised:#211a18;--record-gold:#d5b66f;--smoke-olive:#464638;--faded-blue:#667d89;--dusty-coral:#bd7165}
body{background:radial-gradient(ellipse at 76% 2%,#8d2e1f24,transparent 34rem),radial-gradient(ellipse at 4% 36%,#68704b20,transparent 31rem),radial-gradient(ellipse at 88% 72%,#536b7920,transparent 38rem),repeating-linear-gradient(132deg,#fff0 0 16px,#f6e7d008 17px,#fff0 19px 31px),#09090b}
body:after{opacity:.075;background:repeating-linear-gradient(0deg,transparent 0 3px,#e9d7c211 4px)}
.notice{background:linear-gradient(100deg,#d16c3a,#e0a65f 48%,#9e4034);color:#170d0b}
.notice-dot{background:#281316;box-shadow:0 0 0 4px #28131622}
.site-header{border-bottom-color:#62423a}
.hero:before{border-color:#d5b66f40;box-shadow:0 0 95px #c96b3b17,inset 0 0 50px #c96b3b0a}
.hero:after{border-color:#7a846080}
.hero h1 em{color:#e18a4c;text-shadow:4px 5px 0 #55221f}
.hero h1 em:after{background:linear-gradient(90deg,#c96b3b,#d5b66f,#7a8460)}
.eyebrow{color:#d7ad77}.eyebrow-line{background:#c96b3b;box-shadow:0 0 12px #c96b3b77}
.portrait-frame{border-color:#a65a3c;background:#151111;box-shadow:15px 16px 0 #2a1518,0 0 48px #c96b3b1a}
.shape-one{border-color:#d5b66f66;background:#29201d}.shape-two{background:#c96b3b}
.hero-stamp{background:#d5b66f;color:#251315;border-color:#f2dba4}.hero-stamp span{color:#9c382c}
.hero-tags span,.skill-list span,.about-tags span{border-color:#514039;background:linear-gradient(135deg,#28181a,#141214)}
.text-link{border-color:#d5b66f}.text-link:hover,.contact-links a:hover{color:#e8bd7a}
.about-section{background:linear-gradient(112deg,#171315,#111012 58%,#191a14);border-color:#54403a}
.about-mark{color:#c96b3b;text-shadow:0 0 28px #c96b3b22}
.study-topics,.study-topics li{border-color:#4b3935}.study-topics li:before{color:#d5b66f}
.work-section{background:linear-gradient(145deg,#100d0f,#1b1214 50%,#101110)}
.work-section:before{border-color:#d5b66f42}
.project-card{border-color:#493638;background:linear-gradient(145deg,#211719,#121113 78%)}
.project-card:hover{border-color:#b76a48;box-shadow:0 18px 38px #0009,0 0 0 1px #d5b66f20}
.project-meta{color:#d4a77e}.image-label{background:#d5b66f;color:#201112}
.coming-art span:first-child{color:#c96b3b}
.contact-section{background:radial-gradient(ellipse at 88% 8%,#492026 0%,transparent 29rem),radial-gradient(ellipse at 12% 100%,#3e453023,transparent 28rem),#09090b;border-color:#4c3433}
.contact-section h2 em{color:#d5b66f}.contact-links a{border-color:#725043}
.site-footer{border-color:#43312d}
.language-toggle{border-color:#9b5d43;background:linear-gradient(135deg,#2c171a,#111012)}
.language-icon,.language-arrow{color:#d5b66f}.skip-link{background:#d5b66f;color:#201112}

/* A visual pause between profile and case studies, inspired by record sleeves. */
.visual-interlude{position:relative;isolation:isolate;overflow:hidden;max-width:none;margin:0;padding:clamp(65px,9vw,130px) 7vw clamp(50px,7vw,90px);background:radial-gradient(ellipse at 82% 12%,#9c3d2d35,transparent 28rem),radial-gradient(ellipse at 12% 85%,#5960442b,transparent 26rem),linear-gradient(118deg,#181215,#0c0c0e 57%,#171511);border-top:1px solid #5a3933;border-bottom:1px solid #5a3933}
.visual-interlude:before{content:"";position:absolute;inset:15px 2.5vw;z-index:-1;pointer-events:none;border:1px solid #d5b66f2b;background:repeating-linear-gradient(135deg,transparent 0 22px,#d5b66f05 23px,#d5b66f05 24px,transparent 25px 45px)}
.interlude-topline{display:flex;justify-content:space-between;gap:16px;margin:0 0 clamp(40px,7vw,90px);font:.66rem var(--mono);letter-spacing:.14em;color:#d4a77e}
.interlude-copy{position:relative;z-index:2;max-width:720px;margin-left:7vw}
.interlude-copy h2{font-size:clamp(3.5rem,8.8vw,8.5rem);line-height:.87;letter-spacing:-.095em;margin:22px 0 28px}
.interlude-copy h2 em{font-style:normal;color:#d5b66f;text-shadow:4px 4px 0 #40201d}
.interlude-copy>p:last-child{max-width:500px;color:#cbbdb1;font-size:1.02rem;line-height:1.85}
.interlude-art{position:absolute;right:8vw;top:18%;width:clamp(170px,25vw,350px);aspect-ratio:1;z-index:1;transform:rotate(12deg);pointer-events:none}
.vinyl-record{position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle at center,#111 0 2px,#1b1a19 3px 4px,#0a0a0b 5px 7px,#23201c 8px 9px);border:1px solid #82735d;box-shadow:0 18px 45px #0009,0 0 0 9px #1b1715,0 0 0 10px #a78c5d55;animation:record-turn 26s linear infinite}
.vinyl-record:before{content:"";position:absolute;inset:9%;border-radius:50%;border:1px solid #d5b66f30}
.vinyl-label{position:absolute;inset:36%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#dca46a,#a84331 55%,#41181b);border:4px solid #181113}
.vinyl-hole{position:absolute;inset:48.5%;border-radius:50%;background:#08080a;border:1px solid #d9c9aa}
.art-sticker{position:absolute;right:-4%;top:8%;display:grid;place-content:center;text-align:center;width:clamp(48px,6vw,76px);aspect-ratio:1;background:#d5b66f;color:#261417;border:2px solid #241416;border-radius:50%;font:.7rem var(--mono);font-weight:700;transform:rotate(17deg);box-shadow:0 5px 15px #0008}
.art-note{position:absolute;left:-11%;bottom:4%;font:700 clamp(.7rem,1vw,1rem)/1.15 var(--mono);letter-spacing:.08em;color:#f1e8d8;text-shadow:2px 2px #8e2f28;transform:rotate(-9deg)}
.interlude-photo-grid{display:grid;grid-template-columns:1.3fr .72fr .9fr;gap:clamp(12px,2vw,26px);align-items:start;position:relative;z-index:2;margin:clamp(65px,10vw,140px) 0 0}
.interlude-photo{margin:0;min-width:0;position:relative;background:#151114;border:1px solid #6a4a3c;padding:8px;box-shadow:0 15px 35px #0008;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.interlude-photo:nth-child(1){transform:rotate(-1.5deg);margin-top:25px}.interlude-photo:nth-child(2){transform:rotate(2deg);margin-top:0}.interlude-photo:nth-child(3){transform:rotate(-1deg);margin-top:48px}
.interlude-photo:hover{transform:translateY(-7px) rotate(0);border-color:#d5b66f;box-shadow:0 20px 45px #000b}
.interlude-photo img{display:block;width:100%;height:clamp(150px,22vw,310px);object-fit:cover;filter:saturate(.72) contrast(1.08);transition:filter .4s ease}
.interlude-photo:nth-child(2) img{height:clamp(190px,27vw,370px)}.interlude-photo:hover img{filter:saturate(1) contrast(1.05)}
.interlude-photo:after{content:"";position:absolute;inset:8px 8px 38px;pointer-events:none;background:linear-gradient(180deg,#12090a05 35%,#160d0ca8 100%);mix-blend-mode:multiply}
.interlude-photo figcaption{display:flex;justify-content:space-between;gap:8px;padding:11px 3px 4px;font:.56rem var(--mono);letter-spacing:.07em;color:#d6b78b}
.interlude-photo figcaption span:last-child{color:#a99b8e;font-size:.5rem}
.interlude-credit{margin:28px 0 0;text-align:right;font:.65rem var(--mono);color:#a99c90}
@keyframes record-turn{to{transform:rotate(360deg)}}
@media(max-width:800px){.interlude-copy{margin-left:0;max-width:85%}.interlude-art{right:5vw;top:26%;width:clamp(150px,30vw,240px);opacity:.7}.interlude-photo-grid{grid-template-columns:1fr 1fr}.interlude-photo:nth-child(1){grid-column:1 / -1;margin:0 8% 12px 0}.interlude-photo:nth-child(1) img{height:260px}.interlude-photo:nth-child(2),.interlude-photo:nth-child(3){margin-top:0}.interlude-photo:nth-child(2) img,.interlude-photo:nth-child(3) img{height:230px}}
@media(max-width:540px){.visual-interlude{padding:54px 6vw}.interlude-topline{font-size:.55rem;letter-spacing:.08em;margin-bottom:55px}.interlude-copy{max-width:100%}.interlude-copy h2{font-size:clamp(3rem,14vw,4.4rem)}.interlude-copy>p:last-child{max-width:90%;font-size:.92rem}.interlude-art{right:2vw;top:35%;width:125px;opacity:.55}.interlude-photo-grid{grid-template-columns:1fr;gap:20px;margin-top:65px}.interlude-photo:nth-child(1),.interlude-photo:nth-child(2),.interlude-photo:nth-child(3){grid-column:auto;margin:0 4%}.interlude-photo img,.interlude-photo:nth-child(2) img,.interlude-photo:nth-child(3) img{height:220px}.interlude-photo figcaption{font-size:.57rem}.interlude-credit{text-align:left;line-height:1.7}}
@media(prefers-reduced-motion:reduce){.vinyl-record{animation:none}.interlude-photo{transition:none}}


/* === HORROR / tabletop RPG / board-game layer === */
:root{
  --horror-blood:#8f2637;
  --horror-bone:#e6d6bd;
  --horror-verdigris:#71836b;
  --horror-gold:#d5b66f;
}
/* Make authorship marks readable at a glance. These overlays are visual deterrents only. */
.android-carousel-stage::after,
.branding-gallery figure::after{
  content:"(c) MM";
  width:auto;
  min-width:76px;
  height:34px;
  padding:0 10px;
  border-radius:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#110c0ef2,#3a171ff2);
  color:#fff3df;
  border:1px solid var(--horror-gold);
  box-shadow:0 0 0 2px #100b0dcc,0 4px 15px #000b,0 0 18px #8f263766;
  font:800 12px/1 var(--mono);
  letter-spacing:.12em;
  text-shadow:0 1px 4px #000;
}
.android-carousel-stage::after{right:14px;bottom:14px}
.branding-gallery figure::after{left:12px;bottom:12px}
.project-card{
  position:relative;
  isolation:isolate;
}
.project-card:before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:7px;
  pointer-events:none;
  opacity:.34;
  border:1px solid #d5b66f28;
  background:
    radial-gradient(circle at 9px 9px,#d5b66f90 0 1.5px,transparent 2px),
    radial-gradient(circle at calc(100% - 9px) 9px,#d5b66f90 0 1.5px,transparent 2px),
    radial-gradient(circle at 9px calc(100% - 9px),#d5b66f90 0 1.5px,transparent 2px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px),#d5b66f90 0 1.5px,transparent 2px);
  transition:opacity .3s ease,border-color .3s ease;
}
.project-card:hover:before{opacity:.8;border-color:#d5b66f60}
.work-section{
  background-image:
    radial-gradient(ellipse at 10% 8%,#8f263713,transparent 25rem),
    repeating-linear-gradient(0deg,transparent 0 39px,#d5b66f04 40px,#d5b66f04 41px);
}
.work-section .eyebrow:before,
.contact-section .eyebrow:before{
  content:"✦";
  display:inline-block;
  margin-right:10px;
  color:var(--horror-gold);
  animation:occult-flicker 5.5s ease-in-out infinite;
}
.project-meta span{
  border:1px solid #8f263766;
  padding:4px 7px;
  background:linear-gradient(135deg,#30151b88,#12111388);
}
.hero-stamp{
  box-shadow:0 0 0 5px #8f26371c,0 0 28px #8f263744;
}
.visual-interlude:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.22;
  background:
    radial-gradient(ellipse at 50% 45%,transparent 20%,#000 100%),
    repeating-linear-gradient(90deg,transparent 0 3px,#fff 4px,transparent 5px 8px);
  mix-blend-mode:soft-light;
  animation:film-grain-drift 12s steps(6,end) infinite;
}
@keyframes occult-flicker{
  0%,100%{opacity:.7;transform:rotate(0) scale(1)}
  42%{opacity:1;transform:rotate(12deg) scale(1.12)}
  45%{opacity:.35;transform:rotate(-10deg) scale(.92)}
  48%{opacity:.95;transform:rotate(4deg) scale(1.05)}
}
@keyframes film-grain-drift{
  0%,100%{transform:translate(0,0);opacity:.16}
  25%{transform:translate(1%, -1%);opacity:.25}
  50%{transform:translate(-1%, 1%);opacity:.19}
  75%{transform:translate(.5%, .5%);opacity:.28}
}
@media(max-width:540px){
  .android-carousel-stage::after,.branding-gallery figure::after{
    min-width:68px;height:30px;font-size:11px;padding:0 8px;
  }
}
@media(prefers-reduced-motion:reduce){
  .work-section .eyebrow:before,.contact-section .eyebrow:before,.visual-interlude:after{animation:none}
  .project-card:before{transition:none}
}


/* Scroll reveals and tabletop-inspired framing. Motion is progressive enhancement. */
.reveal-on-scroll{
  opacity:0;
  transform:translate3d(0,26px,0) rotate(var(--reveal-tilt,0deg));
  filter:blur(3px);
  transition:
    opacity .75s cubic-bezier(.2,.75,.25,1) var(--reveal-delay,0ms),
    transform .85s cubic-bezier(.2,.75,.25,1) var(--reveal-delay,0ms),
    filter .75s ease var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
.reveal-on-scroll.is-revealed{
  opacity:1;
  transform:translate3d(0,0,0) rotate(var(--reveal-tilt,0deg));
  filter:blur(0);
}
.interlude-photo{
  --reveal-tilt:-1deg;
}
.interlude-photo:nth-child(2){--reveal-tilt:1.5deg}
.interlude-photo:nth-child(3){--reveal-tilt:-.8deg}
.interlude-photo:before{
  content:"✦  ✦  ✦";
  position:absolute;
  top:12px;
  right:12px;
  z-index:3;
  pointer-events:none;
  padding:5px 7px;
  border:1px solid #d5b66f9c;
  background:#100d0ee8;
  color:#e4c987;
  font:9px/1 var(--mono);
  letter-spacing:.16em;
  box-shadow:0 2px 10px #0008;
}
.interlude-photo figcaption{
  position:relative;
  background:
    linear-gradient(90deg,#8f26371b,transparent 60%),
    repeating-linear-gradient(135deg,transparent 0 7px,#d5b66f08 8px,#d5b66f08 9px);
}
.interlude-photo-grid{
  perspective:1100px;
}
.interlude-photo:hover{
  transform:translateY(-9px) rotate(0) scale(1.015);
}
.project-card{
  background-image:
    linear-gradient(135deg,#d5b66f05,transparent 34%),
    repeating-linear-gradient(45deg,transparent 0 18px,#d5b66f03 19px,#d5b66f03 20px);
}
@media(prefers-reduced-motion:reduce){
  .reveal-on-scroll,.reveal-on-scroll.is-revealed{
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
    will-change:auto;
  }
}


/* === Media craft: an original CSS film camera and moving film === */
.android-carousel-stage::after,
.branding-gallery figure::after{
  content:"(c) MM";
  display:block;
  width:auto;
  min-width:0;
  height:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#fff0d8;
  font:700 10px/1.2 var(--mono);
  letter-spacing:.07em;
  text-shadow:
    0 1px 2px #000,
    1px 0 3px #000,
    -1px 0 3px #000,
    0 0 8px #000,
    0 0 10px #8f2637;
}
.android-carousel-stage::after{right:12px;bottom:10px}
.branding-gallery figure::after{left:10px;bottom:9px}
@media(max-width:540px){
  .android-carousel-stage::after,.branding-gallery figure::after{
    min-width:0;height:auto;font-size:9px;padding:0;
  }
}

/* Replaces stock-looking decoration with CSS-drawn media equipment. */
.media-reel-art{
  position:absolute;
  right:6vw;
  top:15%;
  width:clamp(210px,31vw,410px);
  aspect-ratio:1.05;
  z-index:1;
  pointer-events:none;
  transform:rotate(5deg);
  filter:drop-shadow(0 18px 22px #0008);
}
.film-strip{
  position:absolute;
  display:flex;
  gap:8px;
  align-items:center;
  width:145%;
  height:30%;
  padding:10px 13px;
  overflow:hidden;
  border:2px solid #d5b66f9c;
  background:
    repeating-linear-gradient(90deg,transparent 0 20px,#d5b66f 20px 30px,transparent 30px 40px),
    linear-gradient(135deg,#180d11,#3b1821 48%,#171115);
  box-shadow:0 6px 15px #0008,inset 0 0 0 2px #100b0e;
}
.film-strip:before,.film-strip:after{
  content:"";
  position:absolute;
  left:0;right:0;
  height:5px;
  background:repeating-linear-gradient(90deg,#e9d5a6 0 9px,transparent 9px 22px);
  opacity:.9;
}
.film-strip:before{top:2px}
.film-strip:after{bottom:2px}
.film-strip-back{
  left:-20%;
  top:13%;
  transform:rotate(-18deg);
  animation:film-drift-back 13s ease-in-out infinite alternate;
}
.film-strip-front{
  left:-8%;
  bottom:7%;
  transform:rotate(13deg);
  z-index:3;
  animation:film-drift-front 10s ease-in-out infinite alternate;
}
.film-frame{
  flex:0 0 22%;
  height:calc(100% - 12px);
  border:1px solid #d5b66f6b;
  background:
    radial-gradient(ellipse at 30% 20%,#d5b66f88,transparent 23%),
    linear-gradient(145deg,#a34d3b,#40202a 48%,#18251f);
  box-shadow:inset 0 0 12px #08070a88;
}
.film-frame:nth-child(2){background:linear-gradient(135deg,#1e3b35,#b65d43 52%,#171116)}
.film-frame:nth-child(3){background:linear-gradient(145deg,#d5b66f,#72343c 48%,#19231d)}
.film-frame:nth-child(4){background:linear-gradient(135deg,#263a34,#171116 60%,#a84e37)}
.film-camera{
  position:absolute;
  z-index:2;
  left:24%;
  top:25%;
  width:54%;
  height:48%;
  transform:rotate(-7deg);
  animation:camera-float 5.8s ease-in-out infinite;
}
.camera-body{
  position:absolute;
  left:2%;right:2%;bottom:0;
  height:69%;
  border:2px solid #e1c88b;
  border-radius:10px 10px 15px 15px;
  background:
    linear-gradient(160deg,#49302b 0%,#21171a 42%,#0b0b0e 100%);
  box-shadow:inset 0 4px 0 #ffffff10,0 9px 15px #0008;
}
.camera-top{
  position:absolute;
  left:20%;top:7%;
  width:39%;height:24%;
  border:2px solid #d5b66f;
  border-bottom:0;
  border-radius:7px 7px 0 0;
  background:linear-gradient(130deg,#5b4034,#171115);
}
.camera-reel{
  position:absolute;
  top:0;
  width:27%;aspect-ratio:1;
  border-radius:50%;
  border:3px solid #d5b66f;
  background:repeating-conic-gradient(from 0deg,#23151a 0deg 28deg,#9b4b3b 29deg 42deg,#23151a 43deg 60deg);
  box-shadow:0 0 0 4px #181116,0 3px 8px #0009;
  animation:reel-turn 16s linear infinite;
}
.camera-reel-left{left:10%}
.camera-reel-right{right:10%;animation-direction:reverse;animation-duration:19s}
.camera-lens{
  position:absolute;
  left:13%;top:10%;
  width:54%;aspect-ratio:1;
  border-radius:50%;
  border:5px solid #d5b66f;
  background:
    radial-gradient(circle at 34% 30%,#d9c6a4 0 3%,transparent 4%),
    radial-gradient(circle at 40% 35%,#628b81 0 8%,#162729 24%,#09090d 48%,#54332e 52%,#0b0b0e 69%);
  box-shadow:0 0 0 4px #0b0b0e,0 0 18px #71948a33;
}
.camera-flash{
  position:absolute;right:12%;top:18%;
  width:15%;height:13%;border:1px solid #d5b66f;
  background:#d5b66f;border-radius:2px;
}
.camera-grip{
  position:absolute;right:-2%;bottom:8%;
  width:8%;height:43%;
  border:1px solid #d5b66f;
  border-radius:0 5px 5px 0;
  background:repeating-linear-gradient(0deg,#23171b 0 3px,#75513a 4px 5px);
}
.media-art-label{
  position:absolute;
  z-index:4;
  right:0;top:43%;
  color:#f2dfbb;
  font:700 clamp(.55rem,.9vw,.78rem)/1.2 var(--mono);
  letter-spacing:.12em;
  text-align:center;
  transform:rotate(8deg);
  text-shadow:0 2px 8px #000,0 0 12px #8f2637;
}
@keyframes film-drift-back{
  from{translate:-1% -3%;rotate:-2deg}
  to{translate:5% 5%;rotate:2deg}
}
@keyframes film-drift-front{
  from{translate:3% 2%;rotate:1deg}
  to{translate:-4% -3%;rotate:-2deg}
}
@keyframes camera-float{
  0%,100%{translate:0 0;rotate:-1deg}
  50%{translate:0 -9px;rotate:1deg}
}
@keyframes reel-turn{to{transform:rotate(360deg)}}
@media(max-width:800px){
  .media-reel-art{right:2vw;top:23%;width:clamp(170px,34vw,270px);opacity:.86}
}
@media(max-width:540px){
  .media-reel-art{right:1vw;top:31%;width:145px;opacity:.72}
  .media-art-label{font-size:7px}
}
@media(prefers-reduced-motion:reduce){
  .film-strip-back,.film-strip-front,.film-camera,.camera-reel{animation:none}
}


/* Skills overview: concrete, scannable evidence of technical and media skills. */
.about-section{grid-template-columns:minmax(0,1fr)!important}
.about-section>div:last-child{max-width:1040px;width:100%}
.skills-overview{
  margin-top:48px;
  padding-top:30px;
  border-top:1px solid #6c5142;
}
.skills-heading{max-width:760px;margin-bottom:24px}
.skills-heading h3{
  margin:12px 0;
  font-size:clamp(1.7rem,3.4vw,2.7rem);
  line-height:1.05;
  letter-spacing:-.055em;
}
.skills-heading>p:last-child{
  max-width:650px;
  color:#c9bdb2;
  line-height:1.7;
}
.skills-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.skills-card{
  min-width:0;
  padding:clamp(18px,2.5vw,28px);
  border:1px solid #554039;
  background:
    linear-gradient(135deg,#26191b 0%,#171416 65%,#1b1c16 100%);
  box-shadow:inset 3px 0 0 #8f3a32;
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.skills-card:hover{
  transform:translateY(-3px);
  border-color:#b37d51;
  background:linear-gradient(135deg,#30201f,#181416 68%,#222117);
}
.skills-number{
  color:#d5b66f;
  font: .64rem/1.4 var(--mono);
  letter-spacing:.1em;
}
.skills-card h4{
  margin:16px 0 12px;
  color:#f1e4d3;
  font-size:1.08rem;
  letter-spacing:-.025em;
}
.skills-list{
  margin:0 0 12px!important;
  color:#e4b18b!important;
  font: .77rem/1.9 var(--mono)!important;
  overflow-wrap:anywhere;
}
.skills-detail{
  margin:0!important;
  color:#c9bdb2!important;
  font-size:.91rem;
  line-height:1.7!important;
}
@media(max-width:640px){
  .skills-grid{grid-template-columns:minmax(0,1fr)}
  .skills-card{padding:20px}
  .skills-overview{margin-top:35px;padding-top:24px}
}
@media(prefers-reduced-motion:reduce){
  .skills-card,.skills-card:hover{transition:none;transform:none}
}


/* 2027 portfolio layout: concise homepage, detailed work samples and readable project cards. */
.home-work-cta-section{padding-top:clamp(60px,8vw,112px);padding-bottom:clamp(68px,9vw,120px);max-width:1100px}
.home-work-cta-section h2{font-size:clamp(2.7rem,6vw,5.8rem);line-height:.98;letter-spacing:-.065em;margin:22px 0}
.home-work-cta-section h2 em{font-style:normal;color:#D47A42}
.home-work-cta-section>p:not(.eyebrow){max-width:760px;color:#D0C5BC;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.85}
.home-work-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:30px;padding:20px 0;border-top:1px solid #62423a;border-bottom:1px solid #62423a;color:#F1E4D3;text-decoration:none;font-size:1rem}
.home-work-cta span:last-child{font-size:1.4rem;color:#D5B66F}
.work-page-intro{padding-top:clamp(64px,9vw,120px);padding-bottom:clamp(40px,6vw,72px);max-width:1120px}
.work-page-intro h1{max-width:900px;margin:24px 0;font-size:clamp(3.5rem,9vw,7.5rem);line-height:.92;letter-spacing:-.075em}
.work-page-intro h1 em{font-style:normal;color:#D47A42}
.work-page-intro>p:not(.eyebrow){max-width:760px;color:#D0C5BC;line-height:1.85;font-size:clamp(1rem,1.4vw,1.15rem)}
.work-page-intro+.work-section{padding-top:20px}
#projects .project-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:stretch}
#projects .project-card,#projects .project-card:nth-child(n){grid-column:1 / -1;transform:none;min-width:0;display:flex;flex-direction:column;padding:0;overflow:hidden}
#projects .project-card:hover{transform:translateY(-2px)}
#projects .project-card .project-image,#projects .project-card .branding-gallery,#projects .project-card .coming-art{order:0;width:100%}
#projects .project-card .project-meta,#projects .project-card h3,#projects .project-card>p,#projects .project-card .skill-list,#projects .project-card>.text-link{margin-left:clamp(20px,3vw,38px);margin-right:clamp(20px,3vw,38px)}
#projects .project-card .project-meta{margin-top:clamp(20px,3vw,34px)}
#projects .project-card h3{font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.15}
#projects .project-card>p{font-size:clamp(1rem,1.35vw,1.12rem);line-height:1.85;max-width:920px}
#projects .project-card .skill-list{margin-bottom:clamp(22px,3vw,36px)}
#projects .project-featured{display:flex;flex-direction:column;gap:0}
#projects .android-carousel{order:0;width:100%;border:0;border-bottom:1px solid #5a3939}
#projects .android-carousel-stage{height:clamp(360px,52vw,620px);min-height:clamp(360px,52vw,620px);padding:24px clamp(56px,8vw,100px)}
#projects .android-carousel-stage img{max-height:100%;width:100%;object-fit:contain}
#projects .android-project-copy{order:1;padding:clamp(24px,4vw,44px);width:100%}
#projects .android-project-copy h3{font-size:clamp(1.7rem,3vw,2.5rem)}
#projects .branding-gallery{min-height:clamp(260px,38vw,450px);padding:clamp(20px,4vw,48px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,32px);align-items:center}
#projects .branding-gallery figure{margin:0;min-width:0}
#projects .branding-gallery img{width:100%;height:clamp(200px,30vw,360px);object-fit:contain}
#projects .project-coming .coming-art{min-height:clamp(240px,34vw,400px);display:flex;align-items:center;justify-content:center;gap:clamp(16px,5vw,64px)}
#projects .project-coming .coming-art span:first-child{font-size:clamp(5rem,18vw,14rem)}
#projects .project-coming .coming-art span:last-child{font-size:clamp(1.5rem,4vw,3.5rem)}
#projects .project-oop{display:flex;flex-direction:column;grid-column:1/-1;padding:0;background:linear-gradient(145deg,#25171D,#111015 78%);border-color:#614047}
#projects .project-oop .oop-browser{order:-1;margin:0;width:100%;border:0;border-bottom:1px solid #51373F;box-shadow:none}
#projects .project-oop .oop-sample-panel{padding:clamp(20px,4vw,44px)}
#projects .project-oop .oop-sample-panel>p{font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.8}
#projects .project-oop .oop-sample-panel pre{font-size:clamp(.9rem,1.2vw,1.08rem);line-height:1.8;padding:clamp(18px,3vw,32px);overflow-x:auto}
#projects .project-oop .oop-browser-toolbar{padding:clamp(16px,2.5vw,28px);gap:18px}
#projects .project-oop .oop-browser-toolbar label{font-size:clamp(.9rem,1.2vw,1rem)}
#projects .project-oop .oop-browser-toolbar select{font-size:1rem;min-height:50px}
#projects .project-oop .oop-heading{order:0;padding:clamp(24px,4vw,44px) clamp(24px,4vw,44px) 0}
#projects .project-oop>p:not(.interaction-hint){margin-left:clamp(24px,4vw,44px);margin-right:clamp(24px,4vw,44px)}
#projects .project-oop .interaction-hint{margin-left:clamp(24px,4vw,44px);margin-right:clamp(24px,4vw,44px)}
#projects .project-oop .oop-browser-controls{padding:16px clamp(18px,3vw,32px)}
#projects .project-oop .oop-grade{flex-shrink:0}
#projects .project-oop .oop-heading h3{font-size:clamp(1.7rem,3vw,2.6rem)}
#media,#android,#branding,#wimma,#oop{scroll-margin-top:90px}
@media(max-width:640px){
  #projects .android-carousel-stage{height:clamp(300px,90vw,420px);min-height:clamp(300px,90vw,420px);padding:16px 48px}
  #projects .branding-gallery{grid-template-columns:1fr}
  #projects .branding-gallery img{height:clamp(180px,58vw,280px)}
  #projects .project-card .project-meta,#projects .project-card h3,#projects .project-card>p,#projects .project-card .skill-list,#projects .project-card>.text-link{margin-left:18px;margin-right:18px}
  #projects .project-oop .oop-heading{padding:22px 18px 0}
  #projects .project-oop>p:not(.interaction-hint),#projects .project-oop .interaction-hint{margin-left:18px;margin-right:18px}
  #projects .project-oop .oop-sample-panel pre{font-size:.88rem}
  .home-work-cta{align-items:flex-start;font-size:.92rem}
}
@media(prefers-reduced-motion:reduce){#projects .project-card:hover{transform:none}}


/* Skill levels are explicit self-assessments, not claims of expert proficiency. */
.skills-scale{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:0 0 22px;padding:16px 18px;border:1px solid #554039;background:#171416;color:#d8c9bb;font-size:.8rem;line-height:1.6}
.skills-scale-title{width:100%;color:#f1e4d3;font-weight:600}
.skills-scale-item{display:flex;align-items:center;gap:9px}
.skills-scale>p{width:100%;margin:0;color:#bfb0a4;font-size:.78rem}
.skills-grid-detailed{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.skills-grid-detailed .skills-card:last-child{grid-column:1/-1}
.skill-rows{list-style:none;padding:0;margin:0}
.skill-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid #493638;min-width:0}
.skill-name{color:#e7d9cb;font-size:.88rem;line-height:1.45;overflow-wrap:anywhere}
.skill-rating{display:flex;align-items:center;gap:8px;flex-shrink:0}
.skill-bars{display:inline-flex;align-items:center;gap:3px;flex-shrink:0}
.skill-bars i{display:block;width:8px;height:16px;border:1px solid #8e776a;background:transparent}
.skill-bars i.is-filled{background:#d5b66f;border-color:#d5b66f}
.skill-level{min-width:25px;color:#d8b18c;font:.7rem/1.2 var(--mono);text-align:right}
.skills-scale .skill-bars i{height:12px;width:7px}
@media(max-width:760px){.skills-grid-detailed{grid-template-columns:minmax(0,1fr)}.skills-grid-detailed .skills-card:last-child{grid-column:auto}}
@media(max-width:420px){.skill-row{gap:8px}.skill-name{font-size:.82rem}.skill-rating{gap:5px}.skill-bars{gap:2px}.skill-bars i{width:6px;height:13px}.skills-card{padding:16px}}


/* Update ribbon: clear status banner, separated from the main navigation. */
.info-ribbon{position:relative;z-index:20;display:flex;align-items:center;justify-content:center;gap:14px;width:100%;min-height:clamp(66px,8vw,94px);padding:18px clamp(18px,5vw,64px);border:1px solid #D47A42;border-left:0;border-right:0;border-radius:0;background:#24171b;color:#fff4e9;box-shadow:inset 0 -1px 0 #633b34}
.info-ribbon .notice-dot{flex:0 0 10px;width:10px;height:10px;background:#D47A42;box-shadow:0 0 0 4px #D47A4228}
.info-ribbon p{margin:0;max-width:1100px;font-size:clamp(.94rem,1.9vw,1.3rem);font-weight:750;line-height:1.45;letter-spacing:.015em;text-align:center;overflow-wrap:anywhere}
.skills-scale .skill-bars i{width:9px;height:17px}
.skill-bars{gap:3px}
.skill-bars i{width:7px;height:15px}
.skill-level{min-width:28px;font-size:.72rem}
.skills-scale-item .skill-bars i{height:12px;width:7px}
.copyright-line{color:#e5d7c8;font-weight:600;letter-spacing:.025em}
.contact-links{display:flex;flex-wrap:wrap;gap:12px 24px}
.contact-links a{overflow-wrap:anywhere}
@media(max-width:520px){
  .info-ribbon{gap:10px;padding:14px 16px;min-height:74px}
  .info-ribbon p{font-size:.9rem;line-height:1.45;text-align:left}
  .skill-row{align-items:flex-start}
  .skill-rating{padding-top:2px}
}


/* Gothic editorial refresh: dark fantasy atmosphere with readable body copy and restrained burgundy accents. */
:root{
  --ink:#0b080d;--paper:#eee7ec;--burgundy:#28121f;--copper:#b56b7a;
  --muted:#b8a8b6;--line:#493241;--surface:#171019;--surface-raised:#211624;
  --display:'Lora',Georgia,serif;--mono:'Nunito Sans',monospace;--sans:'Nunito Sans',Arial,sans-serif;
}
body{background-color:var(--ink);background-image:radial-gradient(ellipse at 12% 8%,#401c3025,transparent 42%),radial-gradient(ellipse at 92% 48%,#31192720,transparent 36%);color:var(--paper)}
h1,h2,h3,.wordmark,.project-card h3,.skills-card h4,.contact-section h2,.work-page-intro h1,.contact-page h1{font-family:var(--display);font-weight:600;letter-spacing:.005em}
h1 em,h2 em,.work-page-intro h1 em,.contact-page h1 em{color:#c77c8a;font-style:normal}
.site-header{background:#0b080df2;border-bottom-color:#493241}
.wordmark{font-size:clamp(1rem,1.6vw,1.45rem);letter-spacing:0}
.site-header nav a{font-family:var(--display);font-size:.69rem;letter-spacing:.055em}
.notice.info-ribbon{min-height:clamp(58px,7vw,78px);padding:14px clamp(16px,4vw,48px);background:linear-gradient(90deg,#170e18,#321724 48%,#170e18);border-top:1px solid #5d3547;border-bottom:1px solid #5d3547;box-shadow:inset 0 1px 0 #ffffff08}
.info-ribbon .notice-dot{background:#c77c8a;box-shadow:0 0 0 4px #c77c8a22}
.info-ribbon p{font-family:var(--display);font-size:clamp(.78rem,1.5vw,1.08rem);letter-spacing:.035em}
.hero h1{font-family:var(--display);font-size:clamp(2.8rem,6.5vw,6.2rem);line-height:1.08;letter-spacing:-.025em}
.about-section h2,.section-heading h2,.contact-section h2{font-family:var(--display);letter-spacing:-.015em;line-height:1.12}
.about-work-callout{margin:26px 0 34px;padding:20px 22px;border-left:2px solid #b56b7a;background:linear-gradient(100deg,#28121f99,transparent);max-width:760px}
.about-work-callout p{margin:0 0 16px}
.gothic-button{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;min-height:48px;padding:12px 16px;border:1px solid #80505f;background:#251420;color:#f1e8ed;text-decoration:none;font-family:var(--display);font-size:.76rem;letter-spacing:.035em;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.gothic-button:hover{background:#3a1c2b;border-color:#d0919c;transform:translateY(-2px)}
.gothic-button span:last-child{font-family:var(--mono);font-size:1rem;color:#d99aa4}
.home-contact-cta{padding-top:clamp(54px,7vw,90px);padding-bottom:clamp(60px,8vw,100px);border-top:1px solid #493241}
.home-contact-cta>p:not(.eyebrow){max-width:680px}
.skills-card,.skills-overview,.about-work-callout,.project-card{border-color:#493241}
.skills-card{background:linear-gradient(145deg,#211624,#120d15 82%)}
.skills-card h4{font-size:clamp(1.15rem,1.6vw,1.4rem)}
.skills-review-pending .skill-rating{display:none!important}
.skills-review-pending .skill-row{grid-template-columns:minmax(0,1fr)}
.skills-review-pending .skills-scale{border:1px solid #493241;background:#171019;padding:16px 18px;margin:18px 0 26px}
.skills-review-pending .skills-scale p{margin:8px 0 0;color:#c9bac7;font-size:.9rem;line-height:1.7}
/* Compact project cards: visual sample first, concise details beneath. */
#projects .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,26px);align-items:start}
#projects .project-card,#projects .project-card:nth-child(n){grid-column:auto!important;transform:none!important;display:flex;flex-direction:column;min-width:0;padding:0;overflow:hidden;border:1px solid #493241;background:linear-gradient(150deg,#211624,#110d14 82%);box-shadow:none}
#projects .project-card:hover{border-color:#b56b7a;box-shadow:0 12px 26px #0008}
#projects .project-card .project-image,#projects .project-card .branding-gallery,#projects .project-card .coming-art{order:0;width:100%;margin:0}
#projects .project-card .project-meta,#projects .project-card h3,#projects .project-card>p,#projects .project-card .skill-list,#projects .project-card>.text-link{margin-left:clamp(16px,2vw,24px);margin-right:clamp(16px,2vw,24px)}
#projects .project-card .project-meta{margin-top:18px;gap:8px;flex-wrap:wrap}
#projects .project-card h3{font-size:clamp(1.1rem,1.7vw,1.55rem);line-height:1.3;margin-top:12px;margin-bottom:10px}
#projects .project-card>p{font-size:.88rem;line-height:1.75;max-width:none}
#projects .project-card .skill-list{gap:6px;margin-top:12px;margin-bottom:22px}
#projects .project-card .skill-list span{font-size:.65rem;padding:5px 8px}
#projects .android-carousel{order:0;width:100%;border:0;border-bottom:1px solid #493241}
#projects .android-carousel-stage{height:clamp(210px,25vw,310px);min-height:clamp(210px,25vw,310px);padding:16px 42px;background:#100b12}
#projects .android-carousel-stage img{max-height:100%;width:100%;object-fit:contain}
#projects .android-project-copy{order:1;padding:0 0 18px;width:100%}
#projects .android-project-copy h3{font-size:clamp(1.1rem,1.7vw,1.55rem)}
#projects .carousel-hint{font-size:.75rem!important}
#projects .branding-gallery{min-height:clamp(150px,18vw,220px);padding:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center;background:#100b12}
#projects .branding-gallery figure{margin:0;min-width:0}
#projects .branding-gallery img{width:100%;height:clamp(120px,15vw,180px);object-fit:contain}
#projects .branding-gallery figcaption{font-size:.68rem}
#projects .project-coming .coming-art{min-height:clamp(150px,18vw,220px);padding:18px;display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,28px)}
#projects .project-coming .coming-art span:first-child{font-size:clamp(3.5rem,7vw,6rem)}
#projects .project-coming .coming-art span:last-child{font-size:clamp(1rem,2vw,1.7rem)}
#projects .project-oop .oop-heading{order:0;padding:20px 20px 0;gap:10px}
#projects .project-oop .oop-heading h3{font-size:clamp(1.15rem,1.7vw,1.55rem)}
#projects .project-oop .oop-grade{font-size:2rem}
#projects .project-oop .oop-browser{order:1;margin:10px 16px 0;width:calc(100% - 32px);border:1px solid #493241;box-shadow:none}
#projects .project-oop .oop-browser-toolbar{grid-template-columns:1fr;gap:7px;padding:12px}
#projects .project-oop .oop-browser-toolbar select{min-height:42px;font-size:.78rem}
#projects .project-oop .oop-sample-panel{padding:14px}
#projects .project-oop .oop-sample-panel>p{font-size:.8rem;line-height:1.65}
#projects .project-oop .oop-sample-panel pre{font-size:.72rem;line-height:1.55;padding:12px;max-height:280px;overflow:auto}
#projects .project-oop>p:not(.interaction-hint){font-size:.84rem;line-height:1.7}
#projects .project-oop .interaction-hint{font-size:.75rem;line-height:1.6}
#projects .project-oop .oop-browser-controls{padding:10px;gap:6px}
#projects .project-oop .oop-nav-button{font-size:.68rem;min-height:34px}
.contact-page{padding-top:clamp(60px,9vw,120px);padding-bottom:clamp(70px,10vw,130px);max-width:1080px}
.contact-page h1{font-size:clamp(3rem,8vw,6rem);line-height:1.05;letter-spacing:-.02em;margin:22px 0}
.contact-page h1 em{font-style:normal;color:#c77c8a}
.contact-page-intro{max-width:720px;color:#c9bac7;font-size:1.05rem;line-height:1.85}
.contact-page-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:36px}
.contact-method{padding:22px;border:1px solid #493241;background:linear-gradient(145deg,#211624,#120d15);min-width:0}
.contact-method h2{font-size:1.15rem;margin:0 0 10px}
.contact-method p{margin:0;color:#c9bac7;line-height:1.7}
.contact-method a{display:inline-block;margin-top:12px;color:#e1a0ab;overflow-wrap:anywhere}
.contact-page-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
@media(max-width:760px){
  #projects .project-grid{grid-template-columns:minmax(0,1fr)}
  #projects .project-card,#projects .project-card:nth-child(n){grid-column:1!important}
  #projects .android-carousel-stage{height:clamp(220px,64vw,320px);min-height:clamp(220px,64vw,320px)}
  #projects .branding-gallery{min-height:180px}
  #projects .branding-gallery img{height:clamp(130px,38vw,190px)}
  #projects .project-oop .oop-sample-panel pre{font-size:.75rem}
  .contact-page-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.gothic-button{transition:none}}

/* === Gothic portfolio refresh: page structure, texture and compact sample cards === */
:root{--ink:#0b080d;--paper:#eee4eb;--burgundy:#2b1021;--copper:#c27b92;--muted:#b8a8b4;--line:#493344;--surface:#140e17;--surface-raised:#211522;--display:'Lora',Georgia,serif;--gothic:'Lora',serif;--sans:'Nunito Sans',Arial,sans-serif}
body{background-color:var(--ink);background-image:radial-gradient(ellipse at 16% 4%,rgba(105,37,72,.23),transparent 40%),radial-gradient(ellipse at 90% 32%,rgba(55,30,77,.18),transparent 38%),repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 1px,transparent 1px 7px);background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.12;background-image:radial-gradient(circle,rgba(207,151,176,.72) .7px,transparent 1px);background-size:31px 31px;mask-image:linear-gradient(to bottom,black,transparent 78%)}
body>*{position:relative;z-index:1}
.notice.info-ribbon{background:linear-gradient(90deg,#160b15,#351323 45%,#170c17);border-bottom:1px solid #734358;color:#f0dce5}
.notice-dot{background:#d99aaa;box-shadow:0 0 0 4px #d99aaa22}
.site-header{background:rgba(13,8,15,.94);border-bottom:1px solid #543247;backdrop-filter:blur(16px)}
.site-header nav a{font-family:var(--display);font-size:.69rem;letter-spacing:.045em;color:#cbbbc8}
.site-header nav a:hover,.site-header nav a[aria-current="page"]{color:#e5a3b5}
.site-header nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:#a65c78;text-underline-offset:8px;text-decoration-thickness:1px}
.wordmark.full-name{font-family:var(--display);letter-spacing:-.025em}
.wordmark span{color:#d69aad}
.language-toggle{border-color:#684153}
.language-toggle:hover{border-color:#d69aad;background:#291523}
h1,h2,h3,h4{font-family:var(--display);text-wrap:balance}
h1 em,h2 em{color:#d18ba0}
.eyebrow,.project-meta,.skills-number,.home-work-type{color:#d69aad}
.eyebrow-line{background:#b96f8b}
.hero:before,.hero:after{border-color:#a96d8a35;border-radius:48% 48% 4px 4px}
.hero:before{background:linear-gradient(180deg,#3c172a12,transparent);box-shadow:inset 0 0 36px #6c29401a}
.portrait-frame{border-color:#7d4b63;box-shadow:0 0 0 8px #2a1422,0 0 0 9px #684154,0 18px 55px #0008}
.portrait-caption{color:#d0b9c8}
.about-section{background:linear-gradient(112deg,rgba(33,17,29,.9),rgba(14,10,17,.94) 58%,rgba(30,16,34,.9));border-top:1px solid #513247;border-bottom:1px solid #513247}
.about-section:before{border-color:#9e6b8628}
.about-section h2,.section-heading h2,.contact-section h2{font-family:var(--display);letter-spacing:-.015em;line-height:1.12}
.about-section h2 em,.section-heading h2 em,.contact-section h2 em{color:#d18ba0}
.gothic-button{border-color:#80506a;background:linear-gradient(135deg,#2a1424,#170d18);color:#f1e8ed}
.gothic-button:hover{background:linear-gradient(135deg,#432038,#211021);border-color:#d091aa}
.gothic-button span:last-child{color:#d99aaa}
a:focus-visible,button:focus-visible{outline-color:#e2a8b8}
::selection{background:#8b4264;color:#fff3f7}
.skills-card,.skills-overview,.about-work-callout,.project-card,.contact-method{border-color:#503247}
.skills-card{background:linear-gradient(145deg,#241622,#130d17 82%)}
.skills-overview{background:rgba(14,9,15,.76)}
.skills-scale{border-color:#634057!important;background:#1a101b!important}
.skills-scale-title,.skill-level{color:#e0a1b3}
.skill-bars i.is-filled{background:#bd718d;box-shadow:0 0 7px #bd718d3b}
.skill-bars i{border-color:#634057}
.home-about-teaser{display:grid;grid-template-columns:minmax(120px,.35fr) minmax(0,1fr);gap:clamp(26px,5vw,76px);align-items:center;padding-top:clamp(64px,8vw,108px);padding-bottom:clamp(64px,8vw,108px);border-bottom:1px solid #493344}
.home-about-emblem{aspect-ratio:1;max-width:240px;width:100%;display:grid;place-items:center;position:relative;border:1px solid #8e5c75;border-radius:50% 50% 4px 4px;background:radial-gradient(ellipse at 50% 35%,#51233a55,transparent 65%),#110b13;color:#dca2b5}
.home-about-emblem:before,.home-about-emblem:after{content:"";position:absolute;inset:12px;border:1px solid #70445c;border-radius:50% 50% 2px 2px}
.home-about-emblem:after{inset:23px;border-color:#70445c66}
.home-about-emblem span:first-child{font-size:2rem;position:absolute;top:17%}
.home-about-emblem span:last-child{font:clamp(2.5rem,5vw,4.5rem)/1 var(--gothic);letter-spacing:.03em}
.home-about-copy{max-width:850px}
.home-about-copy h2{font-size:clamp(2.3rem,5.4vw,5rem);line-height:1.1;margin:18px 0 24px}
.home-about-copy h2 em{font-style:normal;color:#d18ba0}
.home-about-copy>p:not(.eyebrow){max-width:720px;color:#d0c1cd;line-height:1.85;font-size:clamp(1rem,1.3vw,1.12rem)}
.home-work-cta-section{border-top:1px solid #493344;background:linear-gradient(180deg,rgba(21,12,22,.75),rgba(11,8,13,.25))}
.home-work-cta{border-color:#57354a}
.home-work-cta span:last-child{color:#d69aad}
.work-page-intro{position:relative}
.work-page-intro:after{content:"✦  ✧  ✦";display:block;margin-top:24px;color:#88546f;letter-spacing:.7em;font-size:.8rem}
.work-page-intro h1{font-family:var(--display);font-size:clamp(2.8rem,7vw,6rem);letter-spacing:-.025em;line-height:1.04}
.work-page-intro h1 em{color:#d18ba0}
.work-page-actions,.about-page-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.work-page-actions .gothic-button,.about-page-cta .gothic-button{min-width:190px}
.about-page-intro{padding-bottom:clamp(24px,4vw,44px)}
.about-page-cta{padding-top:0;padding-bottom:clamp(60px,8vw,100px)}
#projects .section-heading{max-width:940px;margin-bottom:22px}
#projects .section-lead{max-width:850px;line-height:1.8}
.work-browse-note{font-size:.84rem;color:#d0c1cd;border-left:2px solid #bd718d;padding:10px 14px;background:linear-gradient(90deg,#31172777,transparent);margin:18px 0 26px}
#projects .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.7vw,22px)}
#projects .project-card,#projects .project-card:nth-child(n){border-color:#503247;background:linear-gradient(150deg,rgba(36,20,34,.96),rgba(15,10,17,.98) 84%);border-radius:2px}
#projects .project-card:hover{border-color:#b87591;box-shadow:0 10px 24px #0007}
#projects .project-card .project-meta,#projects .project-card h3,#projects .project-card>p,#projects .project-card .skill-list,#projects .project-card>.text-link{margin-left:clamp(14px,1.8vw,20px);margin-right:clamp(14px,1.8vw,20px)}
#projects .project-card .project-meta{font-size:.62rem;margin-top:14px}
#projects .project-card h3{font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.32;margin-top:9px;margin-bottom:8px}
#projects .project-card>p{font-size:.82rem;line-height:1.7}
#projects .project-card .skill-list{margin-top:8px;margin-bottom:16px}
#projects .project-card .skill-list span{font-size:.62rem;padding:4px 7px}
#projects .android-project-copy{order:0;padding:0 0 8px;width:100%}
#projects .android-carousel{order:2;width:100%;border-top:1px solid #503247;border-bottom:0}
#projects .android-carousel-stage{height:clamp(175px,19vw,235px);min-height:clamp(175px,19vw,235px);padding:12px 36px;background:linear-gradient(145deg,#100a12,#1c101d)}
#projects .android-project-copy h3{font-size:clamp(1.05rem,1.5vw,1.35rem)}
#projects .branding-gallery{order:2;min-height:clamp(130px,16vw,190px);padding:12px;gap:10px;background:#100a12}
#projects .branding-gallery img{height:clamp(100px,13vw,155px)}
#projects .project-coming .coming-art{order:2;min-height:clamp(130px,16vw,190px);padding:12px}
#projects .project-coming .coming-art span:first-child{font-size:clamp(3rem,6vw,5rem)}
#projects .project-coming .coming-art span:last-child{font-size:clamp(.9rem,1.7vw,1.35rem)}
#projects .project-oop .oop-heading{order:0;padding:16px 16px 0}
#projects .project-oop .oop-heading h3{font-size:clamp(1.1rem,1.5vw,1.4rem)}
#projects .project-oop .oop-grade{font-size:1.7rem}
#projects .project-oop .oop-browser{order:2;margin:10px 14px 0;width:calc(100% - 28px)}
#projects .project-oop .oop-sample-panel{padding:12px}
#projects .project-oop .oop-sample-panel>p{font-size:.77rem;line-height:1.65}
#projects .project-oop .oop-sample-panel pre{font-size:.69rem;line-height:1.5;max-height:220px;overflow:auto}
#projects .project-oop .oop-browser-controls{padding:8px}
#projects .project-oop .oop-nav-button{font-size:.65rem;min-height:32px}
.contact-page{background:radial-gradient(ellipse at 85% 10%,#35172b35,transparent 48%)}
.contact-method{background:linear-gradient(145deg,#241521,#100a13)}
.contact-method a{color:#e0a0b5}
.site-footer{border-top-color:#493344}
.site-footer .copyright-line,.site-footer .footer-note{color:#ad9aaa}
@keyframes gothic-shimmer{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:.8;transform:translateY(-3px)}}
.home-about-emblem span:first-child{animation:gothic-shimmer 5s ease-in-out infinite}
@media(max-width:800px){
  .home-about-teaser{grid-template-columns:90px minmax(0,1fr);gap:22px;padding-top:64px;padding-bottom:64px}
  .home-about-emblem{max-width:90px}
  .home-about-emblem:before{inset:7px}.home-about-emblem:after{inset:13px}
  .home-about-emblem span:first-child{font-size:1rem}
  .home-about-emblem span:last-child{font-size:2rem}
}
@media(max-width:760px){
  .site-header{padding-inline:4vw;gap:10px}
  .site-header nav{gap:clamp(8px,2vw,16px)}
  .site-header nav a{font-size:.59rem;letter-spacing:0}
  #projects .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:540px){
  .site-header{flex-wrap:wrap;justify-content:space-between;padding-top:8px}
  .site-header nav{order:3;width:100%;justify-content:space-between;padding:0 0 10px;flex-wrap:wrap}
  .site-header nav a{font-size:.59rem}
  .home-about-teaser{grid-template-columns:1fr;gap:20px}
  .home-about-emblem{display:none}
  #projects .project-grid{grid-template-columns:minmax(0,1fr)}
  #projects .project-card,#projects .project-card:nth-child(n){grid-column:1!important}
  #projects .android-carousel-stage{height:clamp(200px,58vw,270px);min-height:clamp(200px,58vw,270px)}
  #projects .branding-gallery{min-height:160px}
  #projects .branding-gallery img{height:clamp(110px,32vw,150px)}
}
@media(prefers-reduced-motion:reduce){
  .home-about-emblem span:first-child{animation:none}
  .gothic-button,.project-card{transition:none!important}
  html{scroll-behavior:auto}
}

/* PrismJS C# syntax highlighting — coordinated with the dark burgundy palette. */
#projects .oop-sample-panel pre[class*="language-"]{margin:0;background:#100a12;color:#eee4eb;text-shadow:none;border-radius:0;white-space:pre;tab-size:4}
#projects .oop-sample-panel code[class*="language-"]{font-family:var(--mono);font-size:inherit;line-height:inherit;color:#eee4eb;text-shadow:none;white-space:pre}
#projects .oop-sample-panel .token.comment,#projects .oop-sample-panel .token.prolog{color:#a48da3}
#projects .oop-sample-panel .token.keyword,#projects .oop-sample-panel .token.boolean{color:#e0a0b5}
#projects .oop-sample-panel .token.string,#projects .oop-sample-panel .token.char{color:#d8b07a}
#projects .oop-sample-panel .token.function,#projects .oop-sample-panel .token.class-name{color:#c3c5ed}
#projects .oop-sample-panel .token.number{color:#cba8e3}
#projects .oop-sample-panel .token.operator,#projects .oop-sample-panel .token.punctuation{color:#d8c9d8}
#projects .oop-sample-panel .token.property,#projects .oop-sample-panel .token.parameter{color:#b6d2c3}


/* Final readability pass: consistent skill ratings and compact, aligned sample cards. */
.skills-grid-detailed{align-items:stretch;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.skills-grid-detailed .skills-card{height:100%;padding:clamp(16px,2vw,24px);min-width:0}
.skills-grid-detailed .skills-card:last-child{grid-column:1/-1}
.skills-grid-detailed .skill-row{gap:10px;padding:9px 0}
.skills-grid-detailed .skill-name{font-size:clamp(.82rem,1vw,.94rem)}
.skills-grid-detailed .skill-bars i{width:8px;height:14px}
.skills-grid-detailed .skill-level{font-size:.72rem;min-width:28px}
.skills-scale{margin-top:22px;padding:16px 18px;border-left:2px solid var(--copper);background:linear-gradient(90deg,#2b102180,transparent)}
#projects .project-grid{align-items:stretch;gap:clamp(16px,2vw,24px)}
#projects .project-card{height:100%;min-width:0;display:flex;flex-direction:column;align-self:stretch;padding:clamp(14px,1.7vw,22px);border-radius:2px}
#projects .project-card .project-meta{margin-top:12px;font-size:.62rem}
#projects .project-card h3{font-size:clamp(1.15rem,1.6vw,1.55rem);line-height:1.22;margin-top:8px}
#projects .project-card>p{font-size:.88rem;line-height:1.72}
#projects .project-card .skill-list{margin-top:auto;padding-top:14px}
#projects .android-project-copy{order:0;padding:8px 0 12px}
#projects .android-carousel{order:2;margin-top:10px}
#projects .android-carousel-stage{height:clamp(190px,20vw,260px);min-height:clamp(190px,20vw,260px)}
#projects .project-oop .oop-heading{order:0;padding:6px 0 0}
#projects .project-oop>p:not(.interaction-hint){margin-left:0;margin-right:0}
#projects .project-oop .interaction-hint{margin-left:0;margin-right:0}
#projects .project-oop .oop-browser{order:2;margin:12px 0 0;width:100%}
#projects .project-oop .oop-sample-panel pre{font-size:clamp(.72rem,.9vw,.85rem);max-height:260px}
#projects .project-oop .oop-sample-panel>p{font-size:.85rem;line-height:1.7}
#projects .branding-gallery{order:2;margin-top:10px}
#projects .project-coming .coming-art{order:2;margin-top:10px}
.contact-page-grid{align-items:stretch}
.contact-method{height:100%;display:flex;flex-direction:column;align-items:flex-start}
.contact-method a{overflow-wrap:anywhere;word-break:break-word}
@media(max-width:760px){
  .skills-grid-detailed{grid-template-columns:minmax(0,1fr)}
  .skills-grid-detailed .skills-card:last-child{grid-column:auto}
  #projects .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #projects .project-card{padding:14px}
}
@media(max-width:540px){
  .skills-grid-detailed{grid-template-columns:minmax(0,1fr)}
  #projects .project-grid{grid-template-columns:minmax(0,1fr)}
}


/* Gothic atmosphere: typography, restrained ornament and lightweight native CSS motion. */
:root{color-scheme:dark;--ink:#09070b;--paper:#f0e6ec;--burgundy:#250b1b;--copper:#b85c7a;--muted:#c1aeba;--line:#49303f;--surface:#130d16;--surface-raised:#211321;--sans:'Nunito Sans',Arial,sans-serif}
body{background-color:var(--ink);background-image:radial-gradient(ellipse at 14% 18%,#42172a38 0,transparent 36%),radial-gradient(ellipse at 86% 52%,#29143a33 0,transparent 42%),repeating-linear-gradient(90deg,transparent 0 59px,#b85c7a08 60px,#b85c7a08 61px,transparent 62px);background-attachment:fixed}
.info-ribbon,.notice{position:relative;border-bottom:1px solid #8f3e5b;box-shadow:0 5px 24px #0005;overflow:hidden}
.info-ribbon::after,.notice::after{content:"✦  ☾  ✦";position:absolute;right:clamp(12px,3vw,42px);top:50%;transform:translateY(-50%);color:#e3a2b8;font-size:.8rem;letter-spacing:.45em;opacity:.72;pointer-events:none}
.notice p{max-width:min(100%,900px);padding:0 100px;line-height:1.6}
.site-header{background:#100a13ee;border-bottom-color:#573447}
.site-header nav a[aria-current="page"]{color:#e7a3bb;text-decoration:underline;text-decoration-color:#8f3e5b;text-underline-offset:8px}
.language-toggle{border-color:#75405a}
.eyebrow-line{background:var(--copper)}
.hero:before,.hero:after{border-color:#b85c7a55}
.portrait-frame{border-color:#75405a;box-shadow:14px 14px 0 #260d1d}
.shape-one{background:#2b1021;border-color:#b85c7a77}
.shape-two{background:#8d3c5c}
.hero-copy{position:relative}
.hero-copy::after{content:"0101 ᚠ 0010 ᚱ 1010 ᛟ 0110 ᚷ 1001 ᚹ";position:absolute;right:-1.5rem;top:-3rem;writing-mode:vertical-rl;font:clamp(.65rem,1vw,.8rem)/2 var(--mono);letter-spacing:.4em;color:#df8ca9;opacity:.16;pointer-events:none;animation:gothic-code-drift 18s linear infinite}
h1,h2,h3,.wordmark{font-family:'Lora','Lora',serif}
h1 em,h2 em{color:#d782a0}
/* Removed redundant decorative glyphs before skill-card headings. */
.skills-scale{border-left-color:#b85c7a;background:linear-gradient(90deg,#42172a88,transparent)}
.skill-bars i.is-filled{background:linear-gradient(180deg,#e2a1b7,#963b5c);box-shadow:0 0 7px #b85c7a40}
.contact-method,.skills-card,.project-card{border-color:#523044}
.contact-method:hover,.project-card:hover{border-color:#9b4b68}
.gothic-button{border-color:#a94c6d;background:#2b1021}
.gothic-button:hover{background:#5b203b}
.site-footer{border-top-color:#49303f}
.home-work-cta{border-color:#573447}
@keyframes gothic-code-drift{0%{transform:translateY(-10px);opacity:.08}35%{opacity:.2}100%{transform:translateY(24px);opacity:.08}}
@media(max-width:640px){.notice p{padding:0 10px}.info-ribbon::after,.notice::after{display:none}.hero-copy::after{right:0;top:-1rem;font-size:.62rem;opacity:.1}}
@media(prefers-reduced-motion:reduce){.hero-copy::after{animation:none}body{background-attachment:scroll}}


/* GOTHIC ROMANCE — black, oxblood, candle-cream and rose-leaf green. */
:root{
  color-scheme:dark;
  --ink:#050606;
  --paper:#f2eadc;
  --burgundy:#300711;
  --copper:#8b263d;
  --muted:#c4b8ac;
  --line:#3e2028;
  --surface:#0c0b0b;
  --surface-raised:#171012;
  --display:'Lora',Georgia,serif;
  --gothic:'Lora',serif;
  --sans:'Nunito Sans',Arial,sans-serif;
}
body{
  background-color:#050606;
  background-image:radial-gradient(ellipse at 12% 6%,#1831262a 0,transparent 32rem),radial-gradient(ellipse at 88% 30%,#4a0c1a24 0,transparent 38rem),linear-gradient(180deg,#050606 0%,#090709 55%,#050606 100%);
  color:var(--paper);
}
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  isolation:isolate;
  background:linear-gradient(90deg,#050606f5,#11080cf2 55%,#050606f5);
  border-bottom:1px solid #4b202b;
  box-shadow:0 8px 24px #0007;
}
.site-header::before{
  content:"🦉";
  position:absolute;
  z-index:5;
  top:4px;
  left:-2.2rem;
  font-family:system-ui,sans-serif;
  font-size:clamp(1rem,1.7vw,1.35rem);
  line-height:1;
  pointer-events:none;
  opacity:0;
  filter:drop-shadow(0 0 6px #87324899);
  animation:owl-flight 12s cubic-bezier(.36,.03,.66,.99) 1s infinite;
}
@keyframes owl-flight{
  0%{left:-2.2rem;top:4px;transform:translate(0,0) rotate(-12deg) scale(.82);opacity:0}
  8%{opacity:.88}
  25%{left:22%;top:0;transform:translate(0,-4px) rotate(8deg) scale(.95);opacity:.92}
  48%{left:46%;top:5px;transform:translate(0,2px) rotate(-7deg) scale(.86);opacity:.82}
  70%{left:69%;top:0;transform:translate(0,-3px) rotate(9deg) scale(.76);opacity:.72}
  88%,100%{left:102%;top:5px;transform:translate(0,0) rotate(12deg) scale(.68);opacity:0}
}
.info-ribbon,.notice{
  background:linear-gradient(90deg,#080707,#260812 44%,#10180f 72%,#080707);
  border-color:#6b2938;
  color:#f4e9dc;
}
.info-ribbon .notice-dot{background:#a43a50;box-shadow:0 0 0 4px #a43a5026,0 0 15px #a43a5055}
.info-ribbon::after,.notice::after{color:#c3d0b0}
h1,h2,h3,.wordmark,.project-card h3,.skills-card h4,.contact-section h2,.work-page-intro h1,.contact-page h1{text-shadow:0 1px 0 #000,0 0 26px #4a10201c}
h1 em,h2 em,.home-work-cta-section h2 em,.work-page-intro h1 em{color:#a94a5b}
a:hover{color:#d6bba5}
.gothic-button,.home-work-cta{background:linear-gradient(135deg,#210710,#10150f);border-color:#703044}
.gothic-button:hover{background:linear-gradient(135deg,#3a0c1a,#18251a)}
.skills-card,.skills-overview,.about-work-callout,.project-card,.contact-method{border-color:#3d2528;background:linear-gradient(145deg,#151013 0%,#090909 72%,#0c120d 100%)}
.skills-card:hover,.contact-method:hover,.project-card:hover{border-color:#80505a;box-shadow:0 14px 36px #0008,0 0 0 1px #31503b26}
.skill-level,.skills-scale-title{color:#d8b4a0}
.skill-bars i.is-filled{background:#a33b51;box-shadow:0 0 8px #a33b512b}
.site-footer{border-top-color:#3d2528}
.hero-copy::after{color:#a9c2a0}
@media(max-width:640px){.site-header::before{font-size:1rem}}
@media(prefers-reduced-motion:reduce){.site-header::before{animation:none;display:none}body{background-attachment:scroll}}


/* Skills page: keep long labels readable beside the fixed five-step rating. */
.skills-grid-detailed .skill-row{align-items:center;gap:clamp(8px,1vw,14px)}
.skills-grid-detailed .skill-name{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;line-height:1.45}
.skills-grid-detailed .skill-rating{flex:0 0 auto;white-space:nowrap}
.skills-grid-detailed .skill-level{display:inline-block;text-align:right}
.skills-grid-detailed .skills-card h4{line-height:1.25;overflow-wrap:anywhere}
@media(max-width:520px){
  .skills-grid-detailed .skill-row{align-items:flex-start}
  .skills-grid-detailed .skill-name{font-size:.88rem}
  .skills-grid-detailed .skill-rating{padding-top:2px}
  .skills-grid-detailed .skill-bars i{width:6px;height:12px}
  .skills-grid-detailed .skill-level{font-size:.7rem;min-width:25px}
}


/* Final polish — dark woodland gothic palette, sticky navigation and a small fox motif. */
:root{
  color-scheme:dark;
  --ink:#050407;
  --paper:#f1e9df;
  --burgundy:#260610;
  --copper:#873248;
  --muted:#b9a8ad;
  --line:#3b202b;
  --surface:#0b090b;
  --surface-raised:#151014;
}
html{scroll-padding-top:100px}
body{
  background-color:#050407;
  background-image:
    radial-gradient(ellipse at 14% 8%,#18312620 0,transparent 32rem),
    radial-gradient(ellipse at 86% 26%,#4b071b26 0,transparent 38rem),
    radial-gradient(ellipse at 50% 78%,#1a111d18 0,transparent 42rem),
    linear-gradient(180deg,#050407 0%,#080609 48%,#050407 100%);
  color:var(--paper);
}
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(7,5,9,.96);
  border-bottom:1px solid #4b202b;
  box-shadow:0 8px 26px #0008;
  backdrop-filter:blur(16px);
}
.site-header nav a{color:#d2c4c9}
.site-header nav a:hover,.site-header nav a[aria-current="page"]{color:#e7a3bb}
.site-header nav a:focus-visible,.language-toggle:focus-visible,.gothic-button:focus-visible,.home-work-cta:focus-visible{outline:2px solid #d49aaa;outline-offset:4px}
.notice.info-ribbon{
  background:linear-gradient(90deg,#070609 0%,#240710 45%,#0d100c 74%,#070609 100%);
  border-color:#572637;
  color:#f3e8e0;
}
.info-ribbon .notice-dot{background:#9e3c54;box-shadow:0 0 0 4px #9e3c5426,0 0 13px #9e3c5445}
.info-ribbon::after,.notice::after{color:#a6b49c}
h1 em,h2 em,.home-work-cta-section h2 em,.work-page-intro h1 em{color:#b65c72}
.skills-card,.skills-overview,.about-work-callout,.project-card,.contact-method{
  border-color:#38232b;
  background:linear-gradient(145deg,#130e12 0%,#09080a 72%,#0c100c 100%);
}
.skills-card:hover,.contact-method:hover,.project-card:hover{border-color:#764052;box-shadow:0 14px 36px #0009,0 0 0 1px #263a2b20}
.skill-bars i.is-filled{background:linear-gradient(180deg,#c16b83,#79263e);box-shadow:0 0 7px #87324838}
.gothic-button,.home-work-cta{background:linear-gradient(135deg,#1d0710,#0c100c);border-color:#6d2c40}
.gothic-button:hover{background:linear-gradient(135deg,#350b1c,#121a13)}
.site-footer{position:relative;border-top-color:#38232b}
.site-footer::after{
  content:"🦊";
  position:absolute;
  right:clamp(18px,5vw,64px);
  bottom:16px;
  font-family:system-ui,sans-serif;
  font-size:clamp(1.15rem,2vw,1.55rem);
  line-height:1;
  opacity:.82;
  filter:drop-shadow(0 0 8px #87324855);
  pointer-events:none;
  animation:fox-glow 5s ease-in-out infinite;
}
@keyframes fox-glow{0%,100%{opacity:.65;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@media(max-width:640px){
  .site-header{position:sticky;top:0;padding-top:8px}
  .site-header::before{font-size:.95rem}
  .site-footer{padding-bottom:48px}
  .site-footer::after{right:20px;bottom:12px}
}
@media(prefers-reduced-motion:reduce){
  .site-header::before,.site-footer::after{animation:none!important}
}


/* Homepage greeting: personal welcome before the education and job-search introduction. */
.hero-greeting{
  max-width:560px;
  margin:clamp(18px,2.2vw,28px) 0 12px;
  color:#E5B9C9;
  font-size:clamp(1.02rem,1.45vw,1.2rem);
  font-weight:500;
  line-height:1.8;
  text-wrap:pretty;
}
@media(max-width:640px){
  .hero-greeting{max-width:100%;font-size:1rem;line-height:1.75;margin-top:18px}
}


/* Final palette refinement: near-black burgundy with a restrained glossy highlight. */
:root{
  --ink:#080509;
  --paper:#f2e7ed;
  --burgundy:#19030d;
  --copper:#b85c7a;
  --muted:#c3adb8;
  --line:#492333;
  --surface:#10080e;
  --surface-raised:#1c0a14;
}
.notice.info-ribbon{
  background:
    linear-gradient(112deg,transparent 0 34%,#ffffff08 42%,#ffffff00 49%),
    linear-gradient(180deg,#4a1029 0%,#260817 18%,#18040d 58%,#0c080d 100%);
  border-top:1px solid #7c304b;
  border-bottom:1px solid #6a203d;
  box-shadow:inset 0 1px 0 #ffc1d329,0 4px 18px #0008;
}
.info-ribbon::before{
  background:linear-gradient(90deg,transparent,#d98aa45c,transparent);
  opacity:.8;
}
.info-ribbon .notice-dot{
  background:#c35c7b;
  box-shadow:0 0 0 4px #c35c7b24,0 0 15px #df779855;
}
.site-header{
  background:linear-gradient(180deg,#17050fef,#0c080df2);
  border-bottom-color:#562039;
}
.site-header::after{
  background:linear-gradient(90deg,transparent,#6d203f,#bd6c8b,#6d203f,transparent);
  opacity:.85;
}
.hero h1 em,h2 em,.home-work-cta-section h2 em,.work-page-intro h1 em{
  color:#c66b89;
  text-shadow:0 1px 0 #f8d8e4a8,0 0 14px #a3325a42;
}
.gothic-button,.home-work-cta,.contact-method{
  background:
    linear-gradient(115deg,#ffffff00 0 35%,#ffffff0a 44%,#ffffff00 54%),
    linear-gradient(180deg,#421026 0%,#260817 45%,#13080e 100%);
  border-color:#79304c;
  box-shadow:inset 0 1px 0 #f7b4cd20,0 6px 18px #0005;
}
.gothic-button:hover,.home-work-cta:hover,.contact-method:hover{
  background:
    linear-gradient(115deg,#ffffff00 0 30%,#ffffff15 43%,#ffffff00 55%),
    linear-gradient(180deg,#591630 0%,#320b1c 48%,#170910 100%);
  border-color:#c16b89;
  box-shadow:inset 0 1px 0 #f7b4cd3b,0 0 22px #8d284d30;
}
.project-card,.skills-card,.skills-overview,.about-work-callout{
  background:
    linear-gradient(118deg,#ffffff00 0 34%,#ffffff05 43%,#ffffff00 51%),
    linear-gradient(145deg,#1b0c14 0%,#10090e 68%,#0c0a0d 100%);
  border-color:#452331;
}
.project-card:hover{
  border-color:#8e3a59;
  box-shadow:0 16px 36px #000a,0 0 0 1px #c16b8918,0 0 24px #711d3a24;
}
.work-section{
  background:
    radial-gradient(ellipse at 82% 0%,#5b102b40,transparent 38rem),
    linear-gradient(180deg,#16040d,#0b080c 88%);
}
.skill-bars i.is-filled{
  background:linear-gradient(180deg,#d48aa2 0%,#a33d60 45%,#63152f 100%);
  box-shadow:inset 0 1px 0 #ffe5ef5c,0 0 8px #9b34552b;
}
@media(prefers-reduced-motion:reduce){
  .gothic-button,.home-work-cta,.contact-method,.project-card{transition:none!important}
}


/* Make the Portfolio 2026 badge a clear, keyboard-accessible link to work samples. */
.hero-index{
  text-decoration:none;
  cursor:pointer;
  transition:transform .2s ease,filter .2s ease;
}
.hero-index:hover{
  transform:translateY(-3px) rotate(-1deg);
  filter:brightness(1.15);
}
.hero-index:focus-visible{
  outline:3px solid var(--copper);
  outline-offset:6px;
}
@media(prefers-reduced-motion:reduce){
  .hero-index{transition:none}
}

/* Portfolio 2026 final legibility pass: readable title, subtle binary drift and responsive spacing. */
.hero-index{
  right:clamp(18px,5vw,72px);
  bottom:clamp(18px,3vw,34px);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:0;
  padding:8px 12px 10px;
  color:#f3e7e9;
  font-family:'Lora',Georgia,serif;
  font-size:clamp(1rem,2vw,1.35rem);
  font-weight:700;
  line-height:1;
  letter-spacing:.13em;
  text-align:right;
  text-shadow:0 2px 5px #000,0 0 18px #a83e62a6;
  isolation:isolate;
}
.hero-index::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  border:1px solid #8d4a5e9c;
  background:linear-gradient(135deg,#080609e8,#2a0b1be0 62%,#0a0d0ae8);
  box-shadow:inset 0 0 0 3px #ffffff05,0 8px 24px #0008;
  transform:rotate(-2deg);
}
.hero-index::after{
  content:"0101 0010 1101 0010 1011 0100";
  position:absolute;
  z-index:-2;
  left:-1.8rem;
  top:-1.5rem;
  width:max-content;
  color:#a8c49e;
  font:500 clamp(.55rem,.9vw,.72rem)/1.6 var(--mono);
  letter-spacing:.19em;
  white-space:nowrap;
  opacity:.5;
  text-shadow:0 0 9px #92c48a70;
  animation:portfolio-binary-drift 10s ease-in-out infinite alternate;
  pointer-events:none;
}
.hero-index .portfolio-word{
  display:block;
  color:#f3e4eb;
  font-family:'Lora','Lora',serif;
  font-size:clamp(1.45rem,3.4vw,2.5rem);
  font-weight:700;
  line-height:.95;
  letter-spacing:.025em;
  text-transform:none;
}
.hero-index .portfolio-year{
  display:block;
  margin-top:6px;
  color:#d58aa1;
  font-family:'Lora',Georgia,serif;
  font-size:clamp(1.2rem,2.8vw,2rem);
  font-weight:700;
  letter-spacing:.17em;
  line-height:1;
}
@keyframes portfolio-binary-drift{
  0%{transform:translate3d(0,0,0);opacity:.18}
  50%{opacity:.58}
  100%{transform:translate3d(14px,-7px,0);opacity:.28}
}
/* Replace the flying animal motif with a small stream of binary code. */
.site-header::before{
  content:"0101 0010 1011 0100";
  font-family:var(--mono);
  font-size:clamp(.55rem,.8vw,.7rem);
  font-weight:500;
  letter-spacing:.12em;
  color:#b7d0a9;
  text-shadow:0 0 8px #7aa86d88;
  white-space:nowrap;
  width:max-content;
}
@media(max-width:760px){
  .hero-index{right:18px;bottom:16px;padding:7px 9px}
  .hero-index::after{left:-.5rem;top:-1rem;font-size:.52rem;letter-spacing:.1em}
  .hero-index .portfolio-word{font-size:1.45rem}
  .hero-index .portfolio-year{font-size:1.25rem}
}
@media(max-width:420px){
  .hero-index{right:12px;bottom:12px}
  .hero-index::after{content:"0101 0010 1011";opacity:.25}
}
@media(prefers-reduced-motion:reduce){
  .hero-index::after{animation:none}
}


/* Portfolio samples: aligned, readable cards with work first and context directly underneath. */
.interlude-photo-grid.creative-samples-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,30px);
  align-items:stretch;
  margin:clamp(36px,5vw,64px) auto 0;
  max-width:1160px;
}
.creative-samples-grid .creative-sample,
.creative-samples-grid .creative-sample:nth-child(1),
.creative-samples-grid .creative-sample:nth-child(2),
.creative-samples-grid .creative-sample:nth-child(3){
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
  margin:0;
  padding:clamp(12px,1.5vw,18px);
  transform:none;
  border:1px solid #62444a;
  background:linear-gradient(155deg,#24181f 0%,#151216 72%);
  box-shadow:0 12px 28px #0006;
}
.creative-samples-grid .creative-sample:hover{transform:translateY(-4px);border-color:#d5b66f}
.creative-samples-grid .sample-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:clamp(190px,22vw,270px);
  overflow:hidden;
  border:1px solid #49353b;
  background:radial-gradient(ellipse at 50% 30%,#39202b 0%,#191319 72%);
  text-decoration:none;
}
.creative-samples-grid .sample-visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:none;
  transition:transform .35s ease,filter .35s ease;
}
.creative-samples-grid .sample-image-link:hover img{transform:scale(1.035);filter:brightness(1.08)}
.creative-samples-grid .sample-expand{
  position:absolute;
  right:10px;
  bottom:10px;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border:1px solid #bca077;
  background:#171217eF;
  color:#f0d7a5;
  font-size:1rem;
}
.creative-samples-grid .interlude-photo:after{display:none}
.creative-samples-grid .interlude-photo figcaption{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:7px 12px;
  padding:12px 2px 9px;
  border-bottom:1px solid #49353b;
  font-size:.62rem;
  line-height:1.5;
  letter-spacing:.045em;
}
.creative-samples-grid .interlude-photo figcaption span:last-child{font-size:.58rem}
.creative-sample-copy{padding:15px 2px 4px;display:flex;flex-direction:column;align-items:flex-start;flex:1}
.creative-sample-copy h3{font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.3;letter-spacing:-.025em;margin:0 0 10px;color:#f1e4d3}
.creative-sample-copy p{margin:0 0 15px;color:#d0c5bc;font-size:.92rem;line-height:1.75}
.creative-sample-copy .sample-open-link{margin-top:auto;padding-top:4px;color:#e7bd83;font-size:.86rem;line-height:1.6;text-decoration:underline;text-decoration-color:#8e654d;text-underline-offset:4px}
.sample-pdf-link{flex-direction:column;gap:8px;padding:20px;text-align:center;color:#f1e4d3}
.sample-file-icon{display:grid;place-items:center;width:78px;height:94px;border:1px solid #d5b66f;background:linear-gradient(145deg,#402630,#1b151a);box-shadow:8px 8px 0 #d5b66f20;font:700 1.25rem var(--mono);color:#f1c18c}
.sample-file-title{font:clamp(1.5rem,2vw,2.1rem) var(--display);letter-spacing:.03em}
.sample-file-action{font-size:.78rem;line-height:1.5;color:#e7bd83}
.sample-pdf-link:hover .sample-file-icon{transform:translateY(-3px);box-shadow:8px 11px 0 #d5b66f20}
@media(max-width:860px){
  .interlude-photo-grid.creative-samples-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .creative-samples-grid .sample-visual{height:clamp(190px,30vw,260px)}
  .creative-samples-grid .creative-sample:last-child{grid-column:1/-1;max-width:calc(50% - 9px);width:100%;justify-self:center}
}
@media(max-width:560px){
  .interlude-photo-grid.creative-samples-grid{grid-template-columns:minmax(0,1fr);gap:18px;margin-top:32px}
  .creative-samples-grid .creative-sample,
  .creative-samples-grid .creative-sample:last-child{grid-column:auto;max-width:none;width:100%;padding:13px}
  .creative-samples-grid .sample-visual{height:clamp(220px,68vw,340px)}
  .creative-sample-copy h3{font-size:1.25rem}
  .creative-sample-copy p{font-size:.95rem;line-height:1.75}
}
@media(prefers-reduced-motion:reduce){
  .creative-samples-grid .creative-sample,.creative-samples-grid .sample-visual img,.sample-pdf-link .sample-file-icon{transition:none}
}


/* Inline poster preview with a link fallback for browsers without built-in PDF support. */
.creative-samples-grid .sample-pdf-preview{display:block;padding:0;background:#f4f0e9}
.creative-samples-grid .sample-pdf-preview object{display:block;width:100%;height:100%;min-height:190px;border:0}
.creative-samples-grid .sample-pdf-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;min-height:190px;padding:18px;text-align:center;color:#35242a;text-decoration:none}
.creative-samples-grid .sample-pdf-fallback .sample-file-icon{flex:0 0 auto}


/* Local portfolio assets: PDF covers use accessible links because embedded objects are disabled by CSP. */
.creative-samples-grid .sample-pdf-preview{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:20px;
  background:
    linear-gradient(135deg,rgba(113,47,76,.26),transparent 48%),
    repeating-linear-gradient(135deg,rgba(213,182,111,.045) 0 1px,transparent 1px 11px),
    #171018;
  color:#f1e4d3;
}
.creative-samples-grid .sample-pdf-preview .sample-file-icon{width:68px;height:82px}
.creative-samples-grid .sample-pdf-preview .sample-file-title{font-size:clamp(1.35rem,2vw,1.8rem);text-align:center}
.creative-samples-grid .sample-pdf-preview .sample-file-action{color:#e7bd83;font-size:.82rem;text-align:center}
.creative-samples-grid .sample-pdf-preview:hover .sample-file-icon{transform:translateY(-3px)}
@media(prefers-reduced-motion:reduce){.creative-samples-grid .sample-pdf-preview .sample-file-icon{transition:none}}


/* Skill cards: keep the final category in the same two-column rhythm on desktop. */
.skills-grid-detailed{align-items:stretch}
.skills-grid-detailed .skills-card:last-child{grid-column:auto}
.skills-grid-detailed .skills-card{min-width:0;height:100%}
.skills-grid-detailed .skill-row{min-width:0}
.skills-grid-detailed .skill-name{overflow-wrap:anywhere}
@media(max-width:760px){
  .skills-grid-detailed .skills-card:last-child{grid-column:auto}
}


/* Contact page: make the preferred contact route visually clear. */
.contact-method-primary{
  grid-column:1 / -1;
  padding:clamp(24px,4vw,38px);
  border-color:#9b6478;
  background:linear-gradient(125deg,#281724 0%,#171019 64%,#11120f 100%);
  box-shadow:inset 3px 0 0 #bd8195,0 12px 32px #0003;
}
.contact-method-primary h2{font-size:clamp(1.3rem,2.2vw,1.65rem)}
.contact-method-primary p{max-width:720px;font-size:1.02rem;line-height:1.8}
.contact-method-primary a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  margin-top:22px;
  padding:12px 18px;
  border:1px solid #a96d82;
  background:#341d2b;
  color:#fff0f5;
  text-decoration:none;
  line-height:1.5;
}
.contact-method-primary a:hover,.contact-method-primary a:focus-visible{
  background:#482638;
  border-color:#e0a0b5;
  outline:2px solid #e0a0b5;
  outline-offset:3px;
}
@media(max-width:640px){
  .contact-method-primary{grid-column:auto;padding:22px}
  .contact-method-primary a{max-width:100%;overflow-wrap:anywhere}
}


/* Contact form — bilingual, responsive and styled to match the dark burgundy portfolio. */
.contact-form-section{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(28px,5vw,64px);
  align-items:start;
  margin:clamp(56px,8vw,104px) 0;
  padding:clamp(24px,4vw,44px);
  border:1px solid #492333;
  background:linear-gradient(145deg,#160c13 0%,#0c090d 70%,#0d100c 100%);
  box-shadow:0 18px 48px #0005,inset 0 1px 0 #f7b4cd12;
}
.contact-form-heading h2{
  margin:12px 0 14px;
  font-family:'Lora',Georgia,serif;
  font-size:clamp(1.7rem,3vw,2.5rem);
  line-height:1.2;
  color:#f2e7ed;
}
.contact-form-heading>p:last-child{
  max-width:34rem;
  color:#c3adb8;
  line-height:1.8;
}
.contact-form{display:grid;gap:18px;min-width:0}
.contact-form-field{display:grid;gap:8px;min-width:0}
.contact-form-field label{color:#ead9e0;font-size:.92rem;font-weight:700}
.contact-form-field input,.contact-form-field textarea{
  width:100%;
  min-width:0;
  border:1px solid #593044;
  border-radius:2px;
  padding:13px 14px;
  background:#09070a;
  color:#f2e7ed;
  font:inherit;
  line-height:1.55;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.contact-form-field textarea{min-height:150px;resize:vertical}
.contact-form-field input::placeholder,.contact-form-field textarea::placeholder{color:#8f7c86;opacity:1}
.contact-form-field input:focus,.contact-form-field textarea:focus{
  outline:none;
  border-color:#c16b89;
  box-shadow:0 0 0 3px #c16b8928;
  background:#100a10;
}
.contact-form-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:50px;
  width:max-content;
  max-width:100%;
  padding:12px 22px;
  color:#f8eaf0;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.contact-form-submit:focus-visible{outline:2px solid #e0a0b5;outline-offset:4px}
.contact-form-note{margin:0;color:#a9949e;font-size:.82rem;line-height:1.65}
.contact-form-honey{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
@media(max-width:760px){
  .contact-form-section{grid-template-columns:minmax(0,1fr);gap:24px;padding:22px}
  .contact-form-submit{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .contact-form-field input,.contact-form-field textarea{transition:none}
}

.contact-form-feedback{
  margin:0;
  padding:13px 15px;
  border:1px solid #b85c7a;
  background:#2b0d1b;
  color:#ffe7ee;
  font-weight:700;
  line-height:1.65;
}
.contact-form-feedback[hidden]{display:none}


/* Footer contact navigation */
.site-footer .footer-contact-link{
  color:#D9B18E;
  font:700 .78rem var(--sans);
  text-decoration:none;
  border-bottom:1px solid rgba(217,177,142,.55);
  padding:6px 0;
  transition:color .2s ease,border-color .2s ease;
}
.site-footer .footer-contact-link:hover,
.site-footer .footer-contact-link:focus-visible{
  color:#fff;
  border-color:#fff;
}
@media(max-width:800px){
  .site-footer{flex-wrap:wrap;padding-top:22px;padding-bottom:22px;}
}


/* Clear, dedicated message-box layout */
.contact-form-section{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:24px;
  padding:clamp(26px,5vw,54px);
  border:1px solid #754056;
  border-radius:5px;
  background:linear-gradient(145deg,#1b0c16 0%,#100a10 68%,#11130f 100%);
  box-shadow:0 22px 60px #0007,inset 0 1px 0 #f7b4cd18;
}
.contact-form-heading{max-width:760px}
.contact-form-heading h2{font-size:clamp(2rem,4vw,3rem)}
.contact-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  min-width:0;
  padding:clamp(18px,3vw,32px);
  border:1px solid #593044;
  border-radius:4px;
  background:#0b080c;
  box-shadow:inset 0 1px 0 #fff08;
}
.contact-form-field{min-width:0}
.contact-form-field input,.contact-form-field textarea{
  box-sizing:border-box;
  border-radius:4px;
  min-height:50px;
}
.contact-form-field textarea{min-height:210px}
.contact-message-field{grid-column:1/-1}
.contact-form-feedback,.contact-form-actions,.contact-form-note{grid-column:1/-1}
.contact-form-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
}
.contact-form-submit{width:auto}
.contact-form-discard{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:12px 22px;
  border:1px solid #806574;
  border-radius:2px;
  background:transparent;
  color:#e5d6de;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.contact-form-discard:hover,.contact-form-discard:focus-visible{
  background:#2b1722;
  border-color:#d09aaf;
  color:#fff;
}
.contact-form-discard:focus-visible{outline:2px solid #e0a0b5;outline-offset:4px}
@media(max-width:640px){
  .contact-form{grid-template-columns:minmax(0,1fr);padding:18px}
  .contact-message-field,.contact-form-feedback,.contact-form-actions,.contact-form-note{grid-column:1}
  .contact-form-actions{flex-direction:column;align-items:stretch}
  .contact-form-submit,.contact-form-discard{width:100%}
}


/* Responsive navigation and consistent footer links across every page. */
.site-header{position:sticky;top:0}
.menu-toggle{display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;width:46px;height:46px;padding:10px;border:1px solid #754056;background:#160e17;color:var(--paper);cursor:pointer;z-index:32}
.menu-toggle span{display:block;width:21px;height:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.site-header nav#primary-navigation{display:flex;align-items:center}
.footer-nav{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 24px}
.footer-nav a{color:#d8c8d0;text-decoration:none;font-family:var(--mono);font-size:.75rem;font-weight:700}
.footer-nav a:hover,.footer-nav a:focus-visible{color:var(--copper);text-decoration:underline;text-underline-offset:5px}
.site-footer{flex-wrap:wrap;row-gap:18px}
@media(max-width:900px){
  .site-header{display:flex;gap:14px}
  .site-header .wordmark.full-name{margin-left:auto}
  .site-header .language-toggle{order:3;flex:0 0 auto}
  .menu-toggle{display:flex;order:4;flex:0 0 46px}
  .site-header nav#primary-navigation{display:none;position:absolute;top:100%;right:4vw;left:4vw;z-index:31;flex-direction:column;align-items:stretch;gap:0;padding:10px;border:1px solid #754056;background:#120b14;box-shadow:0 18px 38px #000b}
  .site-header nav#primary-navigation.is-open{display:flex}
  .site-header nav#primary-navigation a{display:block;padding:15px 16px;font-size:.9rem;border-bottom:1px solid #493241}
  .site-header nav#primary-navigation a:last-child{border-bottom:0}
  .site-footer{align-items:flex-start}
  .footer-nav{width:100%;justify-content:flex-start;order:3}
}
@media(max-width:560px){
  .site-header{padding:0 4vw;gap:9px}
  .site-header .wordmark.full-name{font-size:.78rem;white-space:normal;text-align:right;line-height:1.2}
  .menu-toggle{width:42px;height:42px;flex-basis:42px}
  .site-header .language-toggle{min-width:0;padding:7px 8px;font-size:.62rem}
  .site-header .language-label{font-size:.58rem}
  .footer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .footer-nav a{padding:8px 0}
  .site-footer .copyright-line,.site-footer .footer-note{width:100%}
}
@media(prefers-reduced-motion:reduce){.menu-toggle span{transition:none}}

@media(max-width:420px){
  .site-header .language-toggle{min-width:0;width:auto;height:34px;min-height:34px;padding:4px 8px}
  .site-header .language-label{display:inline;font-size:.62rem}
}


/* More legible footer navigation across desktop, tablet and mobile. */
.footer-nav{gap:16px clamp(22px,3vw,42px)}
.footer-nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:8px 2px;
  color:#f0e4eb;
  font-size:clamp(.9rem,1.15vw,1.05rem);
  font-weight:800;
  letter-spacing:.015em;
  text-decoration:underline;
  text-decoration-color:#b56b7a88;
  text-underline-offset:6px;
}
.footer-nav a:hover,.footer-nav a:focus-visible{
  color:#fff;
  text-decoration-color:#d99aaa;
}
@media(max-width:900px){
  .footer-nav{gap:10px 24px}
  .footer-nav a{font-size:1rem;min-height:46px}
}
@media(max-width:560px){
  .footer-nav{gap:8px 18px}
  .footer-nav a{font-size:.98rem;min-height:48px}
}


/* Compact language switch beside the hamburger menu on smaller screens. */
@media(max-width:900px){
  .site-header .language-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    min-height:36px;
    height:36px;
    padding:5px 9px;
    font-size:.65rem;
    letter-spacing:.04em;
    border-radius:4px;
  }
}
@media(max-width:560px){
  .site-header .language-toggle{height:34px;min-height:34px;padding:4px 8px;font-size:.62rem}
}


/* Collapsible skill categories */
.skills-card{
  padding:0;
  overflow:hidden;
}
.skills-card-summary{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:"number toggle" "title toggle";
  align-items:center;
  gap:5px 16px;
  min-height:104px;
  padding:20px clamp(18px,2.5vw,28px);
  cursor:pointer;
  list-style:none;
}
.skills-card-summary::-webkit-details-marker{display:none}
.skills-card-summary::marker{content:""}
.skills-card-summary .skills-number{grid-area:number}
.skills-card-summary h4{
  grid-area:title;
  margin:0;
}
.skills-toggle{
  grid-area:toggle;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid rgba(206,129,71,.65);
  border-radius:50%;
  color:#f1e4d3;
  transition:transform .2s ease,background .2s ease;
}
.skills-toggle::before{
  content:"+";
  font:300 1.8rem/1 var(--sans);
}
.skills-card[open] .skills-toggle{
  background:rgba(206,129,71,.16);
}
.skills-card[open] .skills-toggle::before{content:"−"}
.skills-card > .skill-rows{
  margin:0;
  padding:0 clamp(18px,2.5vw,28px) 22px;
}
.skills-card-summary:focus-visible{
  outline:2px solid #ce8147;
  outline-offset:-4px;
}
.skills-card-summary:hover .skills-toggle{
  background:rgba(206,129,71,.18);
}
@media(max-width:420px){
  .skills-card-summary{min-height:92px;padding:17px 16px;gap:5px 10px}
  .skills-toggle{width:38px;height:38px}
  .skills-card > .skill-rows{padding:0 16px 18px}
}
@media(prefers-reduced-motion:reduce){
  .skills-toggle{transition:none}
}


/* Subject icons beside every collapsible skill-category heading. */
.skills-card-title{grid-area:title;display:flex;align-items:center;gap:12px;min-width:0}
.skills-card-title h4{grid-area:auto;min-width:0}
.skills-category-icon{display:inline-grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border:1px solid rgba(206,129,71,.55);border-radius:50%;background:rgba(206,129,71,.10);font-size:1.2rem;line-height:1}
@media(max-width:420px){.skills-card-title{gap:9px}.skills-category-icon{flex-basis:36px;width:36px;height:36px;font-size:1.05rem}}


/* Keep skill-card headings readable on narrow screens in both languages. */
.skills-card-title{flex:1;min-width:0;gap:10px}
.skills-card-title h4{font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.28;overflow-wrap:break-word;hyphens:auto}
.skills-card-summary{grid-template-columns:minmax(0,1fr) 42px;column-gap:12px}
.skills-card-summary .skills-number{font-size:clamp(.58rem,.75vw,.7rem);letter-spacing:.07em;overflow-wrap:anywhere}
@media(max-width:560px){
  .skills-card-summary{grid-template-columns:minmax(0,1fr) 38px;padding:16px 14px;column-gap:9px}
  .skills-card-title{gap:8px}
  .skills-card-title h4{font-size:1rem;line-height:1.25}
  .skills-category-icon{flex-basis:36px;width:36px;height:36px}
  .skills-toggle{width:36px;height:36px}
}
@media(max-width:360px){
  .skills-card-summary{grid-template-columns:minmax(0,1fr) 34px;padding:14px 11px;column-gap:7px}
  .skills-card-title{gap:7px}
  .skills-card-title h4{font-size:.94rem}
  .skills-category-icon{flex-basis:32px;width:32px;height:32px;font-size:.95rem}
  .skills-toggle{width:32px;height:32px}
}