/* A mobile interface on a sheet of architectural drawing paper. */
.blueprint-hero {
  background-color: #f3f1e9;
  background-image: linear-gradient(#f3f1e980, #f3f1e980), url('assets/drawing-paper.png');
  background-size: 720px 720px;
  min-height: 720px;
  max-height: 1100px;
  isolation: isolate;
}
.blueprint-hero .portfolio-signature { top: 32px; left: 42px; }
.blueprint-hero .hero-title-wrap {
  top: 27%; left: 42px; right: auto; width: 35%; margin: 0;
}
.blueprint-hero h1 { font-size: clamp(48px, 5.2vw, 86px); line-height: .98; letter-spacing: -.065em; }
.blueprint-hero .title-line.serif { font-size: 1.22em; margin-top: 7px; letter-spacing: -.035em; }
.blueprint-hero .hero-bottom { bottom: 32px; }
.blueprint-hero .round-arrow { background: #ffffff10; }
.blueprint-hero .explore:hover .round-arrow { background: var(--orange); border-color: var(--orange); color: #fff; }
.blueprint {
  position: absolute; left: 37%; right: 2.5%; top: 13%; bottom: 14%;
  z-index: 2; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.blueprint svg { display: block; width: 100%; height: 100%; overflow: visible; }
.draft-grid { opacity: .34; }
.draft-grid line { stroke: #76786d; stroke-width: .7; stroke-dasharray: 1 6; }
.draft-guides { color: #9c9b91; pointer-events: none; }
.draft-guides path { fill: none; stroke: currentColor; stroke-width: .75; }
.draft-guides .construction { opacity: .6; stroke-dasharray: 4 5; }
.draft-guides .registration { color: #57594f; }
.draft-ghost { fill: none; stroke: #96978c; stroke-width: .85; stroke-dasharray: 4 4; opacity: .4; pointer-events: none; }
.draft-ghost-arrow { fill: none; stroke: #73756a; stroke-width: 1; opacity: .55; pointer-events: none; }
.draft-pencil-guides { fill: none; stroke: #74766b; stroke-width: .7; stroke-dasharray: 9 3 1 3; opacity: .48; pointer-events: none; }
.outside-header { fill: #999b9078; pointer-events: none; }
.draft-part {
  --part-color: #65685d;
  --part-fill: #91928726;
  --part-detail: #98998e78;
  cursor: pointer; outline: none;
}
.draft-part .part-surface { fill: var(--part-fill); stroke: var(--part-color); stroke-width: .9; transition: fill .22s, stroke .22s; }
.draft-part .part-detail { fill: var(--part-detail); transition: fill .22s; }
.draft-part .part-solid { fill: #77796db0; stroke: var(--part-color); stroke-width: .8; transition: fill .22s, stroke .22s; }
.draft-part .part-hit { fill: transparent; stroke: none; }
.draft-part .part-pencil { fill: url('#pencil-hatch'); stroke: var(--part-color); stroke-width: .45; filter: url('#pencil-edge'); pointer-events: none; }
.draft-part .part-focus { fill: none; stroke: var(--orange); stroke-width: 1.5; opacity: 0; }
.draft-part.is-active { --part-color: var(--orange); --part-fill: #f75a332b; --part-detail: #f75a33a6; }
.draft-part.is-active .part-solid { fill: var(--orange); stroke: var(--orange); }
.draft-part:focus-visible .part-focus { opacity: 1; }
.draft-dimension { color: #a2a196; pointer-events: none; transition: color .22s; }
.draft-dimension.is-active { color: var(--orange); }
.draft-dimension path { stroke: currentColor; stroke-width: .85; fill: none; }
.draft-dimension .dim-arrow { fill: currentColor; stroke: none; }
.draft-dimension text { fill: #d76443; font: 14px 'DM Sans', Arial, sans-serif; font-variant-numeric: tabular-nums; text-anchor: middle; }
.draft-dimension.is-active text { fill: var(--orange); }
.draft-phone { pointer-events: none; }
.phone-navigation { fill: #77796c; pointer-events: none; opacity: .75; }
.phone-navigation .home-indicator { opacity: .85; }

@media (min-width: 1700px) {
  .blueprint-hero .hero-title-wrap { top: 27%; margin: 0; }
  .blueprint { left: 37%; right: 4%; top: 12%; bottom: 14%; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .blueprint-hero h1 { font-size: 5.25vw; }
  .blueprint-hero .hero-title-wrap { left: 32px; width: 34%; top: 29%; }
  .blueprint-hero .portfolio-signature { left: 32px; }
  .blueprint { left: 35%; right: 1%; top: 18%; bottom: 18%; }
}
@media (max-width: 760px) {
  .blueprint-hero { min-height: 780px; max-height: 1000px; height: 100svh; }
  .blueprint-hero .portfolio-signature { top: 24px; left: 24px; font-size: 13px; }
  .blueprint-hero .hero-title-wrap { top: 96px; left: 24px; right: 24px; width: auto; margin: 0; }
  .blueprint-hero h1 { font-size: clamp(31px, 8.8vw, 52px); }
  .blueprint-hero .title-line.serif { font-size: 1.15em; margin-top: 2px; }
  .blueprint { left: 10px; right: 10px; top: 226px; bottom: 107px; }
  .blueprint-hero .hero-bottom { bottom: 25px; }
  .blueprint-hero .explore { font-size: 14px; }
  .draft-dimension text { font-size: 16px; stroke: #f3f1e9; stroke-width: 5px; stroke-linejoin: round; paint-order: stroke; }
  .draft-guides .registration { opacity: .7; }
  .draft-ghost, .draft-ghost-arrow, .outside-header { display: none; }
}
@media (max-width: 380px) {
  .blueprint-hero { min-height: 750px; }
  .blueprint-hero .hero-title-wrap { top: 90px; }
  .blueprint { top: 212px; bottom: 105px; }
}
@media (prefers-reduced-motion: reduce) { .draft-part *, .draft-dimension { transition: none; } }