/* Personal AI portfolio: selected gallery and responsive illustrations. */
.portfolio-gallery{scroll-margin-top:12px}
.portfolio-heading{display:grid;grid-template-columns:1.45fr 1fr;gap:60px;align-items:end}
.portfolio-gallery .eyebrow{margin-bottom:18px}
.portfolio-heading>p{font-size:15px;color:var(--muted);line-height:1.8;max-width:380px;padding-bottom:3px}
.portfolio-disclosure{font-size:12px;color:var(--muted);margin:25px 0 19px}
.portfolio-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px}
.project-card{grid-column:span 2;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper)}
.project-card-wide{grid-column:span 3}
.project-art{height:228px;position:relative;overflow:hidden;background:var(--wash);isolation:isolate;border-bottom:1px solid var(--line)}
.project-card-wide .project-art{height:265px}
.project-copy{padding:24px 25px 27px}
.project-category{font-size:10px;letter-spacing:1.1px;font-weight:500;color:var(--muted);line-height:1.5;margin-bottom:12px}
.project-copy h3{font-size:24px;letter-spacing:-.8px;line-height:1.2;margin-bottom:13px}
.project-copy>p:not(.project-category){font-size:14px;color:var(--muted);line-height:1.75}
.project-card-wide .project-copy{padding-top:22px}
.project-card-wide .project-copy h3{font-size:27px}
.project-link{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;margin-top:21px;padding:10px 12px;border:1px solid #ded8c1;border-radius:7px;background:#f8f4e6;color:var(--ink);font-size:12px;line-height:1.45;font-weight:500;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}
.project-link-icon{display:flex;align-items:center;justify-content:center;flex:0 0 28px;height:28px;border-radius:7px;background:#fffdf5;color:#697354;transition:background .2s}
.project-link-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.project-link-label{min-width:0;flex:1}
.project-link-arrow{flex-shrink:0;font-size:19px;line-height:1;color:#756632;transition:transform .2s}
.project-link:hover{background:#f5e8b7;border-color:#c7b36a;box-shadow:0 4px 12px #74652312;transform:translateY(-2px)}
.project-link:hover .project-link-icon{background:#f1d572}
.project-link:hover .project-link-arrow{transform:translateX(2px)}
.project-link:focus-visible{outline:3px solid #9a7510;outline-offset:4px;background:#f5e8b7;border-color:#9a7510}
.portfolio-extras{display:grid;grid-template-columns:1fr 1.8fr;align-items:center;gap:28px;margin-top:22px;padding:25px;border:1px solid var(--line);border-radius:12px;background:var(--wash);scroll-margin-top:30px}
.portfolio-extras .project-category{margin-bottom:10px}
.portfolio-extras h3{font-size:24px;letter-spacing:-.8px;line-height:1.25}
.exploration-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 30px;margin:0;padding-left:18px;list-style:disc;color:var(--muted);font-size:14px;line-height:1.65}
.exploration-list li{padding-left:3px}
.exploration-list li::marker{color:#a58c3e}
.portfolio-closing{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:32px;padding:27px 0 0;border-top:1px solid var(--line)}
.portfolio-closing p{font-size:15px;color:var(--muted);line-height:1.7}
.portfolio-closing strong{color:var(--ink);font-weight:400}
.portfolio-closing .button{gap:25px;flex-shrink:0}
.portfolio-closing .button>span{font-size:19px;line-height:1}
.art-note{position:absolute;bottom:15px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:.15px;color:#626856}
.editing-art{background:#edf0e7;display:flex;justify-content:center;align-items:flex-start}
.editing-window{width:71%;max-width:340px;background:white;border:1px solid #d7dccd;border-radius:8px;margin-top:23px;overflow:hidden;box-shadow:0 9px 18px #28341c08;transform:rotate(-3deg)}
.sketch-top{height:26px;border-bottom:1px solid #e4e7df;display:flex;justify-content:space-between;align-items:center;padding:0 10px;color:#6c735f;font-size:7px;letter-spacing:1px}
.sketch-dots{font-size:5px;letter-spacing:3px;color:#acb39e}
.editing-canvas{height:96px;margin:10px;background:#f7f2df;position:relative;overflow:hidden}
.landscape-sun{position:absolute;width:32px;height:32px;left:58%;top:12px;border-radius:50%;background:var(--yellow)}
.landscape-back{position:absolute;width:110%;height:80px;left:-10%;bottom:-53px;background:#d1d8bf;transform:rotate(-10deg)}
.landscape-front{position:absolute;width:110%;height:60px;right:-10%;bottom:-42px;background:#7f8d68;transform:rotate(15deg)}
.frame-corner{position:absolute;width:12px;height:12px;border-color:#8e936f;border-style:solid}
.frame-corner-a{top:9px;left:10px;border-width:1px 0 0 1px}
.frame-corner-b{right:10px;bottom:9px;border-width:0 1px 1px 0}
.timeline{height:52px;margin:0 10px 10px;position:relative}
.timeline-ruler{display:flex;justify-content:space-between;padding-top:1px;margin-bottom:6px}
.timeline-ruler i{height:3px;width:1px;background:#d4d9ca}
.timeline-track{display:flex;gap:4px;height:17px}
.timeline-track span{background:#e0e6d3;border:1px solid #d0d9c0;border-radius:2px;flex:1}
.timeline-track span:nth-child(2){background:#f6df8c;flex:1.8;border-color:#e8ce75}
.timeline-track span:nth-child(4){flex:1.5}
.timeline-sound{height:9px;margin-top:5px;background:repeating-linear-gradient(90deg,#bac5a8 0 1px,#e4e9da 1px 4px);border-radius:2px}
.timeline-cursor{position:absolute;width:1px;top:0;bottom:0;left:37%;background:#6d7659}
.timeline-cursor:before{content:'';display:block;width:5px;height:5px;background:#6d7659;transform:translateX(-2px)}
.creation-art{background:#f6f1e1;display:flex;flex-direction:column;align-items:center;padding-top:24px}
.idea-pill{font-size:11px;border:1px solid #d9d0ae;border-radius:30px;padding:6px 16px;background:#fffaf0}
.idea-thread{height:23px;width:1px;background:#cfc5a1}
.storyboard{display:flex;gap:10px;align-items:center;width:80%;max-width:390px}
.story-frame{height:116px;flex:1;border:1px solid #d4c9a1;border-radius:6px;background:#fffdf4;position:relative;overflow:hidden}
.story-frame:nth-child(1){transform:rotate(-5deg)}
.story-frame:nth-child(2){transform:translateY(8px);background:#edd480}
.story-frame:nth-child(3){transform:rotate(5deg);background:#dee3d1}
.story-frame small{position:absolute;bottom:6px;left:9px;font-size:8px;color:#686b5b}
.story-orbit{width:100px;height:100px;border:1px solid #9e9778;border-radius:50%;position:absolute;left:28%;top:12px}
.story-orbit:after{content:'';position:absolute;width:25px;height:25px;background:#e2bf46;border-radius:50%;left:-7px;top:20px}
.story-frame:nth-child(2) .story-orbit{left:-20%;top:36px}
.story-frame:nth-child(2) .story-orbit:after{left:65px;top:-6px;background:#667152}
.story-frame:nth-child(3) .story-orbit{left:6%;top:-10px}
.story-frame:nth-child(3) .story-orbit:after{left:62px;top:72px}
.mobile-art{background:#eef0ea;display:flex;justify-content:center;align-items:center}
.phone-sketch{width:100px;height:187px;background:#fff;border:1.5px solid #6a725d;border-radius:17px;transform:rotate(-7deg);padding:19px 10px 10px;position:relative;z-index:1;box-shadow:7px 9px 0 #dbe0d1}
.phone-speaker{position:absolute;top:7px;left:37px;width:26px;height:3px;background:#c2c9b7;border-radius:3px}
.phone-greeting{height:5px;width:53%;background:#8a9577;margin:7px 0 12px;border-radius:2px}
.phone-feature{height:58px;background:#f5d97d;border-radius:5px;display:flex;align-items:center;justify-content:center}
.phone-feature span{font-size:31px;color:#64664c}
.phone-row{display:flex;gap:6px;align-items:center;margin-top:9px}
.phone-row i{width:13px;height:13px;background:#e8eddf;border-radius:4px}
.phone-row>span{height:3px;width:45px;background:#d5dbcb;border-radius:2px}
.phone-nav{display:flex;justify-content:space-between;border-top:1px solid #eef0e9;padding-top:8px;margin-top:11px}
.phone-nav i{width:5px;height:5px;background:#bac3aa;border-radius:50%}
.mobile-orbit{width:220px;height:150px;border:1px solid #d1d7c6;transform:rotate(-25deg);position:absolute;border-radius:50%}
.mobile-point{position:absolute;background:var(--yellow);width:14px;height:14px;border-radius:50%;left:18%;top:65%}
.saas-art{background:#f5f1e7;display:flex;align-items:center;justify-content:center}
.saas-sketch{width:72%;max-width:245px;height:135px;border:1px solid #cdd3c0;background:white;border-radius:7px;transform:rotate(-4deg);overflow:hidden}
.saas-sketch .sketch-top{font-size:6px}
.saas-layout{display:flex;height:calc(100% - 26px)}
.saas-sidebar{width:24%;border-right:1px solid #e3e7dc;padding:15px 8px;background:#f5f7f0}
.saas-sidebar i{display:block;background:#ccd4bd;height:3px;margin-bottom:11px}
.saas-blocks{flex:1;padding:14px}
.saas-blocks>span{display:block;width:62%;height:5px;background:#a3ae91;margin-bottom:13px}
.saas-blocks>div{display:flex;gap:7px;height:41px}
.saas-blocks i{background:#e8ecdf;flex:1;border-radius:4px}
.saas-blocks i:first-child{background:#f5dea0}
.saas-chip{position:absolute;font-size:10px;border:1px solid #d7dccb;border-radius:5px;background:#fffef9;padding:7px 11px;box-shadow:0 5px 12px #20211e06}
.payment-chip{top:31px;right:8%;transform:rotate(4deg)}
.legal-chip{bottom:25px;left:11%;transform:rotate(3deg)}
.knowledge-art{background:#f0f2ea}
.knowledge-lines{width:320px;height:230px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);fill:none;stroke:#bec7ad;stroke-width:1}
.knowledge-lines circle{stroke-dasharray:3 5}
.knowledge-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80px;height:80px;border:1px solid #b6c09f;background:#e0e6d2;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;line-height:1.4;color:#535e43}
.knowledge-node{position:absolute;font-size:10px;border:1px solid #d7dccd;background:#fffef9;padding:7px 10px;border-radius:5px}
.node-one{left:12%;top:17%;transform:rotate(-6deg)}
.node-two{right:11%;top:16%;transform:rotate(5deg);background:#f5e3a9;border-color:#e7d7a3}
.node-three{left:7%;bottom:15%;transform:rotate(3deg)}
.node-four{right:13%;bottom:15%;transform:rotate(-5deg)}
@media(max-width:1000px){
  .portfolio-heading{gap:35px;grid-template-columns:1.25fr 1fr}
  .project-copy{padding:21px 19px 23px}
  .project-copy h3{font-size:22px}
}
@media(max-width:760px){
  .portfolio-extras{grid-template-columns:1fr;gap:19px;margin-top:17px}
  .portfolio-heading{grid-template-columns:1fr;gap:20px}
  .portfolio-heading>p{max-width:530px}
  .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
  .project-card,.project-card-wide{grid-column:auto}
  .project-card:last-child{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;align-items:center}
  .project-card:last-child .project-art{border-bottom:0;border-right:1px solid var(--line)}
  .project-card-wide .project-art{height:228px}
  .editing-window{width:80%;margin-top:15px}
  .editing-canvas{height:69px}
  .storyboard{gap:7px;width:85%}
  .story-frame{height:96px}
  .creation-art{padding-top:17px}
  .art-note{font-size:10px;bottom:13px}
  .project-card-wide .project-copy h3{font-size:23px}
}
@media(max-width:600px){
  .portfolio-extras{padding:23px;margin-top:19px}
  .exploration-list{grid-template-columns:1fr;gap:10px}
  .portfolio-gallery .eyebrow{font-size:10px;letter-spacing:1.2px}
  .portfolio-heading{gap:21px}
  .portfolio-heading>p{font-size:14px;line-height:1.8}
  .portfolio-disclosure{font-size:11px;margin:20px 0 17px;max-width:280px}
  .portfolio-grid{grid-template-columns:1fr;gap:19px}
  .project-card:last-child{grid-column:auto;display:block}
  .project-card:last-child .project-art{border-right:0;border-bottom:1px solid var(--line)}
  .project-copy,.project-card-wide .project-copy{padding:21px 23px 24px}
  .project-copy h3,.project-card-wide .project-copy h3{font-size:25px}
  .project-copy>p:not(.project-category){font-size:14px}
  .project-category{font-size:10px}
  .project-card-wide .project-art{height:234px}
  .project-art{height:215px}
  .editing-window{width:75%;max-width:290px;margin-top:15px}
  .editing-canvas{height:70px}
  .storyboard{width:80%;max-width:320px}
  .story-frame{height:108px}
  .creation-art{padding-top:20px}
  .art-note{bottom:13px;font-size:11px}
  .portfolio-closing{align-items:start;flex-direction:column;gap:19px;padding-top:24px;margin-top:25px}
  .portfolio-closing p{font-size:14px}
  .portfolio-closing .button{width:100%;justify-content:space-between;padding:13px 20px}
}
@media(max-width:360px){
  .project-copy{padding-left:19px;padding-right:19px}
}