/* Physical skin. These are fluid HTML surfaces, not scaled screenshots. */
.topbar{background:linear-gradient(var(--paper),var(--paper2));gap:28px}
nav a[aria-current=page],.paper-action{background:linear-gradient(color-mix(in srgb,var(--blue),white 9%),var(--blue));color:var(--accent-on);border-color:color-mix(in srgb,var(--blue),black 30%);box-shadow:0 3px 0 color-mix(in srgb,var(--blue),black 35%),0 5px 7px #0003,inset 0 1px #fff5}
.paper-action.priority,.metal.accent{background:linear-gradient(color-mix(in srgb,var(--orange),white 8%),var(--orange));color:var(--action-on);border-color:color-mix(in srgb,var(--orange),black 30%);box-shadow:0 3px 0 color-mix(in srgb,var(--orange),black 40%),0 5px 8px #0003,inset 0 1px #fff5}
.paper-action.slip{background:var(--paper);color:var(--ink);border-color:var(--line);border-left:7px solid var(--blue);box-shadow:2px 3px 0 var(--paper2),3px 5px 8px #0004}
.metal,.theme-control select{border-color:var(--chrome3)}
.monogram{background:color-mix(in srgb,var(--blue),var(--paper) 76%);color:var(--ink)}
#main{max-width:1680px;padding:38px 42px 22px 32px}
.desk{grid-template-columns:minmax(220px,.8fr) minmax(500px,1.7fr) minmax(260px,.95fr);gap:38px 28px;align-items:start}
.desk:before{inset:60% -42px -52px -32px;box-shadow:inset 0 3px 0 #fff3,inset 0 6px 12px #0003;background:repeating-linear-gradient(1deg,#ffffff08 0 1px,#00000005 2px 3px,transparent 4px 9px),linear-gradient(90deg,var(--wood2),var(--wood1) 36%,var(--wood2))}
.object{min-height:0;container-type:inline-size;overflow:visible}
.material-base{position:absolute;inset:0;z-index:-2;pointer-events:none;border:1px solid var(--line);box-shadow:var(--shadow)}
.object-content{height:auto;overflow-wrap:anywhere}
.profile-object{margin-top:14px;align-self:stretch;transform:rotate(-1deg)}
.profile-object .material-base,.cv-content,.paper-underlay,.calendar-content{background-color:var(--paper);background-image:var(--paper-grain);background-blend-mode:soft-light;background-size:280px;border:1px solid color-mix(in srgb,var(--paper),black 17%);box-shadow:1px 2px 3px #0003,3px 8px 12px #0002}
.profile-object .material-base{border-radius:0;box-shadow:2px 4px 4px #0002,6px 15px 15px #0002}
.profile-content{padding:34px 25px 28px;height:100%;min-height:440px;gap:0}
.profile-content h2{font-size:28px;margin-bottom:26px}
.profile-content .identity{flex-wrap:wrap}
.profile-content .identity h3{font-size:19px}
.profile-content .bio{font-size:14px;line-height:1.65}
.profile-content .location{font-size:13px}
.profile-content .paper-action{font-size:13px}
.washi{position:absolute;top:-10px;width:92px;height:31px;z-index:3;pointer-events:none;background-color:color-mix(in srgb,var(--paper),var(--cork-seed) 29%);background-image:var(--paper-grain);background-size:150px;background-blend-mode:multiply;opacity:.87;box-shadow:0 1px 2px #0002;clip-path:polygon(2% 0,96% 1%,100% 8%,98% 18%,100% 30%,98% 44%,100% 58%,99% 69%,100% 85%,97% 99%,3% 100%,0 92%,2% 80%,0 67%,2% 48%,0 30%,2% 15%,0 6%)}
.washi-left{left:-12px;transform:rotate(-31deg)}.washi-right{right:-13px;transform:rotate(33deg)}
.calendar-object{align-self:start;margin-top:4px}
.calendar-object .material-base{inset:-4px -6px -9px;background:linear-gradient(110deg,var(--chrome1),var(--chrome2) 45%,var(--chrome1));border-color:var(--chrome3);border-radius:6px 6px 9px 9px;box-shadow:inset 0 0 0 2px #fff4,2px 6px 0 var(--chrome3),4px 15px 16px #0003}
.calendar-content{padding:35px 22px 22px;min-height:462px;border-radius:2px 2px 8px 2px;box-shadow:1px 2px 1px var(--paper2),2px 4px 0 var(--paper),3px 5px 0 var(--line);display:flex;flex-direction:column}
.binding{position:absolute;left:4%;right:4%;top:-14px;height:35px;display:flex;justify-content:space-around;z-index:4;pointer-events:none}
.binding i{width:12px;height:34px;border-radius:8px;border:1px solid var(--chrome3);background:linear-gradient(90deg,var(--chrome3),var(--chrome1) 36%,var(--chrome2) 68%,var(--chrome3));box-shadow:2px 2px 2px #0006,inset 0 1px 1px #fff}
.binding i:after{content:'';position:absolute;width:17px;height:7px;background:#18202bb0;border-radius:50%;margin:28px 0 0 -4px;z-index:-1}
.calendar-top{margin:0 0 21px;align-items:center}.calendar-top h2{font-size:33px}.calendar-top .eyebrow{font-size:10px;letter-spacing:.8px;text-align:right}
.calendar-body{grid-template-columns:minmax(0,1.22fr) minmax(180px,1fr);gap:18px;flex:1}
.calendar-month{min-width:0}
.month-heading h3{font-size:15px}
.month-heading .square{min-height:32px;width:32px;font-size:26px;color:var(--muted)}
.month-grid{grid-template-rows:repeat(6,minmax(38px,1fr));border-color:var(--line);border-radius:0}
.day{min-height:38px;font-size:13px;border-color:color-mix(in srgb,var(--line),transparent 58%)}
.day.has-event span,[data-theme=dark] .day.has-event span{color:var(--accent-on);width:27px;height:27px}
.day.selected{background:color-mix(in srgb,var(--blue),transparent 90%)}
.appointment{min-height:308px;padding:14px 14px 12px;background-color:var(--panel);background-image:var(--paper-grain);background-size:280px;background-blend-mode:soft-light;border:1px solid color-mix(in srgb,var(--line),transparent 55%);border-top:3px solid var(--orange);transform:rotate(.5deg)}
.appointment h3{font-size:25px}.appointment .role{font-size:14px}.appointment .stage{font-size:12px}.appointment .timezone{font-size:11px;overflow-wrap:anywhere}.appointment-date strong{font-size:16px}.appointment-date>span{font-size:11px}.appointment .priority{font-size:13px;min-height:44px;padding:10px 11px}.appointment .text-action{font-size:11px;min-height:30px}.appointment>p:not([class]){font-size:14px}
.calendar-bottom{margin-top:17px}.calendar-bottom .paper-action{font-size:13px;min-height:42px}
.calendar-legend{font-size:11px;margin-top:5px}.weekdays{font-size:12px}
.jobs-object{align-self:stretch}
.jobs-object .material-base{inset:0;background-color:var(--cork-seed);background-image:var(--cork-grain);background-blend-mode:soft-light;background-size:220px;border:10px solid var(--chrome2);border-radius:5px;box-shadow:inset 0 0 0 2px #0004,inset 2px 4px 10px #0006,0 0 0 1px var(--chrome3),0 0 0 3px var(--chrome1),3px 12px 16px #0004}
.frame-screw{width:7px;height:7px;background:linear-gradient(135deg,var(--chrome1) 42%,var(--chrome3) 48% 53%,var(--chrome2) 59%);box-shadow:0 1px 2px #0006;border-radius:50%;position:absolute;top:2px}.screw-left{left:2px}.screw-right{right:2px}
.jobs-content{padding:22px 22px 19px;height:100%;min-height:470px}
.pinned-heading{font-size:28px;margin-bottom:19px;padding:9px 16px}
.job-notes{gap:12px 10px;flex:1}
.job-note,[data-theme=dark] .job-note{background-color:var(--paper);background-image:var(--paper-grain);background-size:250px;background-blend-mode:soft-light;min-height:132px;padding:24px 11px 12px}
.job-note strong{font-size:17px;overflow-wrap:anywhere}.job-note .job-role{font-size:12px}.job-note .stamp{font-size:9px;letter-spacing:.5px;padding:3px 4px}
.jobs-content .object-actions{margin-top:18px;gap:9px;flex-wrap:wrap}.jobs-content .paper-action{font-size:12px;min-height:42px;padding:8px 12px}
.cv-object{padding:0 8px 18px 4px;align-self:start;margin-top:0}
.cv-object .material-base{inset:12px -5px -8px;background:linear-gradient(105deg,var(--chrome1),var(--chrome2));border:2px solid var(--chrome3);border-radius:5px 5px 10px 10px;box-shadow:inset 1px 1px 2px #fff,0 7px 0 var(--chrome3),4px 13px 16px #0004}
.paper-underlay{position:absolute;inset:3px 4px 15px 6px;transform:rotate(-2deg);z-index:-1;box-shadow:3px 3px 0 var(--paper2),4px 5px 0 var(--paper)}
.cv-content{padding:27px 24px 24px;min-height:405px;transform:rotate(1deg)}
.cv-content h2{margin-bottom:23px;font-size:28px}.cv-sheet h3{font-size:23px}.cv-sheet p{font-size:13px;line-height:1.6}.cv-sheet h4{font-size:11px}
.cv-content .object-actions{gap:10px;flex-wrap:wrap;padding-top:23px}.cv-content .paper-action{font-size:12px;padding:9px 12px;min-height:42px}
.monitor-object{display:grid;grid-template-rows:auto 1fr auto;min-height:420px;padding:18px 29px 28px;align-self:start;margin-bottom:30px}
.monitor-object .material-base{border-radius:21px 21px 35px 35px;background:linear-gradient(140deg,color-mix(in srgb,var(--plastic),white 28%),var(--plastic) 25%,var(--plastic) 75%,var(--plastic-edge));border:1px solid var(--plastic-edge);box-shadow:inset 2px 3px 3px #fff8,inset -5px -8px 7px #0002,0 5px 0 var(--plastic-edge),0 7px 0 color-mix(in srgb,var(--plastic-edge),black 20%),6px 17px 16px #0004}
.monitor-foot{position:absolute;width:52%;height:34px;left:24%;bottom:-27px;z-index:-3;background:linear-gradient(var(--plastic-edge),var(--plastic) 58%,var(--plastic-edge));border-radius:3px 3px 10px 10px;box-shadow:0 7px 10px #0004}
.monitor-label,[data-theme=dark] .monitor-label{position:static;font-family:'Public Sans',sans-serif;font-size:13px;font-weight:700;letter-spacing:1px;text-align:left;padding:0 5px 15px;color:var(--ink)}
.monitor-screen{position:relative;left:auto;top:auto;width:100%;height:auto;min-height:280px;border:10px solid color-mix(in srgb,var(--plastic),black 17%);border-radius:24px;background:var(--paper);box-shadow:0 0 0 1px var(--plastic-edge),inset 2px 3px 10px #0006,0 1px 1px #fff9;padding:23px;overflow:hidden}
.mini-site-header{padding-bottom:13px}.mini-site-header strong{font-size:16px}.mini-site-header span{font-size:11px}
.mini-hero{min-height:190px;height:auto;padding:20px 0 7px;gap:18px;align-items:stretch}
.mini-copy{width:65%;display:flex;flex-direction:column;justify-content:center}.mini-copy h3{font-size:clamp(27px,3vw,40px);line-height:1.1;letter-spacing:-1px}.mini-copy p{font-size:12px;line-height:1.6}.mini-copy .text-action{font-size:12px;align-self:start;margin-top:13px}
.mini-art{height:auto;min-height:155px;background:color-mix(in srgb,var(--accent-seed),var(--paper) 65%);border-radius:45% 45% 2px 2px}.mini-art:after{background:linear-gradient(140deg,color-mix(in srgb,var(--orange),var(--paper) 25%),var(--orange))}
.monitor-controls{position:static;padding-top:20px;justify-content:flex-start;gap:14px}.monitor-controls:after{content:'';width:7px;height:7px;border-radius:50%;background:#638e53;box-shadow:0 0 3px #486831,inset 0 1px 1px #c8e6b7;margin-left:auto}.monitor-controls .metal{min-height:38px;font-size:13px}
.files-object{display:flex;flex-direction:column;gap:7px;padding:14px 14px 14px;align-self:start;min-height:418px}
.files-object>.material-base,.compact-files>.material-base{inset:0;background:var(--cabinet-seed);border:1px solid var(--cabinet-edge);border-radius:7px 7px 4px 4px;box-shadow:inset 1px 1px 1px #fff5,inset -2px -3px 2px #0001,0 4px 0 var(--cabinet-edge),4px 10px 14px #0003}
.files-caption{position:static;font-size:24px;padding:4px 14px;background:var(--paper);box-shadow:1px 2px 3px #0002;transform:none;text-align:center;align-self:center;margin:0 0 5px}
/* Painted drawer fronts share one finish at every size; only the hardware is metal. */
.drawer,.compact-drawer{display:flex;flex-direction:column;align-items:center;border:1px solid var(--cabinet-edge);border-bottom-width:2px;border-radius:3px;background:var(--cabinet-face);box-shadow:inset 0 1px 1px #fff5,0 2px 3px #0002}
.drawer{position:relative!important;inset:auto!important;height:auto;min-height:88px;width:100%;justify-content:flex-start;padding:11px 12px 26px}
.drawer span,.compact-drawer-label{min-width:0;width:min(78%,210px);background:var(--paper);color:var(--ink);font-size:13px;padding:3px 7px;border:1px solid var(--cabinet-edge);outline:2px solid var(--cabinet-hardware);box-shadow:inset 0 1px 2px #0002;text-align:center}
.drawer small{font-size:12px;margin-left:8px}
.drawer:after,.compact-drawer:after{content:'';flex-shrink:0;width:44%;max-width:125px;height:12px;margin-top:9px;border-radius:3px;border:1px solid var(--cabinet-edge);background:linear-gradient(var(--cabinet-hardware),var(--cabinet-edge));box-shadow:0 3px 2px #0003,inset 0 1px 1px #fff5}
.drawer:hover{transform:translateY(-1px);box-shadow:inset 0 1px #fff5,0 4px 3px #0003}
.file-upload{position:relative;right:auto;bottom:auto;align-self:end;margin:9px -20px -12px 0;transform:rotate(-3deg);min-height:44px;font-size:13px}
.preview-note{margin-top:10px;font-size:12px;padding-bottom:20px;align-items:center}.preview-note a{border-bottom:1px solid currentColor}.work-sheet{background-image:var(--paper-grain);background-size:350px;background-blend-mode:soft-light}
/* Component-width rules also work when these objects are embedded elsewhere. */
@container (max-width:440px){
 .calendar-body{grid-template-columns:1fr;gap:19px}
 .calendar-top h2{font-size:30px}
 .calendar-content{padding:35px 20px 24px}
 .calendar-top .eyebrow{max-width:75px}
 .day{min-height:40px;font-size:14px}
 .appointment{min-height:350px;padding:17px;gap:7px}
 .appointment .priority{margin-top:12px;font-size:14px}
 .appointment-date{margin-top:2px}.appointment-date>b{font-size:36px}.appointment-date strong{font-size:20px}
 .appointment .role{font-size:15px}.appointment .stage{font-size:13px}.appointment .timezone{font-size:12px}
 .calendar-bottom{gap:12px;flex-wrap:wrap}
 .month-heading h3{font-size:16px}.month-heading .square{min-height:40px;width:40px}
 .month-grid{grid-template-rows:repeat(6,minmax(40px,1fr))}
}
@container (max-width:340px){.mini-hero{gap:12px}.mini-copy h3{font-size:27px}.mini-copy p{font-size:12px}.mini-art{width:28%}.mini-copy{width:72%}.monitor-screen{padding:17px}.mini-site-header{flex-wrap:wrap;gap:4px}}
@media(min-width:1600px){.calendar-content{min-height:485px}.profile-content,.jobs-content{min-height:493px}.day{min-height:43px;font-size:14px}.appointment .role{font-size:15px}.bio{font-size:15px}.job-note .job-role{font-size:14px}}
@media(max-width:1199px){
 #main{padding-top:32px}.desk{grid-template-columns:1fr 1fr;grid-template-areas:'calendar calendar' 'profile jobs' 'cvs monitor' 'files files';gap:36px 28px;max-width:950px}
 .calendar-content{min-height:0;padding:35px 28px 24px}.calendar-body{grid-template-columns:1.3fr 1fr;gap:28px}.appointment{min-height:310px}.calendar-object{max-width:840px;width:100%;justify-self:center}
 .calendar-top h2{font-size:36px}.day{min-height:43px;font-size:15px}.calendar-bottom{justify-content:flex-end;gap:20px}.files-object{max-width:480px;width:100%;justify-self:center}
 .profile-content,.jobs-content{min-height:455px}.profile-content{padding:37px 28px 30px}.profile-content .identity{flex-wrap:nowrap}.monitor-object{padding:18px 20px 24px}
 .desk:before{inset:65% -42px -40px -32px}.cv-sheet p{font-size:14px}.topbar{gap:18px}
}
@media(max-width:767px){
 #main{padding:30px 24px 20px 20px}.desk{grid-template-columns:1fr;grid-template-areas:'calendar' 'jobs' 'profile' 'cvs' 'monitor' 'files';gap:37px;max-width:490px}
 .calendar-content{padding:34px 20px 23px}.calendar-body{gap:20px;grid-template-columns:1fr}.calendar-top{gap:15px}.calendar-top h2{font-size:30px}.calendar-bottom{justify-content:space-between;gap:12px}.calendar-top .eyebrow{font-size:10px;max-width:74px}
 .calendar-object,.profile-object,.jobs-object,.cv-object,.monitor-object,.files-object{min-height:0}
 .appointment{min-height:350px}.appointment .priority{min-height:44px;font-size:14px;margin-top:auto}.appointment h3{font-size:27px}.appointment .role{font-size:15px}.appointment .timezone{font-size:12px}.appointment .text-action{font-size:12px}
 .profile-content{min-height:400px;padding:38px 29px 28px}.profile-content .bio{font-size:16px}.jobs-content{min-height:450px;padding:25px}.job-note{min-height:145px}.job-note .job-role{font-size:14px}.jobs-content .paper-action{font-size:14px}
 .cv-content{padding:28px;min-height:420px}.cv-sheet p{font-size:14px}.cv-content .paper-action{font-size:14px}
 .monitor-object{padding:18px 19px 23px}.monitor-screen{min-height:280px;padding:20px}.monitor-controls .metal{min-height:40px;font-size:12px}.monitor-label{font-size:13px}
 .files-object{min-height:420px}.files-caption{font-size:28px}.drawer{min-height:90px}.drawer span{font-size:15px}.file-upload{margin-right:-12px}
 .desk:before{inset:64% -24px -42px -20px}.preview-note{font-size:11px;line-height:1.6;display:block}.preview-note a{display:inline-block;margin-top:8px}.topbar{gap:14px}.day{min-height:40px}.weekdays{font-size:12px}.month-heading h3{font-size:16px}.month-heading .square{min-height:40px;width:40px}
}
@media(max-width:359px){.calendar-content{padding:34px 14px 20px}.calendar-top h2{font-size:28px}.calendar-top{flex-wrap:nowrap}.calendar-bottom .paper-action{font-size:12px;padding:8px 10px}.monitor-controls{flex-wrap:wrap}.mini-site-header{flex-wrap:wrap}}