
/* Mostly Digital - sample work detail system */
.work-card-link{display:block;color:inherit;text-decoration:none;height:100%}.work-card-link .work-card{height:100%}.work-card-link:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}.work-art.visual{position:relative}.work-open{position:absolute;right:16px;bottom:14px;z-index:6;background:var(--yellow);color:var(--ink);border:1px solid var(--ink);padding:7px 9px;font:700 8px var(--mono);letter-spacing:.06em;opacity:0;transform:translateY(4px);transition:.18s}.work-card-link:hover .work-open,.work-card-link:focus-visible .work-open{opacity:1;transform:none}
.mock-fashion{display:grid;grid-template-columns:.85fr 1.15fr;gap:10px;margin-top:12px;height:118px}.mock-fashion>span{background:#d8d6d2;border:1px solid #aaa}.mock-fashion>div{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;align-content:start}.mock-fashion i{height:26px;border:1px solid #aaa;background:#fff}.mock-fashion b{grid-column:1/-1;background:var(--yellow);border:1px solid var(--ink);padding:7px;font:700 7px var(--mono);text-align:center;margin-top:5px}.mock-legal{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:18px}.mock-legal i{height:54px;border:1px solid #aaa;background:#ece9e3;display:flex;align-items:center;justify-content:center;font:700 8px var(--mono);font-style:normal}.mock-legal i:nth-child(2){background:var(--yellow);border-color:var(--ink)}.mock-hotel{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:62px 48px;gap:7px;margin-top:12px}.mock-hotel>span{display:block;background:#d9d6cf;border:1px solid #aaa}.mock-hotel>span:nth-child(2){background:#efede8}.mock-hotel>div{grid-column:1/-1;border:1px solid var(--ink);display:flex;justify-content:space-between;align-items:center;padding:8px}.mock-hotel b{font:700 8px var(--mono)}.mock-hotel small{font-size:7px;color:#777}.mock-audit{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px;width:70%}.mock-audit i{display:block;border:1px solid var(--ink);padding:8px;background:#f0eee9;font:700 7px var(--mono);font-style:normal}.mock-audit i:nth-child(4){background:var(--yellow)}
.sample-project-page{overflow:hidden}.sample-hero{padding:86px 0 82px;border-bottom:1px solid var(--ink);background-image:linear-gradient(rgba(12,12,12,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(12,12,12,.035) 1px,transparent 1px);background-size:46px 46px}.sample-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}.sample-hero-copy h1{font-size:clamp(56px,6.8vw,104px);margin:24px 0 22px;max-width:850px}.sample-hero-copy>p{font-size:20px;line-height:1.6;max-width:760px;color:var(--char)}.sample-meta{display:grid;grid-template-columns:1fr;gap:10px;margin-top:34px}.sample-meta>div{border-top:1px solid var(--ink);padding-top:12px;display:grid;grid-template-columns:120px 1fr;gap:16px}.sample-meta span{font-size:8px;color:var(--muted)}.sample-meta b{font-size:14px}.sample-hero-art{height:520px;background:var(--ink);border:1.5px solid var(--ink);padding:34px;position:relative;display:flex;align-items:center}.sample-hero-art .mock-browser{height:360px;box-shadow:14px 14px 0 var(--yellow)}.sample-hero-art .mock-body{padding:28px}.sample-hero-art .mock-title{font-size:36px;max-width:72%}.sample-hero-art .mock-label{font-size:9px}.sample-hero-art .mock-btn{left:28px;bottom:28px;padding:10px 14px}.sample-hero-art .mock-card-stack{right:26px;top:50px}.sample-stamp{position:absolute;left:34px;bottom:20px;color:rgba(249,248,248,.55);font-size:7px}.sample-scenario-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink)}.sample-scenario-grid>div{padding:34px;min-height:240px}.sample-scenario-grid>div+div{border-left:1px solid var(--ink);background:var(--yellow)}.sample-scenario-grid span{font-size:8px}.sample-scenario-grid h3{font-size:clamp(30px,3vw,46px);margin:38px 0 0;max-width:620px}.sample-direction-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--ink)}.sample-direction{border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:30px;min-height:320px}.sample-direction span{font-size:8px}.sample-direction h3{font-size:28px;margin:54px 0 0;line-height:1.05}.sample-showcase-frame{min-height:620px;background:var(--ink);border:1.5px solid var(--ink);display:grid;grid-template-columns:1.35fr .65fr;gap:0;padding:42px}.showcase-browser{display:flex;align-items:center}.showcase-browser>.mock-browser{height:490px;box-shadow:16px 16px 0 var(--yellow)}.showcase-browser .mock-body{padding:34px}.showcase-browser .mock-title{font-size:44px;max-width:70%}.showcase-browser .mock-label{font-size:9px}.showcase-browser .mock-btn{left:34px;bottom:34px;padding:11px 14px}.showcase-browser .mock-card-stack{right:30px;top:60px}.showcase-side{border-left:1px solid rgba(249,248,248,.18);margin-left:42px;padding-left:32px;color:var(--warm);display:flex;flex-direction:column;justify-content:center;gap:0}.showcase-side>span{font-size:8px;color:var(--yellow);margin-bottom:18px}.showcase-side>div{display:grid;grid-template-columns:42px 1fr;gap:10px;padding:18px 0;border-top:1px solid rgba(249,248,248,.18)}.showcase-side>div span{font-size:7px;color:rgba(249,248,248,.45)}.showcase-side>div b{font-size:16px}.sample-card-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(249,248,248,.25);border-left:1px solid rgba(249,248,248,.25)}.sample-card{min-height:250px;border-right:1px solid rgba(249,248,248,.25);border-bottom:1px solid rgba(249,248,248,.25);padding:28px}.sample-card span{font-size:8px;color:var(--yellow)}.sample-card h3{font-size:28px;margin:62px 0 0}.sample-measure-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}.sample-measure-grid h2{font-size:clamp(46px,5vw,78px);margin:24px 0}.sample-measure-grid p{font-size:17px;line-height:1.6;color:var(--char);max-width:650px}.sample-measure-panel{background:var(--yellow);border:1.5px solid var(--ink);padding:34px;box-shadow:12px 12px 0 var(--ink)}.sample-measure-panel>span{font-size:8px}.sample-measure-panel ul{list-style:none;margin:30px 0 0;padding:0}.sample-measure-panel li{padding:16px 0;border-top:1px solid var(--ink);font-weight:700}.sample-disclaimer{background:var(--ink);color:var(--warm);padding:72px 0}.sample-disclaimer .wrap{display:grid;grid-template-columns:1fr auto;gap:60px;align-items:end}.sample-disclaimer span{font-size:8px;color:var(--yellow)}.sample-disclaimer h2{font-size:clamp(42px,5vw,70px);margin:22px 0}.sample-disclaimer p{max-width:780px;color:rgba(249,248,248,.65);font-size:17px;line-height:1.6}.sample-next{display:flex;justify-content:space-between;gap:18px}.sample-next a{font-weight:750;text-underline-offset:4px}
@media(max-width:980px){.sample-hero-grid,.sample-showcase-frame,.sample-measure-grid{grid-template-columns:1fr}.sample-hero-art{height:440px}.showcase-side{border-left:0;border-top:1px solid rgba(249,248,248,.18);margin:32px 0 0;padding:28px 0 0}.sample-direction-grid{grid-template-columns:1fr}.sample-direction{min-height:220px}.sample-card-grid{grid-template-columns:1fr 1fr}.sample-disclaimer .wrap{grid-template-columns:1fr}.sample-scenario-grid{grid-template-columns:1fr}.sample-scenario-grid>div+div{border-left:0;border-top:1px solid var(--ink)}}
@media(max-width:640px){.sample-hero{padding:60px 0}.sample-hero-copy h1{font-size:clamp(48px,14vw,72px)}.sample-hero-copy>p{font-size:17px}.sample-meta>div{grid-template-columns:1fr;gap:5px}.sample-hero-art{height:360px;padding:18px}.sample-hero-art .mock-browser{height:290px;box-shadow:8px 8px 0 var(--yellow)}.sample-hero-art .mock-body{padding:16px}.sample-hero-art .mock-title{font-size:28px}.sample-hero-art .mock-btn{left:16px;bottom:16px}.sample-hero-art .mock-card-stack{right:14px;top:44px}.sample-stamp{left:18px;bottom:10px}.sample-scenario-grid>div{padding:24px;min-height:190px}.sample-scenario-grid h3{font-size:30px;margin-top:28px}.sample-direction{padding:24px}.sample-direction h3{font-size:25px;margin-top:38px}.sample-showcase-frame{padding:18px;min-height:0}.showcase-browser>.mock-browser{height:330px;box-shadow:8px 8px 0 var(--yellow)}.showcase-browser .mock-body{padding:18px}.showcase-browser .mock-title{font-size:30px}.showcase-browser .mock-btn{left:18px;bottom:18px}.sample-card-grid{grid-template-columns:1fr}.sample-card{min-height:180px}.sample-card h3{margin-top:42px}.sample-disclaimer{padding:54px 0}.sample-next{flex-direction:column}}
