/* Carter’s Auto Art — charcoal, steel and the artist’s own pencil lines. */
:root{--accent:#c7cfd2;--muted:#b7bdc0;background:#141617}
body{background:radial-gradient(ellipse at 88% 5%,#343a3c55,transparent 38%),#141617}
header{border-bottom-color:#52595c;position:relative}

.hero{position:relative;isolation:isolate}

h1,h2,h3{font-family:"Segoe UI",Arial,sans-serif;font-weight:700;font-stretch:normal}
h1{font-size:clamp(2.5rem,4.8vw,4.6rem);line-height:1.14;letter-spacing:-.025em}
h2{line-height:1.2;letter-spacing:-.015em}
h3{letter-spacing:0}
.brand{letter-spacing:.09em}
h1 em{color:#d7dddf;position:relative;display:inline-block}
h1 em::after{content:"";display:block;height:8px;margin-top:10px;background:repeating-linear-gradient(174deg,transparent 0 2px,#a5afb17a 2px 3px,transparent 3px 5px);transform:rotate(-1deg)}
.eyebrow{color:#bec8cd;font-family:Consolas,"Courier New",monospace;letter-spacing:.14em}
.button{background:linear-gradient(160deg,#e1e5e6,#a4afb4);border-color:#e0e5e6;border-radius:5px;color:#171b1d;box-shadow:inset 0 1px #ffffff70,0 4px 14px #0002}
.button:hover{background:linear-gradient(160deg,#f0f2f2,#bcc6ca)}
.button.secondary,.card-cta{background:linear-gradient(145deg,#353a3d,#24282a);color:#edf0f1;border-color:#626b70;box-shadow:inset 0 1px #ffffff0b}
.button.secondary:hover,.card-cta:hover{background:#41494d}
.featured,.gallery figure,.commission-panel,.enquiry-form{background:linear-gradient(145deg,#303537,#202426);border-color:#535c60;border-radius:10px;box-shadow:inset 0 1px #ffffff0b,0 16px 35px #0003}
.featured{position:relative;transform:rotate(-.6deg)}
.featured::after{content:"";position:absolute;inset:6px;border:1px solid #ccd4d41c;border-radius:7px;pointer-events:none;transform:rotate(.35deg)}
.art-frame{background:#171b1d;border:1px solid #626b7044;border-radius:4px;padding:12px}
.art-frame:hover{background:#353d41}
.gallery figure{transition:border-color .2s,box-shadow .2s}
.gallery figure:hover{border-color:#889498;box-shadow:inset 0 1px #ffffff12,0 20px 40px #0004}
.paper-crop{box-shadow:0 2px 9px #0004}
.intro-strip{border-color:#4d565a;font-family:"Segoe UI",Arial,sans-serif}
section{border-color:#41494c;position:relative}
.section-top h2::after,#commissions h2::after,#questions h2::after{content:"";display:block;width:76px;height:7px;margin-top:18px;background:repeating-linear-gradient(135deg,#b0babd88 0 1px,transparent 1px 4px)}
.steps li::before{border:1px solid #8e9b9f;background:#1f2527;color:#dce2e4;font-family:Consolas,monospace}
.product-meta,.commission-meta,details{border-color:#535c60}
.portrait-slot{background:repeating-linear-gradient(135deg,#ffffff03 0 1px,transparent 1px 5px),linear-gradient(130deg,#343b3e,#1c2022);border-color:#586165;border-radius:10px}
.portrait-slot .monogram{color:#b5bfc1;font-family:Georgia,serif;font-style:italic;font-weight:400;text-shadow:2px 2px #111;transform:rotate(-7deg)}
input,select,textarea{background:#191e20;border-color:#616c71;border-radius:4px}
dialog{background:#22292c;border-color:#748186;border-radius:10px}
.viewer-controls button,.viewer-top button{background:#343e42;border-color:#657277}
.wall.garage{background:repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 36px),linear-gradient(120deg,#384044,#737e83)}
.builder-credit{color:#b7bfc2}
@media(max-width:760px){.hero::before{width:230px;height:230px;top:20px;right:0;opacity:.12}.featured{transform:none}.hero h1{font-size:clamp(2.35rem,9.5vw,3.8rem);line-height:1.14;letter-spacing:-.02em}}
@media(prefers-reduced-motion:reduce){.gallery figure{transition:none}}

.launch-gallery{grid-template-columns:minmax(0,760px);justify-content:center}.availability-badge{display:inline-block;margin:2px 5px 8px;padding:8px 12px;border:1px solid #7e8b91;border-radius:4px;color:#e1e7e9;font-size:12px;font-weight:700;letter-spacing:.04em}.launch-gallery .fine{padding:0 5px}

/* Portfolio finishing: consistent cards and distinct display captions. */
.gallery{gap:28px;align-items:stretch}
.gallery figure{display:flex;flex-direction:column;padding:16px}
.gallery .art-frame{flex:1;display:grid;align-content:center;min-width:0}
.gallery figcaption{align-items:flex-start;padding:20px 4px 14px;flex-wrap:wrap;line-height:1.45}
.gallery figcaption strong{font-size:18px;font-weight:600}
.gallery figcaption span{padding-top:4px}
.gallery .availability-badge{align-self:flex-start;margin:0 4px 5px;background:#151b1e66}
.portfolio-notice{max-width:880px;line-height:1.75;margin:0 0 28px;padding-left:16px;border-left:2px solid #66767d}
.room{overflow:hidden;border:1px solid #4e5a60;border-radius:10px;background:#23292c}
.wall{border-radius:0;height:350px}
.room figcaption{padding:20px 23px;display:grid;gap:7px}
.room figcaption strong{font-size:20px;letter-spacing:-.015em;color:#edf0f1;font-weight:600}
.room figcaption span{font-size:12px;color:#b7c0c4;line-height:1.6}
@media(max-width:760px){.gallery{gap:22px}.gallery figure{padding:12px}.wall{height:280px}.room figcaption{padding:18px}.commission-meta{flex-wrap:wrap;gap:20px}nav{gap:14px}.nav-cta{white-space:nowrap}}

.email-contact-card{display:grid;gap:15px;width:100%;max-width:400px;padding:24px;border:1px solid #5e6d74;border-radius:10px;background:linear-gradient(140deg,#333c40,#1e2528);box-shadow:inset 0 1px #ffffff12,0 12px 30px #0002}.email-contact-button{justify-content:space-between;min-height:52px;gap:12px}.email-contact-address{font-size:clamp(14px,2vw,17px);line-height:1.6;color:#e1e8eb;overflow-wrap:anywhere;text-align:center;text-decoration:underline;text-underline-offset:5px}.email-contact-address:hover{color:white}@media(max-width:760px){.email-contact-card{padding:20px;max-width:none}}

/* Hand-lettered identity, locally hosted so the title needs no font service. */
@font-face{font-family:CarterSketch;src:url('fonts/carter-sketch.ttf') format('truetype');font-style:normal;font-weight:400 700;font-display:swap}
header{padding-top:21px;padding-bottom:21px}
.brand{letter-spacing:0;flex-shrink:0}
.brand-signature{font-family:CarterSketch,"Segoe Print",cursive;font-size:36px;font-weight:700;line-height:1.1;display:block;transform:rotate(-2deg);color:#edf0f1}
.brand-signature>span{font-size:.8em;margin-left:3px;color:#c7cfd2}
.hero{padding-top:62px;padding-bottom:68px;gap:48px;overflow:clip}
.hero-copy{position:relative;z-index:1;min-width:0}
.signature-title{font-family:CarterSketch,"Segoe Print",cursive;font-weight:700;font-size:clamp(78px,8.8vw,122px);line-height:.84;letter-spacing:-.045em;margin:30px 0 32px;transform:rotate(-3deg);transform-origin:left center;color:#f3f1eb}
.signature-title>span{display:block;width:fit-content}
.signature-title .signature-second{position:relative;margin-left:30px;margin-top:8px;color:#d3dbde;font-size:.92em;white-space:nowrap}
.signature-stroke{position:absolute;display:block;bottom:-17px;left:1%;width:104%;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='22' viewBox='0 0 420 22'%3E%3Cpath d='M4 15Q140 1 410 6M24 20Q220 8 382 11' fill='none' stroke='%23b8c3c8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;opacity:.7}
.hero-tagline{font-size:clamp(19px,2vw,24px);line-height:1.45;color:#e0e4e5;font-weight:500;max-width:370px;margin:34px 0 14px;letter-spacing:-.025em}
.hero-copy>p:not(.hero-tagline):not(.fine){max-width:440px;font-size:16px}
.hero .eyebrow{font-family:"Segoe UI",Arial,sans-serif;letter-spacing:.17em;font-size:10px}
/* White paper becomes transparent charcoal; Jake’s lines remain quiet in the backdrop. */
.hero::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:-90px;top:10px;width:650px;height:480px;max-width:90vw;background:url('artwork/bmw-m3.jpg') center/cover no-repeat;filter:grayscale(1) invert(1) contrast(1.7);mix-blend-mode:screen;opacity:.09;transform:rotate(-13deg);mask-image:radial-gradient(ellipse at center,#000 15%,transparent 70%)}
#on-the-wall{isolation:isolate}
#on-the-wall::before{content:"";position:absolute;z-index:-1;pointer-events:none;right:-3%;top:-30px;width:min(620px,80vw);height:330px;background:url('artwork/porsche-gt2rs.jpg') center/cover no-repeat;filter:grayscale(1) invert(1) contrast(1.7);mix-blend-mode:screen;opacity:.1;transform:rotate(8deg);mask-image:radial-gradient(ellipse at center,#000 15%,transparent 70%)}
.featured{transform:rotate(-1deg);border-color:#657074;box-shadow:0 20px 44px #0004}
.section-top h2::after,#commissions h2::after,#questions h2::after{height:8px;width:88px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='10'%3E%3Cpath d='M2 7Q38 2 97 4M9 9L85 7' fill='none' stroke='%2396a4aa' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") left/contain no-repeat}
@media(max-width:760px){header{gap:18px}.brand-signature{font-size:34px}.hero{padding-top:44px;padding-bottom:48px;gap:36px}.hero .signature-title{font-size:clamp(82px,17vw,116px);line-height:.84;letter-spacing:-.045em;margin:26px 0 32px}.signature-title .signature-second{margin-left:22px}.hero-tagline{font-size:21px;max-width:360px}.hero::before{left:-12%;top:20px;width:115%;max-width:none;height:390px;opacity:.08}.featured{transform:none}#on-the-wall::before{right:0;opacity:.07}.intro-strip{letter-spacing:.1em}}
@media(max-width:360px){nav{gap:10px}.nav-cta{padding:10px}.brand-signature{font-size:31px}.hero .signature-title{font-size:78px}}

/* Studio header and a one-time pencil-drawn C. */
header{position:relative;padding-top:21px;padding-bottom:21px}
html{scroll-padding-top:85px}
.brand{display:flex;align-items:center;gap:12px;min-height:44px}
.brand-mark{display:block;width:44px;height:44px;flex:none;overflow:visible;transition:transform .25s ease}
.mark-letter{fill:#edf0f1;stroke:#edf0f1;stroke-width:.6;stroke-dasharray:1;animation:sketch-c 1.6s ease both}
.mark-underline{fill:none;stroke:#aebcc2;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;animation:sketch-underline .65s .9s ease both}
.brand:hover .brand-mark,.brand:focus-visible .brand-mark{transform:rotate(-7deg)}
.nav-cta{min-height:44px;display:inline-flex;align-items:center;gap:6px;background:#cad3d8;color:#161b1e;border-color:#dce2e5;font-weight:700;transition:background .2s ease}
nav .nav-cta:hover{color:#141617;background:#ecf0f2}
@keyframes sketch-c{0%{fill:transparent;stroke-dashoffset:1}65%{fill:transparent}100%{fill:#edf0f1;stroke-dashoffset:0}}
@keyframes sketch-underline{from{opacity:0;stroke-dashoffset:1}to{opacity:1;stroke-dashoffset:0}}
@media(max-width:760px){header{gap:12px;padding-top:12px;padding-bottom:12px}.brand{gap:10px}.brand-signature{font-size:32px}.brand-mark{width:40px;height:40px}nav{justify-content:space-between;gap:10px}.nav-cta{margin-left:auto;padding:10px 12px}html{scroll-padding-top:85px}}
@media(max-width:360px){.brand-signature{font-size:30px}nav{gap:8px;font-size:11px}.nav-cta{padding:10px}}
@media(prefers-reduced-motion:reduce){.mark-letter,.mark-underline{animation:none}.brand-mark,.nav-cta{transition:none}.brand:hover .brand-mark,.brand:focus-visible .brand-mark{transform:none}}

/* The hero lettering traces the actual title-font outlines, once on arrival. */
.signature-word{position:relative}
.signature-layout{visibility:hidden}
.signature-drawing{position:absolute;left:0;top:-.21em;overflow:visible;display:block;pointer-events:none}
.title-ink{fill:currentColor;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;animation:title-pencil .85s var(--draw-delay) ease both}
.signature-stroke{animation:title-flourish .7s 2.45s ease both;transform-origin:left center}
@keyframes title-pencil{0%{fill-opacity:0;stroke-dashoffset:1}55%{fill-opacity:0}100%{fill-opacity:1;stroke-dashoffset:0}}
@keyframes title-flourish{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media(prefers-reduced-motion:reduce){.title-ink,.signature-stroke{animation:none}}

/* Open sketchbook gallery: the original paper floats directly on the charcoal. */
.gallery{column-gap:52px;row-gap:46px}
.featured,.gallery figure{position:relative;isolation:isolate;background:none;border:0;border-radius:0;padding:10px 0 0;box-shadow:none}
.gallery figure:hover{border:0;box-shadow:none}
.featured::after{content:none}
.featured::before,.gallery figure::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:-26px -20px 58px;background-image:var(--sketch-echo);background-position:center;background-size:115% auto;background-repeat:no-repeat;filter:grayscale(1) invert(1) contrast(1.7);mix-blend-mode:screen;opacity:.1;transform:rotate(-6deg);mask-image:radial-gradient(ellipse at 50% 48%,#000 8%,transparent 72%)}
.gallery figure:nth-child(even)::before{transform:rotate(6deg)}
.featured .art-frame,.gallery .art-frame{position:relative;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transition:transform .25s ease}
.featured .art-frame:hover,.gallery .art-frame:hover{background:none;transform:translateY(-3px)}
.featured .paper-crop,.gallery .paper-crop{border-radius:1px;box-shadow:0 3px 8px #0005,0 18px 38px #0006,0 0 40px #aab8be09;outline:1px solid #ffffff12;outline-offset:0}
.featured .art-frame:focus-visible,.gallery .art-frame:focus-visible{outline:2px solid #d7e0e5;outline-offset:7px}
.featured figcaption{padding:20px 0 0;font-size:11px;line-height:1.7;letter-spacing:.025em}
.gallery figcaption{padding:22px 0 12px;margin:0;border-bottom:1px solid #c8d2d51f;gap:12px;align-items:baseline}
.gallery figcaption strong{font-size:19px;font-weight:500;color:#e8edef;letter-spacing:-.02em}
.gallery figcaption span{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#a9b5bb;padding:0}
.gallery .availability-badge{align-self:flex-start;display:flex;align-items:center;gap:8px;padding:0;margin:12px 0 0;background:none;border:0;border-radius:0;box-shadow:none;color:#aeb9be;font-size:11px;font-weight:400;letter-spacing:.025em;line-height:1.6}
.gallery .availability-badge::before{content:"";width:4px;height:4px;border-radius:50%;background:#899ba3;flex:none}
/* Let the planned pricing and process breathe, without another grey panel. */
.commission-panel{position:relative;isolation:isolate;background:none;border:0;border-radius:0;box-shadow:none;padding:10px 0 10px 28px}
.commission-panel::before{content:"";position:absolute;z-index:-1;inset:-25px;background:radial-gradient(ellipse at 55% 40%,#91a6b00c,transparent 70%);pointer-events:none}
.commission-panel .steps li::before{border:0;border-radius:0;background:none;color:#acbcc4;font-size:18px;font-family:CarterSketch,"Segoe Print",cursive}
.commission-panel .steps li{padding-bottom:30px}
.commission-panel .steps li:last-child{padding-bottom:0}
.commission-panel .commission-meta{border-top:1px solid #c8d2d52b;padding-top:23px;margin-top:28px}
.commission-meta strong{font-size:14px;font-weight:500;line-height:1.5}
@media(max-width:760px){.gallery{gap:36px}.gallery figure{padding:8px 0 0}.gallery figcaption{padding-top:18px}.gallery figcaption strong{font-size:18px}.featured{padding:6px 0 0}.featured figcaption{padding-top:17px}.featured::before,.gallery figure::before{inset:-14px -8px 55px;opacity:.075}.commission-panel{padding:8px 0}.featured .art-frame:hover,.gallery .art-frame:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.featured .art-frame,.gallery .art-frame{transition:none}.featured .art-frame:hover,.gallery .art-frame:hover{transform:none}}