/* Only the lower page changes. v3.css and the approved opening stay intact. */
.work.tactile {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 70px 0 0;
  background: #e8eeea;
}
.tactile .section-heading h2, .tactile .section-heading p, .tactile .project h3,
.tactile .project-copy > p:not(.eyebrow), .tactile details p { white-space: pre-line; }
.tactile .section-heading {
  width: min(1240px, calc(100% - 112px));
  margin: 0 auto 18px;
}
.tactile .project {
  width: 100%;
  margin: 0;
  padding: 24px max(56px, calc((100% - 1240px) / 2)) 68px;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
}
.tactile .project-art { height: 500px; background: none; border-radius: 0; overflow: visible; }
.tactile .project-art.papers { overflow: hidden; border-radius: 4px; }
.tactile .project-art-uploaded { overflow: hidden; border-radius: 4px; background: none; }
.tactile .project-art-image { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.tactile .project-copy { position: relative; z-index: 2; }
.tactile .project h3 { font-size: 35px; }
.tactile .art-label { top: 10px; left: 8px; color: #55766c; }
.tactile .papers::before {
  content: ""; position: absolute; inset: 10% -8% 0;
  background: radial-gradient(ellipse at 50% 64%, #b8cec294, transparent 64%);
}
.tactile .sheet { width: 275px; height: 350px; top: 48%; }
.tactile .sheet-back {
  transform: translate(-30%, -44%) rotate(11deg);
  background: linear-gradient(125deg, #f6f7f0, #dce4d9);
  box-shadow: 2px 3px 0 #f8faf2, 3px 5px 0 #c8d4c7, 5px 8px 0 #f3f6ed, 14px 30px 35px #36554624;
}
.tactile .sheet-front {
  padding: 26px; transform: translate(-62%, -49%) rotate(-9deg);
  background: linear-gradient(120deg, #fffef5, #f3f3e9);
  box-shadow: 1px 2px 0 #fff, 2px 4px 0 #ced6c8, 12px 25px 35px #3b584f29;
}
.tactile .sheet-front::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 30px; height: 30px;
  background: linear-gradient(135deg, #e0e5d9 48%, #fdfef6 50%);
  box-shadow: -2px -2px 4px #485e3910;
}
.tactile .sheet b { font-size: 24px; margin-bottom: 17px; }
.document-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #dce1d7; font-size: 10px; }
.document-row i { font: italic 10px Georgia; color: #56766d; }
.document-row.marked { background: #dbe9da; margin: 0 -5px; padding-inline: 5px; }
.sheet-foot { display: block; font-size: 8px; color: #5b766b; margin-top: 8px; }
.tactile .paper-lines.short { display: none; }
.loose-note { position: absolute; right: -8px; top: 36px; font: italic 15px/1.5 Georgia; color: #507666; transform: rotate(5deg); z-index: 2; }
.loose-note>span { display: block; font: 10px Arial; margin-bottom: 8px; color: #6a857a; }
.loose-note svg { display: block; width: 110px; height: 30px; fill: none; stroke: #6b927e; stroke-width: 1; transform: rotate(125deg); margin-left: 20px; }
.glass-weight { position: absolute; width: 92px; height: 92px; border-radius: 50%; right: 12%; bottom: 69px; background: radial-gradient(circle at 30% 24%, #f3fff9d9, #8ebcab70 30%, #80ab9666 55%, #f9fff58c 65%, #4e938073); border: 1px solid #eefbf0; box-shadow: inset 3px 3px 9px #ffffffba, inset -6px -9px 15px #376f6657, 14px 23px 18px #48755d2e; }
.paper-clip { position: absolute; top: 66px; left: 32%; width: 19px; height: 60px; border: 3px solid #91aca4; border-radius: 12px; transform: rotate(-9deg); box-shadow: 1px 2px 1px #36594b55; }
.paper-clip::after { content: ""; position: absolute; inset: 5px 3px 10px; border: 1px solid #b5c7c0; border-radius: 7px; }
.scene-caption { position: absolute; bottom: 2px; left: 8px; font-size: 10px; color: #647c71; }
.tactile .reverse {
  padding-top: 55px; padding-bottom: 55px;
  grid-template-columns: 1fr 1.3fr;
  background: linear-gradient(115deg, #e0eceb, #cce0e9);
}
.tactile .reverse .project-copy { padding-left: 0; }
.tactile .model-art { height: 500px; }
.glass-pane { position: absolute; width: 260px; height: 170px; padding: 23px; border: 1px solid #f9ffff; border-radius: 5px; transform: rotate(-7deg) skewY(2deg); box-shadow: 5px 7px 0 #85afbc44, 18px 25px 30px #3e748623, inset 0 0 25px #ffffff55; }
.pane-label { font-size: 10px; letter-spacing: .05em; color: #557786; }
.glass-pane p { font-size: 19px; line-height: 1.4; margin: 14px 0 0; letter-spacing: -.4px; }
.pane-back { top: 50px; left: 9%; background: linear-gradient(125deg, #eff9f6cc, #bad5db88); }
.pane-middle { top: 164px; left: 27%; background: linear-gradient(125deg, #f2fcfae8, #bad8e0c9); }
.pane-front { top: 290px; left: 13%; width: 245px; height: 140px; background: linear-gradient(125deg, #f7fdf4, #d4e8e6e8); }
.pane-corner { position: absolute; bottom: 24px; right: 25px; color: #779eaa; font-size: 22px; }
.glass-pane code { font-size: 10px; color: #587e8a; }
.pane-lines { width: 65%; height: 15px; margin-top: 11px; background: repeating-linear-gradient(transparent 0 5px, #a7c3c755 5px 7px); }
.source-line { margin-top: 15px; padding-top: 8px; border-top: 1px solid #b6d0cd; font-size: 10px; display: flex; justify-content: space-between; }
.tactile .model-note { bottom: 25px; right: 4px; font: italic 14px/1.5 Georgia; color: #496e80; }
.about { background: #edf0e9; border: 0; }
.about-inner { grid-template-columns: 1fr 1.3fr; gap: 60px; padding-block: 64px; }
.about-heading { display: flex; align-items: center; gap: 28px; }
.personal-mark { font: italic 80px Georgia; color: #64948d; }
.about h2 { font-size: 19px; letter-spacing: -.3px; }
.about-copy { max-width: 530px; padding-left: 28px; border-left: 1px solid #c8d7cc; }
.about-copy p { font-size: 15px; }
@media (max-width: 1000px) {
  .tactile .section-heading { width: calc(100% - 64px); }
  .tactile .project { padding-inline: 32px; gap: 30px; grid-template-columns: 1fr 1fr; }
  .tactile .project h3 { font-size: 28px; }
  .tactile .sheet { width: 230px; height: 335px; }
  .tactile .sheet-front { transform: translate(-53%, -42%) rotate(-9deg); padding: 22px; }
  .loose-note { font-size: 12px; right: 0; top: 26px; }
  .paper-clip { top: 103px; left: 25%; }
  .glass-weight { right: 0; bottom: 44px; width: 75px; height: 75px; }
  .glass-pane { width: 225px; padding: 19px; }
  .pane-back { left: 0; }
  .pane-middle { left: 18%; }
  .pane-front { left: 5%; width: 220px; height: 160px; }
  .pane-front p { font-size: 17px; }
  .tactile .model-note { bottom: 0; }
}
@media (max-width: 640px) {
  .work.tactile { padding-top: 43px; }
  .tactile .section-heading { width: calc(100% - 40px); margin-bottom: 0; }
  .tactile .project { display: flex; flex-direction: column; gap: 24px; padding: 25px 20px 42px; }
  .tactile .project-art { width: 100%; max-width: 420px; height: 450px; overflow: hidden; }
  .tactile .project-copy { width: 100%; }
  .tactile .sheet { top: 48%; }
  .tactile .art-label { font-size: 9px; left: 0; }
  .tactile .sheet-back { transform: translate(-35%, -35%) rotate(11deg); }
  .loose-note { right: 2px; top: 40px; }
  .paper-clip { top: 86px; left: 27%; }
  .glass-weight { right: 10px; bottom: 35px; }
  .tactile .reverse { padding-top: 32px; }
  .tactile .model-art { height: 480px; }
  .pane-back { left: 4%; }
  .pane-middle { left: 21%; }
  .pane-front { left: 7%; height: 150px; }
  .pane-front p { font-size: 17px; }
  .tactile .model-note { right: 4px; bottom: 2px; font-size: 12px; }
  .about-inner { grid-template-columns: 1fr; gap: 21px; padding-block: 36px; }
  .about-heading { gap: 18px; }
  .personal-mark { font-size: 49px; line-height: 1; }
  .about-copy { padding-left: 18px; }
  .about-copy p { font-size: 14px; }
}