/* Madison Clem portfolio: editorial scrapbook layer, 2026 */
:root{--paper:#faf8f1;--paper2:#f5f1e8;--ink:#2b2431;--muted:#695b68;--soft:#8b7e88;--blue:#cde8ee;--deepblue:#527c9f;--lilac:#e9dbea;--plum:#462b53;--line:#ddd3d9;--butter:#f9e19a;--pink:#f5bdd2;--lime:#d0df9a;--font:'DM Sans',Arial,sans-serif;--serif:'Instrument Serif',Georgia,serif}
body{background:var(--paper);color:var(--ink)}.shell{max-width:1290px}
.site-header{height:79px;background:#faf8f2f2;border-bottom:1px solid #2b243116}.brand{letter-spacing:-.09em;font-size:24px}.brand span:not(.brand-dot){font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.17em;letter-spacing:-.035em}.brand-dot{color:#b75b88}.header-nav{gap:28px;letter-spacing:.015em;text-transform:none;font-size:13px;font-weight:700}.header-nav a:hover{color:#8e4878}.header-nav .nav-cta{background:#f5bdd2;border:1px solid #5e3b56;border-radius:99px;padding:10px 19px}.nav-cta:hover{background:#f9cde0}
.editorial-ribbon{background:var(--blue);height:30px;border-bottom:1px solid #2b24311a}.ribbon-inner{height:100%;display:flex;align-items:center;justify-content:space-between;font-size:9px;font-weight:800;letter-spacing:.12em;color:#37545a;white-space:nowrap}.ribbon-inner i{font-style:normal;color:#b55e83;padding:0 6px}.ribbon-inner span:nth-child(2){font-weight:600;letter-spacing:.1em}
.home-hero{position:relative;min-height:740px;overflow:visible;padding-top:53px;padding-bottom:104px;isolation:isolate}.home-hero::before{content:"";position:absolute;left:calc(50% - 50vw);width:100vw;top:0;bottom:0;z-index:-1;pointer-events:none;background-image:linear-gradient(to right,rgba(84,73,76,.055) 1px,transparent 1px),linear-gradient(to bottom,rgba(84,73,76,.055) 1px,transparent 1px);background-size:28px 28px;background-color:#fdfbf6;mask-image:linear-gradient(to bottom,black 82%,transparent 100%)}.home-hero:after{content:"";position:absolute;width:100vw;height:25px;left:calc(50% - 50vw);bottom:0;background:repeating-linear-gradient(90deg,#d0df9a 0,#d0df9a 70px,#bfcf8a 70px,#bfcf8a 72px);border-top:1px solid #81946355;border-bottom:1px solid #81946355;z-index:-1}
.hero-brow{margin-bottom:58px;align-items:center}.hero-kicker{background:#eff7f0;border:1px solid #abbeb8;padding:7px 13px 7px 9px;border-radius:3px;display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.1em}.little-flower{font-size:16px;color:#7daa75;line-height:1}.hero-brow-note{font-family:var(--serif);font-style:italic;font-size:20px;color:#70606b}.hero-main{grid-template-columns:1.06fr .94fr;align-items:center;gap:4.6%}
.hero-title{font-size:clamp(64px,6.25vw,92px);letter-spacing:-.084em;font-weight:650;line-height:1.045;margin-bottom:28px}.hero-title .name-mark{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.055em;background:linear-gradient(to bottom,transparent 59%,#f4b5cf 59%,#f4b5cf 87%,transparent 87%);padding:0 4px 0 2px;white-space:nowrap}.hero-title .hero-last{font-size:1.04em;color:#6a5892;font-weight:400;white-space:nowrap}.hero-intro{max-width:590px;font-size:16px;line-height:1.85;color:#584e57}.hero-intro strong{font-weight:750;color:#2d2431}.hero-actions{margin-top:28px;gap:25px}.btn{background:var(--plum);border-color:var(--plum);color:#fff;font-size:11px;letter-spacing:.08em;border-radius:100px}.btn:hover{background:#5d3c6c}.link-inline{color:var(--plum);font-size:13px}.hero-small-note{margin-top:51px;color:#6f5c64;letter-spacing:.12em;font-size:10px;font-weight:750}
.hero-art{min-height:560px;transform:rotate(-1deg)}.art-halo{background:#d6eef2;border:1px solid #b1d9e0;width:85%;height:86%;border-radius:50%;top:3%;left:10%;filter:none}.art-window{border-radius:11px;width:85%;height:381px;left:6%;top:12%;transform:rotate(7deg);box-shadow:12px 16px 0 #d7c4de,0 34px 70px #2a203220;border:1px solid #453d4c44;transition:transform .45s,box-shadow .45s}.art-window:hover{transform:rotate(3deg) translateY(-8px);box-shadow:15px 20px 0 #d7c4de,0 40px 76px #2a203228}.art-window-body{background:#28183d}.art-window-body .mock-title{font-family:var(--serif);font-size:45px}.art-window .window-url{font-family:var(--font);font-size:9px}.art-note{width:52%;top:62%;right:-1%;transform:rotate(-8deg);border:1px solid #4c394022;border-radius:2px;box-shadow:10px 10px 0 #eac2d1,0 22px 44px #2a20321a;padding:21px 22px}.art-note:before{content:"";position:absolute;width:60px;height:17px;top:-9px;left:35%;transform:rotate(4deg);background:#f3db8bbe}.art-note small{letter-spacing:.15em;color:#8b687d}.art-note strong{font-size:29px;font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.04em}.art-stamp{height:104px;width:104px;top:0;right:1%;background:#f7dfa0;color:#2d2431;transform:rotate(15deg);box-shadow:0 0 0 3px #f7dfa0,0 0 0 4px #58475c55}.art-stamp b{font-family:var(--serif);font-size:35px;font-weight:400;line-height:.95}.art-caption{font-family:var(--serif);font-style:italic;font-size:18px;right:15%;bottom:4%;color:#665360}.paperclip{position:absolute;z-index:5;color:#ad6082;font-size:76px;left:-2%;top:3%;transform:rotate(11deg);font-family:var(--serif);pointer-events:none}.art-little-label{position:absolute;left:-4%;bottom:16%;z-index:5;padding:12px 15px;background:#d0df9a;color:#374130;box-shadow:5px 6px 0 #31422c18;font-size:10px;font-weight:800;letter-spacing:.12em;transform:rotate(-9deg)}.art-little-label span{font-size:15px;margin-left:12px}
.numbers{background:#f1f5e8;border-bottom:1px solid #bfcba8;border-top:0}.numbers-inner{gap:0}.number{padding:25px 24px;border-right:1px dashed #a9ba9d}.number:first-child{padding-left:0}.number:last-child{border-right:none}.number strong{font-family:var(--serif);font-size:45px;letter-spacing:-.045em;font-weight:400;color:#4d4864}.number p{font-size:12px;font-weight:600;line-height:1.5;color:#63596a;max-width:250px}
.work{padding-top:107px;padding-bottom:108px}.section-label{font-size:10px;letter-spacing:.19em;color:#8c587c;font-weight:800}.section-heading{font-size:clamp(45px,5.2vw,79px);font-weight:650;color:#302335}.section-heading .serif{color:#a65e85}.section-aside{color:#756673;max-width:325px}.section-head{margin-bottom:56px}
.file-shelf-label{display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:800;letter-spacing:.14em;color:#655265;margin-bottom:11px}.shelf-spark{color:#d383a4;margin-right:7px;font-size:16px}.folder-nav{position:relative;display:flex;gap:7px;align-items:end;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#ceb8c9 transparent;overflow-y:hidden;padding:9px 2px 0;margin:0 0 35px;border-bottom:2px solid #6b5564;scroll-snap-type:x proximity}.folder-tab{position:relative;min-width:158px;flex:1 0 158px;max-width:206px;min-height:71px;padding:14px 14px 11px;display:flex;flex-direction:column;justify-content:end;gap:0;background:#e3edf1;border:1px solid #755b6d99;border-bottom:0;border-radius:14px 14px 0 0;box-shadow:0 -2px 5px #382d4010;transition:transform .22s,background .22s,min-height .22s;scroll-snap-align:start;font-size:13px;font-weight:800;line-height:1.15;letter-spacing:-.02em;color:#3b2b42}.folder-tab:hover,.folder-tab.is-selected,.folder-tab:focus-visible{min-height:78px;transform:translateY(-2px);z-index:1}.folder-tab .folder-number{position:absolute;right:12px;top:9px;opacity:.55;font-size:10px}.folder-tab small{font-size:8px;letter-spacing:.15em;font-weight:800;margin-top:4px;color:#6e556c}.folder-1{background:#e5c0dc}.folder-2{background:#dbe5a3}.folder-3{background:#bde1e9}.folder-4{background:#f4d29c}.folder-5{background:#e8dfed}.folder-6{background:#d0e4d5}.folder-7{background:#efbfd0}
.work-grid{gap:67px 34px}.project{position:relative;padding-top:33px;scroll-margin-top:118px;transition:filter .25s}.project::before{content:attr(data-tab);position:absolute;top:0;left:0;display:flex;align-items:center;height:35px;min-width:195px;max-width:54%;padding:0 19px;background:#e5c0dc;border:1px solid #8b6b7c70;border-bottom:0;border-radius:13px 22px 0 0;font-weight:800;font-size:9px;letter-spacing:.12em;color:#4c3950;clip-path:polygon(0 0,84% 0,96% 35%,100% 100%,0 100%)}.project::after{content:"";position:absolute;left:8px;right:8px;top:37px;height:340px;z-index:-1;border-radius:0 12px 12px 12px;background:#66515e10;transform:translate(8px,9px);transition:transform .25s}.project:hover:after,.project.is-peeking:after{transform:translate(11px,13px)}.project-dsp::before{background:#e5c0dc}.project-fund::before{background:#dbe5a3}.project-deca::before{background:#bde1e9}.project-stocks::before{background:#f4d29c}.project-planner::before{background:#e8dfed}
.project-visual{height:370px;border-radius:0 14px 14px 14px;border:1px solid #715d6b77;transition:transform .3s,box-shadow .3s}.project-visual:hover,.project.is-peeking .project-visual{transform:translateY(-5px);box-shadow:0 18px 32px #33243115}.project-visual .inner{transition:transform .4s cubic-bezier(.2,.8,.2,1)}.visual-badge{display:block!important;top:17px;left:18px;font-size:9px;border:1px solid #57455d22;background:#fffdf8;padding:8px 12px;letter-spacing:.08em}.project-name{font-weight:700;letter-spacing:-.055em;font-size:27px}.project-description{font-size:14px;color:#776a77;line-height:1.75}.project-num{font-family:var(--serif);font-size:20px;color:#9f7090}.project-after{margin-top:26px}.project-links{gap:14px;margin-top:11px}.project-links a{font-size:12px;border-bottom:1px solid #c6acbc;color:#6b4165;line-height:1.6}.project-links a:hover{color:#b45e88;border-color:currentColor}
.work-grid .visual-dsp{background:#f1dfeb}.work-grid .visual-fund{background:#e9e7b9}.work-grid .visual-deca{background:#d7e8e8}.work-grid .visual-stocks{background:#f6e0c8}.work-grid .visual-planner{background:#e4d6ea}
.about{background:#d5ebef;padding:112px 0;position:relative;margin-top:0;border-top:1px solid #8eb8c155;border-bottom:1px solid #8eb8c155}.about::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.33;background-image:linear-gradient(#9eb2b6 1px,transparent 1px),linear-gradient(90deg,#9eb2b6 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(100deg,#0009,transparent 67%)}.about-grid{position:relative;grid-template-columns:.9fr 1.1fr;gap:10%}.about h2{color:#2d2835;font-size:clamp(52px,5vw,79px);font-weight:650}.about h2 .serif{color:#8b6089}.about-text{font-size:16px;color:#49414c}.about-tags span{background:#fff9f8;border:1px solid #a0a2a5;border-radius:3px;transform:rotate(-2deg);color:#634763;box-shadow:2px 3px 0 #667a7117}.about-tags span:nth-child(2n){transform:rotate(2deg);background:#f3e2ec}.about-notecard{position:relative;background:#fffdf6;border:1px solid #a9979f;box-shadow:9px 11px 0 #bfd4d7;margin-top:62px;max-width:340px;padding:26px 32px 28px;transform:rotate(-5deg)}.about-notecard .paper-pin{position:absolute;top:-19px;right:16px;font-size:27px;color:#d06f96}.about-notecard small{letter-spacing:.16em;font-size:9px;font-weight:800;color:#8b5678}.about-notecard p{font-family:var(--serif);font-size:27px;line-height:1.17;margin:17px 0 0}.about-notecard em{font-style:italic;color:#90618e}.notecard-corner{position:absolute;right:15px;bottom:6px;font-family:var(--serif);font-size:20px;color:#cdaac2}
.experience{padding-top:110px;padding-bottom:110px}.experience h2{font-weight:650}.experience h2 .serif{color:#a76489}.timeline-row{border-top:1px dashed #b9a7b5;padding-top:23px;padding-bottom:23px}.timeline-row:last-child{border-bottom:1px dashed #b9a7b5}.timeline-year{color:#9a6285;font-weight:800}.timeline-row h3{color:#33283d}
.contact{position:relative;overflow:hidden;background:#3e2b4d;color:#fff9fb;padding-top:105px}.contact::before{content:"";position:absolute;width:380px;height:380px;border-radius:50%;right:-150px;top:-150px;background:#d39aa048;filter:blur(2px)}.contact .section-label{color:#f8cbac}.contact h2{font-weight:650}.contact h2 .serif{color:#ecc2da}.contact-grid{position:relative;grid-template-columns:1.1fr .55fr .7fr;gap:5%;align-items:start}.contact-grid>p{font-size:15px;color:#f7e7f5;line-height:1.8}.contact .btn{background:#d3e8ee;color:#332539;border-color:#d3e8ee}.contact .link-inline{color:#eec0da}.tear-note{background:#faf8ee;color:#3c2b42;border:1px solid #e0c7d1;transform:rotate(4deg);padding:17px 20px 20px;box-shadow:7px 8px 0 #a977aa;max-width:290px}.tear-note-head{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.14em;font-weight:800}.tear-note-head span{font-size:19px;color:#d279a2}.tear-note>p{font-size:27px;line-height:1.1;font-family:var(--serif);margin:14px 0 20px;color:inherit}.tear-tabs{display:flex;flex-direction:column;gap:0;border-top:1px dashed #b0a0ad}.tear-tabs a{font-size:10px;font-weight:800;letter-spacing:.07em;padding:10px 7px;border-bottom:1px dashed #b0a0ad;transition:background .2s}.tear-tabs a:hover{background:#f9e2ed}.site-footer{border-color:#d5bbdc55;color:#d6c0dd}
.case-page{background:#faf8f1}.case-hero .case-title em{color:#a65e85}.case-page .project-visual{border-radius:14px}.case-page .section-label{color:#9d6382}.case-page .case-feature{border:1px solid #bda5b622;border-radius:20px;overflow:hidden}.case-page .case-title{color:#342a3d}.case-page .case-story h2{color:#3d3042}.case-page .case-callout{background:#ebdde9;border-left:4px solid #af7299}.case-page .decision-area{background:#e1ebeb}.case-page .next-up a:hover{background:#eff0e9}
@media(min-width:1500px){.hero-title{font-size:94px}}
@media(max-width:1150px){.hero-title{font-size:clamp(57px,6.2vw,78px)}.hero-art{min-height:470px}.art-window{height:345px}.art-note{top:61%}.contact-grid{grid-template-columns:1fr 1fr}.tear-note{grid-column:2;justify-self:end;margin-top:-35px}.folder-tab{min-width:150px;flex-basis:150px}}
@media(max-width:800px){.editorial-ribbon{height:27px}.ribbon-inner{justify-content:center}.ribbon-inner span:not(:first-child){display:none}.home-hero{padding-top:38px;padding-bottom:74px}.hero-brow{margin-bottom:32px}.hero-brow-note{display:none}.hero-main{grid-template-columns:1fr;gap:15px}.hero-title{font-size:clamp(50px,9vw,74px);margin-bottom:26px}.hero-art{height:465px;min-height:465px;max-width:540px;margin:24px auto}.art-window{top:7%;left:7%;height:355px}.art-note{top:62%;right:0}.art-caption{bottom:0}.art-little-label{bottom:8%}.numbers-inner{grid-template-columns:repeat(3,1fr)}.number{padding:22px 14px}.number strong{font-size:35px}.number p{font-size:10px}.work{padding-top:78px}.section-head{margin-bottom:30px}.work-grid{grid-template-columns:1fr;max-width:690px;margin:0 auto}.project-visual{height:380px}.about-grid{grid-template-columns:1fr;gap:28px}.about-notecard{margin-top:30px;margin-bottom:25px}.contact-grid{grid-template-columns:1fr 1fr}.tear-note{grid-column:2;margin-top:0}.experience{padding-top:75px;padding-bottom:75px}}
@media(max-width:540px){.site-header{height:69px}.hero-brow{margin-bottom:22px}.hero-kicker{font-size:9px}.hero-title{font-size:clamp(45px,11.4vw,62px);line-height:1.08;letter-spacing:-.09em}.hero-title .hero-last{font-size:1.06em}.hero-title .name-mark{white-space:normal}.hero-intro{font-size:14px;line-height:1.78}.hero-actions{display:flex;align-items:start;gap:13px;flex-direction:column}.hero-small-note{margin-top:36px}.hero-art{height:345px;min-height:345px;max-width:370px;margin-top:35px}.art-halo{width:80%;height:80%;left:10%;top:3%}.art-window{width:88%;height:250px;top:10%;left:2%;transform:rotate(4deg)}.art-window-body{padding:16px}.art-window-body .mock-title{font-size:29px}.art-stamp{height:75px;width:75px;top:-1%;right:0}.art-stamp b{font-size:25px}.art-stamp div{font-size:8px}.art-note{width:58%;top:64%;right:-2%;padding:10px 13px}.art-note strong{font-size:23px}.art-caption{font-size:14px;bottom:-7%;right:12%}.paperclip{font-size:50px}.art-little-label{font-size:7px;padding:8px;left:0;bottom:10%}.numbers-inner{grid-template-columns:1fr}.number,.number:first-child{padding:17px 0;display:flex;align-items:baseline;gap:16px;border-right:0;border-bottom:1px dashed #adba9f}.number:last-child{border-bottom:0}.number strong{font-size:30px;min-width:100px}.number p{font-size:11px;max-width:none}.work{padding-top:62px;padding-bottom:62px}.section-heading{font-size:clamp(48px,12.5vw,61px)}.section-head{gap:12px}.section-aside{font-size:13px}.file-shelf-label{font-size:9px}.folder-nav{margin-bottom:30px;gap:5px}.folder-tab{min-width:130px;max-width:154px;flex-basis:130px;padding:13px 11px 9px;font-size:11px;min-height:65px}.folder-tab small{font-size:7px}.work-grid{gap:47px}.project{padding-top:29px}.project::before{height:31px;min-width:158px;font-size:8px}.project-visual{height:260px}.visual-badge{font-size:8px;padding:5px 8px;top:11px;left:10px}.project-name{font-size:23px}.project-description{font-size:13px}.project-links a{font-size:11px}.about{padding:67px 0}.about h2{font-size:55px}.about-text{font-size:14px}.about-notecard{padding:20px 24px;max-width:290px}.experience{padding-top:66px;padding-bottom:66px}.contact{padding-top:67px}.contact-grid{grid-template-columns:1fr;gap:20px}.tear-note{grid-column:1;justify-self:center;max-width:350px;width:85%;margin:25px 0 30px}.contact h2{font-size:55px}}
@media(prefers-reduced-motion:reduce){.art-window,.folder-tab,.project-visual{transition:none!important;transform:none!important}.about-notecard,.tear-note{transform:none}}

/* v7: remove purely decorative ordinal counts without leaving gaps */
.decision{min-height:174px;padding:28px 26px;display:flex;flex-direction:column;justify-content:center}
.decision h3{margin:0 0 12px}
.project-after{justify-content:flex-start}
.folder-tab{gap:5px}
/* A tactile, understated visual cue to the route from home to campus. */
.location-trail{display:flex;align-items:center;gap:15px;margin-top:39px;padding:21px 23px;background:#fffdf6;border:1px solid #a9b8b7;border-radius:9px;box-shadow:4px 5px 0 #a5cad05e;max-width:540px;transform:rotate(-.5deg)}
.location-city{display:flex;flex-direction:column;gap:4px;flex:none}
.location-city small{font-size:9px;font-weight:800;letter-spacing:.15em;color:#8d7991}
.location-city strong{font-size:16px;letter-spacing:-.035em;font-weight:700;color:#332b3e}
.location-journey{display:flex;gap:8px;flex:1;align-items:center;min-width:38px;color:#ab668c}
.location-journey span{height:1px;flex:1;border-top:1px dashed #ba96ac}
.location-journey b{font-weight:500;font-size:23px;line-height:1}
@media(max-width:540px){.location-trail{gap:10px;padding:15px 13px;margin-top:26px}.location-city small{font-size:8px}.location-city strong{font-size:13px}.location-journey{min-width:26px;gap:3px}.location-journey b{font-size:19px}.decision{min-height:0;padding:24px}}

/* v8: one quiet, centered portfolio title in the top ribbon. */
.ribbon-inner{justify-content:center;text-transform:none;font-size:11px;font-weight:750;letter-spacing:.035em}
@media(max-width:800px){.ribbon-inner{font-size:10px;letter-spacing:.02em}}


/* v10: paper sits around content, never on top of it. */
.visual-dsp .mini-nav{margin-top:64px;position:relative;z-index:1}
.visual-dsp .site-copy{top:calc(20% + 52px);z-index:1}
.project>.fund-sticker,.project>.quiz-chip{position:absolute;top:-6px;right:80px;bottom:auto;left:auto;z-index:3;pointer-events:none;white-space:nowrap}
.project>.fund-sticker{transform:rotate(4deg)}
.project>.quiz-chip{transform:rotate(-3deg);padding:10px 15px;font-size:21px}
.planner-top{gap:12px}

@media(max-width:800px){.folder-tab{min-width:136px;flex-basis:136px}
}

@media(max-width:540px){.project::after{height:235px}
.project>.fund-sticker,.project>.quiz-chip{top:-10px;right:64px;font-size:15px;padding:8px 12px}
.stocks-dashboard{display:flex;flex-direction:column;align-items:flex-start}
.stocks-top{align-self:stretch}
.stocks-dashboard .mock-title{font-size:34px;margin:20px 0 4px}
.stocks-card{position:static;order:3;margin-top:12px}
.stock-chart{order:4}
.folder-nav{padding-right:28px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
.folder-tab{min-width:96px;max-width:128px;flex-basis:96px;padding:12px 9px 9px}
.fund-panel{top:68px}
}


/* v10: type floor. Real labels never drop below 11px, link labels below 12px,
   and secondary text uses the plum family instead of leftover cool slate. */
h1,h2,h3,.case-callout,.more-row strong{text-wrap:balance}
.mock-title{line-height:1.06;letter-spacing:-.052em}
p,dd,figcaption{text-wrap:pretty}

.section-label,.case-kicker,.case-story .story-label,.case-page .section-label{font-size:11px;letter-spacing:.16em;color:#7a4a6c}
.contact .section-label{color:#f8cbac}
.hero-kicker{font-size:11px}
.hero-small-note,.file-shelf-label{font-size:11px;letter-spacing:.12em}
.case-fact dt,.next-up small,.shift-pane small,.case-note strong{font-size:11px;color:#695b68}
.timeline-year{font-size:11px;color:#7a4a6c}
.location-city small,.about-notecard small,.art-note small,.tear-note-head{font-size:11px}
.location-city small{color:#695b68}
.art-little-label{font-size:11px}
.project::before{font-size:11px}
.folder-tab small{font-size:11px;letter-spacing:.1em;color:#5a4458}
.pill{font-size:11px}
.visual-badge{font-size:11px}
.tear-tabs a{font-size:12px}
.project-links a{font-size:12px}
.number p{font-size:12px}
.notecard-corner{color:#8a6680}

.case-crumb{color:#695b68}
.case-crumb a{border-color:#a9979f}
.case-summary,.story-copy p,.case-note p{color:#584e57}
.story-copy strong{color:#2b2431}
.case-caption,.case-asset figcaption,.decision p,.experience-intro,.timeline-row p,.section-subtitle{color:#695b68}
.case-caption{font-size:12px}
.case-page .case-callout{color:#5a4458}

@media(max-width:540px){.folder-tab small{font-size:11px;letter-spacing:.08em}
.visual-badge{font-size:11px;padding:6px 9px}
.hero-kicker{font-size:11px;letter-spacing:.06em}
}


/* v10: the hero browser window is a real link to the live site. */
a.art-window{display:block;color:inherit}
a.art-window:focus-visible{outline:3px solid #497fb0;outline-offset:6px}
@media(max-width:540px){.art-window-body p:not(.mock-title){bottom:auto;top:58px;left:18px;font-size:8px}
}


/* v10: case studies open the folder. Each page carries its project's folder hue
   into a folder-tab kicker, a taped pull-quote notecard, and paper decision cards. */
.case-page[data-case="dsp"]{--folder:#e5c0dc;--folder-shadow:#e5c0dc}
.case-page[data-case="fund"]{--folder:#dbe5a3;--folder-shadow:#dbe5a3}
.case-page[data-case="deca"]{--folder:#bde1e9;--folder-shadow:#bde1e9}
.case-page[data-case="stocks"]{--folder:#f4d29c;--folder-shadow:#f4d29c}
.case-page[data-case="planner"]{--folder:#e8dfed;--folder-shadow:#d7c4de}

.case-intro-grid>div:first-child{position:relative}
.case-intro-grid>div:first-child::before{content:"";position:absolute;left:0;right:0;top:35px;height:2px;background:#6b5564;border-radius:2px}
.case-page .case-kicker{display:inline-flex;align-items:center;height:36px;min-width:190px;padding:0 34px 0 18px;background:var(--folder);border:1px solid #755b6d99;border-bottom:0;border-radius:13px 22px 0 0;clip-path:polygon(0 0,86% 0,97% 38%,100% 100%,0 100%);color:#4c3950;font-size:11px;letter-spacing:.14em}
.case-page .case-title{margin-top:30px}

.case-page .case-callout{position:relative;background:#fffdf6;border:1px solid #a9979f;border-radius:2px;box-shadow:9px 11px 0 var(--folder-shadow);padding:34px 36px 30px;margin:46px 0 44px;max-width:600px;transform:rotate(-2deg);color:#3c2b42}
.case-page .case-callout::before{content:"";position:absolute;width:72px;height:18px;top:-10px;left:42%;transform:rotate(3deg);background:#f3db8bbe}

.case-page .decision-area h2 .serif{color:#a65e85}
.case-page .decision{background:#fffdf6;border:1px solid #cdbfc6;border-radius:2px;box-shadow:6px 7px 0 var(--folder-shadow)}

@media(max-width:540px){.case-page .case-kicker{min-width:0;height:32px;padding:0 30px 0 14px}
.case-intro-grid>div:first-child::before{top:31px}
.case-page .case-callout{padding:28px 24px 24px;margin:38px 6px 36px 0;box-shadow:6px 8px 0 var(--folder-shadow)}
}

@media(prefers-reduced-motion:reduce){.case-page .case-callout{transform:none}
}
/* Case-study feature images hide the badge and arrow, so the sticker takes that top corner instead of covering the mockup. */
.case-feature .fund-sticker,.case-feature .quiz-chip{top:16px;right:20px;bottom:auto}
@media(max-width:540px){.case-feature .fund-sticker,.case-feature .quiz-chip{top:12px;right:14px;font-size:15px;padding:8px 12px}
.case-feature .quiz-window{top:74px}
.case-feature .fund-panel{top:68px}
}
@media(min-width:541px){.case-feature .quiz-window{top:96px}
}


/* v10 polish */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.serif,.case-title em,.hero-title .name-mark,.hero-title .hero-last{word-spacing:.08em}
body{overflow-x:clip}
.stocks-sub em{font-style:normal;opacity:.8}
/* The DSP card's preview sits on pale pink, so its title inks in plum and rose instead of white and gold. */
.visual-dsp .site-copy{color:#462b53}
.visual-dsp .site-copy small{color:#7a4a6c}
.visual-dsp .site-copy .mock-title i{color:#a65e85}
.window-top{color:#6f6371}
.header-nav .nav-cta:hover{color:#2b2431}
.tear-tabs a{letter-spacing:.01em}
/* Keep the "Recent work" strip clear of the hero window caption. */
@media(min-width:801px){.art-little-label{bottom:7%}
}
@media(min-width:801px) and (max-width:1150px){.art-little-label{bottom:-10%;left:0}
}


/* v10: every case study ends with a way to reach Madison, as a taped paper card in the project's folder hue. */
.case-contact{padding:8px 0 64px}
.case-contact-card{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:28px 48px;background:#fffdf6;border:1px solid #a9979f;border-radius:2px;box-shadow:9px 11px 0 var(--folder-shadow,#d7c4de);padding:34px 40px}
.case-contact-card::before{content:"";position:absolute;width:72px;height:18px;top:-10px;left:36px;transform:rotate(-3deg);background:#f3db8bbe}
.case-contact-note small{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;color:#7a4a6c}
.case-contact-note p{font-family:var(--serif);font-size:clamp(30px,3vw,40px);line-height:1.08;letter-spacing:-.03em;color:#2b2431;margin:12px 0 0}
.case-contact-actions{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.case-contact-actions .link-inline{color:#462b53}
@media(max-width:800px){.case-contact-card{grid-template-columns:1fr;padding:30px 26px}
.case-contact{padding-bottom:48px}
}
@media(max-width:540px){.case-contact-card{box-shadow:6px 8px 0 var(--folder-shadow,#d7c4de);padding:28px 22px}
.case-contact-actions .btn{font-size:10.5px;padding:14px 18px;gap:12px}
}


/* v10: a shorter work grid. Card art is about a fifth shorter so all five projects skim faster,
   and each card states Madison's role where the case study confirms it. */
.project-visual{height:290px}
.project::after{height:262px}
.project-role{margin:2px 0 8px;font-size:13px;line-height:1.5;font-weight:600;color:#3c2b42}
.project-role span{display:inline-block;margin-right:8px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#7a4a6c}
@media(max-width:800px){.project-visual{height:310px}
.project::after{height:282px}
}
@media(max-width:540px){.project-visual{height:250px}
.project::after{height:225px}
}
@media(max-width:540px){.work-grid .stocks-dashboard{top:66px}
}


/* v10: on phones the hero collage is a smaller keepsake, so the work starts sooner. */
@media(max-width:540px){.home-hero{padding-bottom:56px}
.hero-small-note{margin-top:26px}
.hero-art{height:272px;min-height:272px;margin-top:20px}
.art-halo{width:72%;height:84%;left:14%;top:2%}
.art-window{width:86%;height:198px;top:10%;left:3%}
.art-window-body{padding:14px}
.art-window-body .mock-title{font-size:24px}
.art-window-body p:not(.mock-title){position:relative;top:auto;left:auto;bottom:auto;margin:8px 0 0;display:inline-block}
.window-url{max-width:56%}
.art-stamp{width:66px;height:66px;top:-3%;right:1%}
.art-stamp b{font-size:20px}
.art-note{width:54%;top:58%;right:-1%;padding:9px 11px}
.art-note small{font-size:9px;margin-bottom:6px}
.art-note strong{font-size:19px}
.art-note .note-lines{margin-top:8px!important;gap:5px}
.art-caption{font-size:13px;bottom:-6%;right:10%}
.art-little-label{bottom:13%}
.paperclip{font-size:40px}
.number,.number:first-child{padding:12px 0}
}
@media(max-width:360px){.art-note small{letter-spacing:.06em}
.art-caption{bottom:-12%;right:auto;left:8%}
}


/* v10: the lower half of each case study stays on the desk. Before/after are two sheets of paper,
   the "after" sheet in the folder hue; the reflection is a taped notecard. All stay straight: they hold reading text. */
.case-page .shift-pane{background:#fffdf6;border:1px solid #cdbfc6;border-radius:2px;box-shadow:6px 7px 0 #e6dde2}
.case-page .shift-pane:last-child{background:var(--folder,#e8dfed);border-color:#a9979f;box-shadow:6px 7px 0 #d7c4de}
.case-page .shift-pane small{color:#7a4a6c}
.case-page .shift-pane p{color:#2b2431}
.case-page .shift-arrow{color:#a65e85}
.case-page .case-note{position:relative;background:#fffdf6;border:1px solid #a9979f;border-radius:2px;box-shadow:8px 10px 0 var(--folder-shadow,#d7c4de);padding:30px 32px 26px;margin-top:44px}
.case-page .case-note::before{content:"";position:absolute;width:72px;height:18px;top:-10px;right:44px;transform:rotate(4deg);background:#f3db8bbe}
.case-page .case-note strong{color:#7a4a6c}
.case-page .case-note p{font-family:var(--serif);font-size:24px;line-height:1.3;letter-spacing:-.01em;color:#2b2431}
@media(max-width:540px){.case-page .case-note{padding:26px 22px 22px;box-shadow:6px 8px 0 var(--folder-shadow,#d7c4de)}
.case-page .case-note p{font-size:21px}
}
.case-page .shift-pane:last-child small{color:#5a4458}


/* v10 polish: browser surfaces carry the palette too. */
::selection{background:#f5bdd2;color:#2b2431}
html{accent-color:#462b53;caret-color:#462b53}
a:focus-visible,button:focus-visible,a.art-window:focus-visible{outline-color:#7a4a6c}
.contact a:focus-visible,.contact button:focus-visible{outline-color:#f5bdd2}
@media(max-width:360px){.project>.fund-sticker,.project>.quiz-chip{right:8px}
}
/* The email address always stays on one line. */
.tear-tabs a[href^="mailto:"],.case-contact-actions a[href^="mailto:"]{white-space:nowrap}
.tear-note{min-width:min(100%,250px)}