/* =============================================================
   meaghanmalone.com: the portfolio homepage (/) and résumé (/resume)
   Nov 2026. Glass and ink: frosted panels over a slow, soft color field,
   on top of css/fresh.css (paper, plum ink, gold hairlines, the era-color
   ribbon; Instrument Serif headlines, Newsreader reading text, Host Grotesk
   for everything you click, IBM Plex Mono labels).
   Rules of the house:
   - Glass is the interface layer only: the menu, filters, small facts,
     cards that hold lists. Words people read sit on paper.
   - Every moving thing shows something true about the work (a real site
     scrolling, dark mode turning on, pages fanning out) or helps you find
     your way (the menu, the filter, the progress ribbon).
   - Motion stops for anyone who asks their device to reduce it.
   Motion and the filter live in js/portfolio.js. The glass itself, the color
   field, the header, the menu and the footer are shared with every page:
   css/glass.css, which loads just before this file.
   ============================================================= */

.nw{white-space:nowrap}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .contact .glass{background:rgba(74,29,82,.92)}
}

/* small labels (the résumé uses .pf-label too) */
.pf-label{margin:0 0 12px;font:500 .74rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brick)}
.eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 20px;font:500 .76rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--plum)}
.eyebrow span{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--brass);color:var(--brick);font-size:.7rem;letter-spacing:.04em;background:rgba(255,255,255,.5)}
.eyebrow.light{color:#F3E6F0}
.eyebrow.light span{border-color:rgba(201,166,107,.75);color:var(--brass);background:transparent}

/* ============================== hello ============================== */
.hero{padding:clamp(44px,6vw,92px) 0 clamp(52px,6vw,88px)}
.hero .hero-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(36px,5vw,84px);align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:10px;margin:0 0 28px;padding:9px 18px 9px 13px;border-radius:999px;font:500 .76rem var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--plum)}
.hero-badge > span:not(.pulse){color:var(--brass)}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--e2)}
.hero h1{font-size:clamp(2.9rem,5.5vw,5.5rem);line-height:1.01;letter-spacing:-.025em;color:var(--ink)}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .16em;margin:0 -.02em -.16em}
.w > span{display:inline-block}
.shine{background:linear-gradient(100deg,var(--plum) 0%,#A62F6C 28%,var(--e3) 50%,#A62F6C 72%,var(--plum) 100%);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero-lead{margin:28px 0 0;font:400 clamp(1.1rem,1.4vw,1.26rem)/1.62 var(--read);color:var(--ink2);max-width:33rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.pf .btn{border-radius:999px;padding:13px 26px}
.btn .arr{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.glass-btn{background:rgba(255,255,255,.55);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-brd)!important;color:var(--plum);box-shadow:var(--glass-shadow)}
.glass-btn:hover{background:#fff;color:var(--plum)}
.hero-facts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;list-style:none;margin:30px 0 0;padding:0;font:500 .74rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.hero-facts li{display:flex;align-items:center}
.hero-facts li+li::before{content:"✦";color:var(--brass);margin:0 14px;font-size:.8em}
.hero-facts a{color:var(--plum);text-underline-offset:4px}

/* the portrait, with glass notes floating around it */
.hero-art{position:relative;display:flex;justify-content:center;padding:40px 0}
.arch-wrap{position:relative;width:min(100%,396px)}
.arch{position:relative;z-index:1;aspect-ratio:4/5;border-radius:999px 999px 32px 32px;overflow:hidden;background:var(--paper2);box-shadow:0 0 0 1px rgba(255,255,255,.7),0 56px 90px -52px rgba(42,26,51,.75);transform:translate3d(calc(var(--mx,0) * -8px),calc(var(--my,0) * -8px),0);transition:transform .8s var(--ease-out)}
.arch img{width:100%;height:100%;object-fit:cover;object-position:50% 32%}
.arch::after{content:"";position:absolute;inset:10px;border-radius:999px 999px 24px 24px;border:1px solid rgba(255,255,255,.45);pointer-events:none}
.gcard{position:absolute;z-index:3;transform:translate3d(calc(var(--mx,0) * var(--d,20px)),calc(var(--my,0) * var(--d,20px)),0);transition:transform .8s var(--ease-out)}
.gcard > .glass{border-radius:var(--r-md);--glass-bg:rgba(255,255,255,.78)}
.g-now{top:7%;left:-34%;width:232px;--d:24px}
.g-now .glass{display:flex;flex-direction:column;gap:6px;padding:15px 18px 16px}
.g-label{display:flex;align-items:center;gap:8px;font:500 .66rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brick)}
.g-label::before{content:"";width:7px;height:7px;border-radius:50%;background:#2E9C63;box-shadow:0 0 0 3px rgba(46,156,99,.18)}
.g-text{font:500 .98rem/1.35 var(--ui);color:var(--ink)}
.g-stat{bottom:19%;right:-20%;--d:-26px}
.g-stat .glass{display:flex;align-items:center;gap:12px;padding:14px 20px 14px 18px}
.g-stat b{font:400 2.7rem/1 var(--slab);color:var(--plum)}
.g-stat span{font-size:.86rem;line-height:1.3;color:var(--ink2);max-width:9.6rem}
.g-tags{bottom:-1%;left:-18%;--d:16px}
.g-tags .glass{display:flex;align-items:center;gap:10px;padding:10px 18px 10px 12px;border-radius:999px;font:500 .84rem var(--ui);color:var(--ink);white-space:nowrap}
.dots{display:inline-flex}
.dots i{width:17px;height:17px;border-radius:50%;background:var(--c);border:2px solid #fff;margin-left:-6px}
.dots i:first-child{margin-left:0}
.sep{font-style:normal;color:var(--brass)}
.g-spin{top:-4%;right:-10%;--d:-18px}
.spin{width:122px;height:122px;border-radius:50%!important}
.spin svg{display:block;width:100%;height:100%}
.spin text{font:600 12.4px var(--mono);letter-spacing:.04em;fill:var(--plum)}
.spin-text{transform-origin:100px 100px}
.spin-star{fill:var(--brass)}

/* ============================== the capability strip ============================== */
.strip-in{overflow:hidden;padding:17px 0;border-radius:999px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq-track{display:flex;align-items:center;gap:30px;width:max-content;padding-right:30px;font:400 clamp(1.4rem,2.2vw,1.95rem)/1 var(--slab);color:var(--plum);white-space:nowrap}
.mq-track i{font-style:normal;color:var(--brass);font-size:.6em}

/* ============================== sections ============================== */
.work,.help,.me{padding-top:clamp(96px,11vw,156px)}
.sec-top{max-width:48rem;margin-bottom:clamp(28px,4vw,40px)}
.sec-top h2,.me-copy h2,.contact h2{font-size:clamp(2.5rem,4.9vw,4.2rem);line-height:1.03;letter-spacing:-.02em}
.sec-intro{margin:20px 0 0;font:400 1.16rem/1.6 var(--read);color:var(--ink2);max-width:40rem}

/* ---------- the work filter: a glass segmented control ---------- */
.work-filter{margin-bottom:clamp(34px,4.5vw,56px)}
.seg{position:relative;display:inline-flex;gap:2px;max-width:100%;padding:6px;border-radius:999px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.seg::-webkit-scrollbar{display:none}
.seg-ind{position:absolute;z-index:0;top:0;left:0;width:0;height:46px;border-radius:999px;background:var(--plum);box-shadow:0 10px 22px -12px rgba(74,29,82,.9);transition:transform .55s var(--spring),width .55s var(--spring),height .55s var(--spring)}
.chip{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:8px 10px 8px 18px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:500 .92rem var(--ui);cursor:pointer;transition:color .3s}
.chip:hover{color:var(--plum)}
.chip .n{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 7px;border-radius:999px;background:rgba(74,29,82,.07);font:500 .74rem var(--mono);color:var(--ink2);transition:background .3s,color .3s}
.chip[aria-pressed="true"]{color:#fff}
.chip[aria-pressed="true"] .n{background:rgba(255,255,255,.18);color:#fff}
html:not(.js) .chip[aria-pressed="true"]{background:var(--plum)}
.chip:focus-visible{outline:3px solid var(--lavender);outline-offset:2px}

/* ---------- the work grid ---------- */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(56px,6vw,92px) clamp(24px,3.4vw,52px)}
.proj{position:relative;display:flex;flex-direction:column;gap:24px}
.proj.feature,.proj.writing{grid-column:1 / -1}
.proj.feature{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(26px,4vw,60px);align-items:center}
.proj h3{font-size:clamp(1.8rem,2.6vw,2.3rem);line-height:1.06}
.proj.feature h3{font-size:clamp(2.2rem,3.8vw,3.2rem)}
.proj h3 a{color:inherit;text-decoration:none}
.proj h3 a::after{content:"";position:absolute;inset:0;z-index:6;border-radius:var(--r-lg)}
.proj h3 a:focus-visible{outline:none}
.proj:has(h3 a:focus-visible) .scene,.proj.writing:has(h3 a:focus-visible){outline:3px solid var(--lavender);outline-offset:5px}
.proj-text{display:flex;flex-direction:column;gap:10px}
.proj-text > p:not(.tags):not(.facts){margin:0;font-size:1.02rem;line-height:1.6;color:var(--ink2);max-width:36rem}
.tags{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0!important}
.tags span{font:500 .7rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brick)}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0!important}
.facts span{padding:6px 13px;border-radius:999px;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(74,29,82,.05);font-size:.84rem;color:var(--ink2)}
.facts b{font:400 1.1rem/1 var(--slab);color:var(--plum);margin-right:3px}
.proj .go{display:inline-flex;align-items:center;gap:10px;margin-top:4px;font:600 .8rem var(--ui);letter-spacing:var(--track);text-transform:uppercase;color:var(--plum);text-decoration:none}
.proj .go svg{width:30px;height:10px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease-out)}
.proj:hover .proj .go svg{transform:translateX(6px)}

/* the stage each project sits on */
.scene{position:relative;aspect-ratio:16/11;border-radius:var(--r-lg);overflow:hidden;background:var(--bg);isolation:isolate;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 40px 70px -56px rgba(42,26,51,.7);transition:box-shadow .5s}
.feature .scene{aspect-ratio:16/10.6}
.proj:hover .scene{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 50px 80px -50px rgba(42,26,51,.75)}
.win{position:absolute;z-index:2;margin:0;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.05),0 36px 60px -28px rgba(20,8,30,.55);transition:transform .8s var(--ease-out)}
.win .bar{display:flex;align-items:center;gap:5px;height:24px;padding:0 10px;background:#F4F0ED;border-bottom:1px solid rgba(0,0,0,.06)}
.win .bar i{width:7px;height:7px;border-radius:50%;background:#DCD4CF}
.win .bar i:nth-child(1){background:#EFA39A}
.win .bar i:nth-child(2){background:#F1D08B}
.win .bar i:nth-child(3){background:#A8D29F}
.url{flex:0 1 auto;max-width:62%;margin-left:8px;padding:3px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:999px;background:#fff;font:500 .6rem var(--mono);letter-spacing:.03em;color:#8D8189}
.desk{left:7%;top:10%;width:72%}
.desk .shot{position:relative;aspect-ratio:16/10;overflow:hidden}
.phone{right:6%;bottom:-8%;width:20%;border-radius:20px;border:4px solid #1F1823;background:#1F1823;transform:rotate(4deg)}
.phone .shot{position:relative;aspect-ratio:9/18.5;overflow:hidden;border-radius:15px;background:#fff}
.shot img{display:block;width:100%;height:auto}
.shot.glide img{transform:translate3d(0,0,0);transition:transform 1.6s var(--ease-out);will-change:transform}
.proj.playing .shot.glide img{transform:translate3d(0,var(--shift,0px),0);transition:transform var(--dur,8s) cubic-bezier(.45,.05,.55,.95)}
.proj:hover .desk{transform:translateY(-6px)}
.proj:hover .phone{transform:translateY(-14px) rotate(1.5deg)}

/* one glass fact per stage */
.sc-chip{position:absolute;z-index:5;left:7%;bottom:18px;display:inline-flex;align-items:center;gap:9px;padding:8px 15px 8px 9px;border-radius:999px;font:500 .8rem var(--ui);color:var(--ink);--glass-bg:rgba(255,255,255,.62)}
.scene-mhs .sc-chip,.scene-hod .sc-chip{--glass-bg:rgba(255,255,255,.16);--glass-brd:rgba(255,255,255,.32);color:#fff}
.ck{position:relative;width:18px;height:18px;flex:none;border-radius:50%;background:#2E9C63}
.ck::after{content:"";position:absolute;left:6px;top:3.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.lk{position:relative;width:13px;height:10px;flex:none;margin:6px 3px 0;border-radius:2.5px;background:var(--plum)}
.lk::before{content:"";position:absolute;left:2px;top:-6.5px;width:5px;height:6px;border:2px solid var(--plum);border-bottom:0;border-radius:5px 5px 0 0}
.daymode{display:inline-grid;grid-template-columns:auto auto;column-gap:9px}
.daymode .sun-ico,.daymode .moon-ico{grid-area:1 / 1;width:18px;height:18px;border-radius:50%}
.sun-ico{background:radial-gradient(circle,#F6B73C 45%,rgba(246,183,60,.35) 46%,rgba(246,183,60,0) 70%)}
.moon-ico{background:#2B2A5C;box-shadow:inset -5px -3px 0 #F3E7C2;opacity:0}
.daymode b{grid-area:1 / 2;font-weight:500}
.daymode .n{opacity:0}
.steps{display:inline-flex;gap:3px}
.steps b{width:9px;height:6px;border-radius:3px;background:rgba(20,36,74,.18)}

/* The Story of English */
.scene-soe .desk{left:6%;top:9%;width:76%}
.scene-soe .phone{right:6.5%;width:19%}
.daynight .night{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0}

/* Manatee High, Classroom Daydream, Site Kit, Teton */
.scene-mhs .desk{left:6%;top:9%;width:73%}
.scene-cd .desk{left:6%;top:9%;width:62%}
.scene-cd .app{right:5%;bottom:9%;width:52%;transform:rotate(-2deg)}
.scene-cd .app .shot{position:relative;aspect-ratio:16/10;overflow:hidden}
.proj:hover .app{transform:translateY(-10px) rotate(-1deg)}
.scene-cd .sc-chip{bottom:auto;top:calc(9% + 4px);left:auto;right:5%}
.scene-kit .desk{left:7%;top:9%;width:72%}
.scene-kit .phone{bottom:-12%}
.scene-tfn .desk{left:7%;top:8%;width:72%}

/* Heart of Darkness: pages fan out like a hand of cards */
.scene-hod .fan{position:absolute;inset:0}
.leaf{position:absolute;left:50%;top:50%;width:52%;height:auto;aspect-ratio:1;border-radius:14px;object-fit:cover;box-shadow:0 34px 50px -26px rgba(0,0,0,.65);transition:transform .9s var(--spring)}
.k1{z-index:3;transform:translate(-50%,-53%) rotate(-3deg)}
.k2{z-index:2;transform:translate(-47%,-56%) rotate(4deg)}
.k3{z-index:1;transform:translate(-53%,-50%) rotate(9deg)}
.proj.playing .k1{transform:translate(-50%,-58%) rotate(0) scale(1.04)}
.proj.playing .k2{transform:translate(-103%,-48%) rotate(-11deg)}
.proj.playing .k3{transform:translate(3%,-48%) rotate(11deg)}

/* Lock the Drawer: a writing sample on plum */
.proj.writing{background:var(--plum);color:#F7EEF4;border-radius:var(--r-lg);padding:clamp(30px,5vw,68px);overflow:hidden;isolation:isolate}
.proj.writing::before{content:"";position:absolute;z-index:-1;right:-18%;top:-50%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(216,31,103,.35),rgba(216,31,103,0))}
.proj.writing::after{content:"";position:absolute;inset:14px;border:1px solid rgba(201,166,107,.5);border-radius:20px;pointer-events:none}
.writing-in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.writing-copy{display:flex;flex-direction:column;gap:12px}
.writing h3{color:#fff;font-size:clamp(2.4rem,4.4vw,3.6rem)}
.writing blockquote{margin:8px 0;padding-left:22px;border-left:2px solid var(--brass)}
.writing blockquote p{margin:0;font:400 clamp(1.3rem,2.1vw,1.7rem)/1.4 var(--read);color:#fff}
.writing .tags span{color:var(--brass)}
.writing-copy > p:not(.tags){margin:0;color:#E5D7E3;line-height:1.6}
.proj.writing .go{color:#fff}
.drawer-art{justify-self:center;width:100%;max-width:320px;overflow:visible;fill:none;stroke:#F7EEF4;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.drawer-art .cab{fill:rgba(255,255,255,.05)}
.drawer-art .top{fill:rgba(255,255,255,.1)}
.drawer-art .dr{fill:#572962}
.drawer-art .pull{fill:rgba(255,255,255,.14)}
.drawer-art .lockbody{fill:var(--brass);stroke:var(--brass)}
.drawer-art .shackle{stroke:var(--brass);stroke-width:4}
.drawer-art .keyhole{fill:var(--plum);stroke:var(--plum);stroke-width:2.5}
.drawer-art .sparks path{fill:var(--brass);stroke:none;transform-box:fill-box;transform-origin:center;transform:scale(0)}

/* ============================== numbers ============================== */
.numbers{padding-top:clamp(96px,11vw,156px)}
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.num{position:relative;margin:0;padding:30px 26px 28px;border-radius:var(--r-md);display:flex;flex-direction:column;gap:12px;overflow:hidden}
.num::before{content:"";position:absolute;left:26px;top:0;width:46px;height:3px;border-radius:0 0 3px 3px;background:var(--c,var(--plum))}
.num:nth-child(1){--c:var(--e0)}.num:nth-child(2){--c:var(--e2)}.num:nth-child(3){--c:var(--e4)}.num:nth-child(4){--c:var(--e5)}
.num b{font:400 clamp(3rem,5vw,4.6rem)/.9 var(--slab);color:var(--plum);font-variant-numeric:tabular-nums}
.num span{font-size:.97rem;line-height:1.45;color:var(--ink2)}

/* ============================== what I do ============================== */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,22px)}
.tile{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:14px;padding:clamp(26px,3.2vw,40px);border-radius:var(--r-lg);overflow:hidden}
.tile::before{content:"";position:absolute;z-index:-1;right:-90px;top:-90px;width:260px;height:260px;border-radius:50%;background:radial-gradient(closest-side,var(--tsoft),rgba(255,255,255,0));transition:transform .9s var(--ease-out)}
.tile:hover::before{transform:scale(1.3)}
.t1{--tc:var(--e2);--tsoft:rgba(216,31,103,.16)}
.t2{--tc:var(--e0);--tsoft:rgba(143,118,209,.2)}
.t3{--tc:var(--e5);--tsoft:rgba(46,143,184,.18)}
.t4{--tc:var(--e4);--tsoft:rgba(201,130,16,.18)}
.tile-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(74,29,82,.06),0 10px 24px -14px rgba(42,26,51,.4)}
.tile-icon svg{width:44px;height:44px;overflow:visible;fill:none;stroke:var(--plum);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.tile h3{font-size:clamp(1.75rem,2.5vw,2.2rem)}
.tile > p{margin:0;font-size:1.03rem;line-height:1.58;color:var(--ink2);max-width:30rem}
.pills{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:2px 0 0;padding:0}
.pills li{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(74,29,82,.06);font:500 .8rem var(--ui);color:var(--ink)}
.tile-go{align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 0;border:0;background:none;font:600 .8rem var(--ui);letter-spacing:var(--track);text-transform:uppercase;color:var(--plum);cursor:pointer}
.tile-go span{transition:transform .3s var(--ease-out)}
.tile-go:hover span{transform:translateX(5px)}
.tile-go:hover{text-decoration:underline;text-underline-offset:4px}

/* the four drawn icons */
.m-horn{fill:rgba(216,31,103,.12)}
.m-w{stroke:var(--tc)}
.sw rect{stroke:var(--plum)}
.s1 rect{fill:#D9CDF3}
.s2 rect{fill:#F6C3D6}
.s3 rect{fill:#F2D9A8}
.sw path{stroke:rgba(255,255,255,.95)}
.sw{transform-origin:49px 69px}
.pin{fill:var(--plum);stroke:none}
.b-win{fill:rgba(46,143,184,.08)}
.b-dot{fill:var(--tc);stroke:none}
.b-code{stroke:var(--tc)}
.b-caret{fill:var(--plum);stroke:none}
.bk{fill:rgba(201,130,16,.08)}
.bk-page{fill:rgba(201,130,16,.18);transform-origin:48px 50px}
.bk-spark{fill:var(--tc);stroke:none;transform-box:fill-box;transform-origin:center}

/* ============================== about (.me, so it never mixes with the About page styles) ============================== */
.me-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:start}
.me-copy h2{max-width:15ch}
.me-copy > p:not(.eyebrow){margin:22px 0 0;font:400 1.13rem/1.68 var(--read);color:var(--ink);max-width:38rem}
.toolkit{margin-top:38px}
.tk-label{margin:0 0 12px;font:500 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brick)}
.pills.big li{padding:8px 15px;font-size:.86rem;cursor:default;transition:transform .3s var(--spring),background .25s,color .25s}
.pills.big li:hover{transform:translateY(-3px);background:var(--plum);color:#fff}
.me-time{border-radius:var(--r-lg);padding:clamp(26px,3.2vw,40px)}
.me-time h3{font-size:1.9rem;margin-bottom:22px}
.timeline{position:relative;list-style:none;margin:0 0 26px;padding:0 0 0 28px}
.timeline::before{content:"";position:absolute;left:6px;top:8px;bottom:14px;width:2px;border-radius:2px;background:linear-gradient(var(--e0),var(--e1),var(--e2),var(--e3),var(--e4),var(--e5));transform-origin:top}
.timeline li{position:relative;display:flex;flex-direction:column;gap:2px;padding:0 0 17px}
.timeline li::before{content:"";position:absolute;left:-28px;top:4px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--plum)}
.timeline li.edu::before{background:var(--brass);border-color:var(--brass)}
.timeline .yr{font:500 .7rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brick)}
.timeline b{font:600 1rem/1.35 var(--ui);color:var(--ink)}
.timeline .org{font-size:.94rem;color:var(--ink2)}
.me-time .btn.ghost{background:rgba(255,255,255,.6)}

/* ============================== contact ============================== */
.contact{position:relative;isolation:isolate;overflow:hidden;margin-top:clamp(96px,11vw,156px);padding:clamp(72px,9vw,128px) 0;background:var(--plum);color:#F7EEF4}
.contact-glow{position:absolute;z-index:-1;right:-14vw;top:-30vw;width:min(80vw,1000px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(216,31,103,.42),rgba(91,99,214,.2) 55%,rgba(74,29,82,0))}
.contact::before{content:"";position:absolute;z-index:-1;left:-20vw;bottom:-40vw;width:min(70vw,860px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(46,143,184,.28),rgba(46,143,184,0))}
.contact-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,92px);align-items:start}
.contact h2{color:#fff;font-size:clamp(2.3rem,4.3vw,3.7rem)}
.rot{position:relative;display:inline-grid;vertical-align:bottom;transition:width .55s var(--ease-out)}
.rot > span{grid-area:1 / 1;justify-self:start;color:var(--brass);white-space:nowrap;opacity:0;transform:translateY(.42em);transition:opacity .45s ease,transform .6s var(--spring)}
.rot > span.on{opacity:1;transform:none}
.rot > span.out{opacity:0;transform:translateY(-.42em)}
.contact-copy > p:not(.eyebrow){margin:24px 0 0;font:400 1.16rem/1.62 var(--read);color:#EAD9E6;max-width:32rem}
.contact-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 0;list-style:none;margin:28px 0 0;padding:0;font:500 .8rem var(--ui);letter-spacing:var(--track);text-transform:uppercase;color:#EAD9E6}
.contact-links li+li::before{content:"✦";color:var(--brass);margin:0 14px;font-size:.8em}
.contact-links a{color:#fff;text-underline-offset:4px}
.contact-links a:hover{color:var(--brass)}

.pf-form{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(22px,3vw,36px);border-radius:var(--r-lg);--glass-bg:rgba(255,255,255,.08);--glass-brd:rgba(255,255,255,.2);--glass-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 30px 70px -40px rgba(0,0,0,.7)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pf-form label{display:flex;flex-direction:column;gap:7px;font:500 .76rem var(--ui);letter-spacing:var(--track);text-transform:uppercase;color:#EDE2EB}
.pf-form input,.pf-form textarea{min-height:50px;padding:12px 16px;border:1px solid rgba(255,255,255,.22);border-radius:14px;background:rgba(255,255,255,.12);color:#fff;font:400 1rem/1.4 var(--ui);letter-spacing:0;text-transform:none;transition:border-color .2s,box-shadow .2s,background .2s}
.pf-form input::placeholder{color:rgba(255,255,255,.5)}
.pf-form textarea{min-height:140px;resize:vertical}
.pf-form input:focus,.pf-form textarea:focus{outline:none;background:rgba(255,255,255,.18);border-color:var(--brass);box-shadow:0 0 0 4px rgba(201,166,107,.28)}
.pf-form .btn{align-self:flex-start;gap:10px;background:var(--brass);border-color:var(--brass);color:var(--plum)}
.pf-form .btn:hover{background:#fff;border-color:#fff;color:var(--plum)}
.pf-form .btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.pf-form .form-msg{margin:0;min-height:1.4em;color:#fff;font-size:1rem}
.plane{position:absolute;left:150px;bottom:64px;width:52px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linejoin:round;opacity:0;pointer-events:none}

/* ============================== more from me ============================== */
.elsewhere{padding-block:clamp(64px,8vw,104px) clamp(56px,7vw,88px)}
.else-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.else-row a{display:flex;flex-direction:column;gap:4px;padding:20px 22px;border-radius:var(--r-md);color:var(--ink);text-decoration:none;transition:transform .35s var(--ease-out),background .25s}
.else-row a:hover{transform:translateY(-3px);background:rgba(255,255,255,.75)}
.else-row b{font:400 1.45rem/1.1 var(--slab)}
.else-row span{font-size:.9rem;color:var(--ink2)}

/* ============================== motion ============================== */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform 1s var(--ease-out)}
.js [data-reveal].in{opacity:1;transform:none}
.js .grid .proj.hiding{opacity:0;transform:scale(.97);transition:opacity .22s ease,transform .22s ease}
.js .grid .proj.showing{animation:pop-up .55s var(--ease-out) both}
@keyframes pop-up{from{opacity:0;transform:translateY(20px) scale(.98)}}
.js .tile{transition:opacity .9s var(--ease-out),transform .6s var(--ease-out),box-shadow .4s}
.js .tile.in:hover{transform:translateY(-4px)}

@media (prefers-reduced-motion:no-preference){
  /* the headline rises in, word by word */
  .js .w > span{transform:translateY(108%);transition:transform 1.05s var(--ease-out);transition-delay:calc(var(--i) * 70ms + 150ms)}
  .js .ready .w > span{transform:none}
  .shine{animation:shine 8s ease-in-out infinite}
  .pulse{animation:pulse 2.6s ease-out infinite}
  .js .gcard{opacity:0}
  .js .ready .gcard{opacity:1}
  .gcard{transition:transform .8s var(--ease-out),opacity .8s ease}
  .g-now{transition-delay:0s,.7s}.g-stat{transition-delay:0s,.9s}.g-tags{transition-delay:0s,1.1s}.g-spin{transition-delay:0s,1.25s}
  .gcard > .glass{animation:bob 7s ease-in-out infinite alternate}
  .g-stat > .glass{animation-duration:8s;animation-delay:-3s}
  .g-tags > .glass{animation-duration:6.5s;animation-delay:-1.5s}
  .g-spin > .glass{animation:none}
  .spin-text{animation:spin 26s linear infinite}
  .btn:hover .arr{animation:nudge .9s ease-in-out infinite}

  .mq-track{animation:mq 46s linear infinite}
  .strip:hover .mq-track{animation-play-state:paused}

  /* the stages, only while they're on screen */
  .proj.inview .daynight .night,.proj.inview .daymode .n,.proj.inview .moon-ico{animation:night 10s ease-in-out infinite}
  .proj.inview .daymode .d,.proj.inview .sun-ico{animation:day 10s ease-in-out infinite}
  .proj.inview .steps b{animation:step 6.4s ease-in-out infinite}
  .steps b:nth-child(2){animation-delay:.35s!important}.steps b:nth-child(3){animation-delay:.7s!important}.steps b:nth-child(4){animation-delay:1.05s!important}
  .steps b:nth-child(5){animation-delay:1.4s!important}.steps b:nth-child(6){animation-delay:1.75s!important}.steps b:nth-child(7){animation-delay:2.1s!important}.steps b:nth-child(8){animation-delay:2.45s!important}
  .proj.inview .drawer1{animation:drawer 6s var(--ease-out) infinite}
  .proj.inview .shackle{animation:shackle 6s var(--spring) infinite}
  .proj.inview .sparks path{animation:sparkpop 6s var(--spring) infinite}
  .proj.inview .sparks path:nth-child(2){animation-delay:.12s}
  .proj.inview .sparks path:nth-child(3){animation-delay:.24s}

  /* the four icons */
  .tile.inview .w1{animation:wave 1.8s ease-in-out infinite}
  .tile.inview .w2{animation:wave 1.8s ease-in-out .25s infinite}
  .tile.inview .s1{animation:fan-l 4.2s var(--ease-out) infinite}
  .tile.inview .s3{animation:fan-r 4.2s var(--ease-out) infinite}
  .tile.inview .b-caret{animation:blink 1s steps(1) infinite}
  .tile.inview .b-code{stroke-dasharray:1;animation:code 3.6s ease-in-out infinite}
  .tile.inview .bk-page{animation:flip 4s ease-in-out infinite}
  .tile.inview .bk-spark{animation:twinkle 2.4s ease-in-out infinite}

  /* the timeline draws down */
  .js .me-time .timeline::before{transform:scaleY(0);transition:transform 1.8s var(--ease-out) .2s}
  .js .me-time.in .timeline::before{transform:scaleY(1)}
  .js .me-time .timeline li{opacity:0;transform:translateX(-10px);transition:opacity .5s ease,transform .6s var(--ease-out)}
  .js .me-time.in .timeline li{opacity:1;transform:none}
  .timeline li:nth-child(2){transition-delay:.1s}.timeline li:nth-child(3){transition-delay:.2s}.timeline li:nth-child(4){transition-delay:.3s}
  .timeline li:nth-child(5){transition-delay:.4s}.timeline li:nth-child(6){transition-delay:.5s}.timeline li:nth-child(7){transition-delay:.6s}
  .timeline li:nth-child(8){transition-delay:.7s}.timeline li:nth-child(9){transition-delay:.8s}

  .contact-glow{animation:aur2 30s ease-in-out infinite alternate}
  .plane.fly{animation:plane 1.9s var(--ease-out) forwards}
}

@keyframes shine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(216,31,103,.45)}70%,100%{box-shadow:0 0 0 9px rgba(216,31,103,0)}}
@keyframes bob{from{transform:translateY(-6px)}to{transform:translateY(6px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes nudge{50%{transform:translateY(3px)}}
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes night{0%,36%{opacity:0}50%,86%{opacity:1}100%{opacity:0}}
@keyframes day{0%,36%{opacity:1}50%,86%{opacity:0}100%{opacity:1}}
@keyframes step{0%,4%{background:rgba(20,36,74,.18)}12%,78%{background:#C8102E}90%,100%{background:rgba(20,36,74,.18)}}
@keyframes drawer{0%,8%{transform:translateX(30px)}28%,100%{transform:translateX(0)}}
@keyframes shackle{0%,30%{transform:translateY(-9px)}40%,100%{transform:translateY(0)}}
@keyframes sparkpop{0%,40%{transform:scale(0)}48%{transform:scale(1.25)}56%,86%{transform:scale(1)}96%,100%{transform:scale(0)}}
@keyframes wave{0%,100%{opacity:.25;transform:translateX(0)}50%{opacity:1;transform:translateX(3px)}}
@keyframes fan-l{0%,12%{transform:rotate(0)}32%,68%{transform:rotate(-24deg)}88%,100%{transform:rotate(0)}}
@keyframes fan-r{0%,12%{transform:rotate(0)}32%,68%{transform:rotate(24deg)}88%,100%{transform:rotate(0)}}
@keyframes blink{50%{opacity:0}}
@keyframes code{0%{stroke-dashoffset:1}40%,78%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
@keyframes flip{0%,28%{transform:scaleX(1)}50%{transform:scaleX(-1)}78%,100%{transform:scaleX(1)}}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.72) rotate(18deg)}}
@keyframes plane{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(380px,-300px) rotate(-14deg)}}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .strip-in{-webkit-mask-image:none;mask-image:none;padding:16px 24px}
  .mq-track{flex-wrap:wrap;justify-content:center;width:auto;padding:0;row-gap:10px}
  .mq-track > :nth-child(n+21){display:none}
}

/* ============================== smaller screens ============================== */
@media (max-width:1240px){
  .g-now{left:-20%}
  .g-stat{right:-12%}
  .g-tags{left:-10%}
}
@media (max-width:980px){
  .hero .hero-in{grid-template-columns:1fr}
  .hero-art{padding:28px 0 8px}
  .arch-wrap{width:min(72%,330px)}
  .g-now{top:6%;left:-18%;width:200px}
  .g-stat{bottom:12%;right:-16%}
  .g-tags,.g-spin{display:none}
  .proj.feature{grid-template-columns:1fr}
  .writing-in{grid-template-columns:1fr}
  .drawer-art{max-width:230px;justify-self:start}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .me-in,.contact-in{grid-template-columns:1fr}
  .else-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .hero h1{font-size:clamp(2.6rem,11vw,3.4rem)}
  .g-now{left:-14%;width:178px}
  .g-now .glass{padding:12px 14px}
  .g-text{font-size:.88rem}
  .g-stat{right:-12%}
  .g-stat b{font-size:2.1rem}
  .g-stat span{font-size:.78rem;max-width:7.4rem}
  .grid{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
  .scene,.feature .scene{aspect-ratio:4/3.4;border-radius:22px}
  .proj h3 a::after{border-radius:22px}
  .desk,.scene-soe .desk,.scene-mhs .desk,.scene-tfn .desk,.scene-kit .desk{left:5%;top:8%;width:76%}
  .phone,.scene-soe .phone{width:23%;right:5%}
  .scene-cd .desk{width:70%}
  .scene-cd .app{width:58%}
  .scene-cd .sc-chip{top:auto;bottom:14px;right:auto;left:5%}
  .sc-chip{left:5%;bottom:14px;font-size:.74rem}
  .url{display:none}
  .f-row{grid-template-columns:1fr}
  .seg{display:flex;flex-wrap:wrap;overflow:visible;border-radius:26px}
  .chip{min-height:42px;padding:6px 8px 6px 14px;font-size:.86rem}
  .nums{gap:10px}
  .num{padding:24px 18px 22px}
  .num::before{left:18px}
  .num span{font-size:.88rem}
  .else-row{grid-template-columns:1fr}
}

/* =============================================================
   the résumé page (/resume), also set up to print cleanly to PDF
   ============================================================= */
.cv{max-width:980px;padding-top:clamp(36px,5vw,64px);padding-bottom:clamp(48px,7vw,88px)}
.cv-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px 40px;padding-bottom:22px;border-bottom:1.5px solid var(--ink)}
.cv-top h1{font-size:clamp(2.8rem,6vw,4.4rem);line-height:1}
.cv-role{margin:10px 0 0;font:400 1.12rem/1.45 var(--read);color:var(--ink2);max-width:32rem}
.cv-contact{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;text-align:right;font-size:.96rem;color:var(--ink2)}
.cv-contact a{color:var(--navy);text-underline-offset:3px}
.cv-sec{padding-top:30px}
.cv-sec h2,.cv-h2b{font:500 .78rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brick);margin:0 0 14px}
.cv-h2b{margin-top:26px}
.cv-summary p{margin:0;font:400 1.12rem/1.6 var(--read);max-width:46rem}
.cv-job{padding:16px 0 18px;border-top:1px solid var(--line);break-inside:avoid}
.cv-job:first-of-type{border-top:0;padding-top:0}
.cv-job-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 20px}
.cv-job h3{font-size:1.5rem;line-height:1.15}
.cv-when{margin:0;font:500 .74rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.cv-org{margin:4px 0 0;font:600 .98rem var(--ui);color:var(--ink)}
.cv-org span{font-weight:400;color:var(--ink2);margin-left:10px}
.cv-job ul{margin:10px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.cv-job li{font:400 1rem/1.5 var(--read)}
.cv-job li::marker{color:var(--brass)}
.cv-cols{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,5vw,56px);margin-top:12px;border-top:1.5px solid var(--ink)}
.cv-skills{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 18px}
.cv-skills dt{font:500 .72rem/1.9 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.cv-skills dd{margin:0;font-size:.98rem;line-height:1.5}
.cv-plain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cv-plain li{display:flex;flex-direction:column;gap:2px}
.cv-plain b{font:600 1rem/1.35 var(--ui)}
.cv-plain span{font-size:.94rem;color:var(--ink2)}
.cv-end{display:flex;flex-wrap:wrap;gap:12px;margin:40px 0 0}
@media (max-width:760px){
  .cv-contact{text-align:left}
  .cv-cols{grid-template-columns:1fr}
  .cv-skills{grid-template-columns:1fr;gap:2px}
  .cv-skills dd{margin-bottom:10px}
}
@media print{
  @page{size:letter;margin:.5in .55in}
  .site-head,.drawer,.scrim,.site-foot,.skip,.cv-end,.cv-top .pf-label{display:none!important}
  body{background:#fff;color:#000;font-size:9.5pt}
  .cv{max-width:none;padding:0}
  .cv-top{flex-wrap:nowrap;align-items:flex-end;padding-bottom:8pt}
  .cv-top h1{font-size:24pt}
  .cv-role{font-size:10pt;margin-top:3pt}
  .cv-summary p{font-size:9.5pt;line-height:1.45}
  .cv-contact{font-size:9pt;gap:1pt}
  .cv-contact a{color:#000;text-decoration:none}
  .cv-sec{padding-top:9pt}
  .cv-sec h2,.cv-h2b{font-size:7.5pt;margin-bottom:4pt;color:#7A1E10}
  .cv-h2b{margin-top:10pt}
  .cv-job{padding:4pt 0 5pt}
  .cv-job h3{font-size:11.5pt}
  .cv-org{font-size:9pt;margin-top:1pt}
  .cv-job ul{margin-top:3pt;gap:0}
  .cv-job li{font-size:9pt;line-height:1.38}
  .cv-skills{gap:3pt 12pt}
  .cv-skills dt{font-size:7pt;line-height:1.6}
  .cv-skills dd,.cv-plain b,.cv-plain span{font-size:9pt;line-height:1.38}
  .cv-plain{gap:5pt}
  .cv-when{font-size:7pt}
  .cv-cols{margin-top:6pt}
}