/*
 * Blueprint layer: paper artifacts, box diagrams, and a note page.
 * Inspired by the departuremono.com specimen (tickets, receipts, letter
 * page, thin-line GUI). Kept on the site system: 24px and 14px type only,
 * weight 400, purple, white, and grayscale.
 */
:root{
  --bp-line:#ffffff40;
  --bp-line-strong:#ffffff66;
  --bp-dim:#ffffff80;
  --bp-ink:#0b0a0e;
  --bp-paper:#e8e7e3;
  --bp-rule:28px;
}
.bp-label,.bp-head,.bp-fields dt,.bp-diagram_label,.bp-receipt_head,.bp-receipt_total span:first-child,.bp-hud dt{text-transform:uppercase;letter-spacing:.08em}

/* ---------- Departures board: one row per case study, each row links to it ---------- */
.bp-board{padding:2.5rem 1rem 3rem}
.bp-board_list{margin:0;padding:0;list-style:none}
.bp-board_row{display:grid;grid-template-columns:5rem minmax(0,1.3fr) minmax(0,1fr) 10.5rem;align-items:stretch;color:inherit;text-decoration:none}
.bp-board_row>span{display:flex;align-items:center;min-width:0;padding:.85rem 1.25rem;border-left:2px solid #ffffff4d}
.bp-board_row>span:first-child{padding-left:0;border-left:0}
.bp-board_row--head{border-bottom:3px solid #ffffff59}
.bp-board_row--head>span{padding-block:0 .75rem;color:var(--bp-dim);text-transform:uppercase;letter-spacing:.08em}
.bp-board_list li+li a{border-top:1px solid #ffffff14}
html body .bp-board_list .bp-board_code,html body .bp-board_list .bp-board_dest{font-size:var(--type-display,24px)!important;line-height:1.2}
.bp-board_list .bp-board_code{color:var(--purple,#b87bfb)}
.bp-board_list .bp-board_dest{color:var(--white,#fff)}
.bp-board_type{color:var(--bp-dim)}
.bp-board_list .bp-board_status{gap:.6rem;text-transform:uppercase;letter-spacing:.08em;color:#ffffffbf}
.bp-board_status i{flex:0 0 6px;width:6px;height:6px;background:var(--purple,#b87bfb);animation:bp-blink 1.4s steps(1,end) infinite}
.bp-board_list li:nth-child(2) .bp-board_status i{animation-delay:-.45s}
.bp-board_list li:nth-child(3) .bp-board_status i{animation-delay:-.9s}
@keyframes bp-blink{50%{opacity:0}}
a.bp-board_row{transition:background-color .1s steps(1,end)}
a.bp-board_row:hover,a.bp-board_row:focus-visible{background:#b87bfb1f;outline:2px solid transparent}
a.bp-board_row:focus-visible{box-shadow:inset 0 0 0 2px var(--px-pale,#f2e7ff)}
a.bp-board_row:hover .bp-board_code,a.bp-board_row:focus-visible .bp-board_code{color:var(--bp-ink);background:var(--purple,#b87bfb)}
a.bp-board_row:hover .bp-board_code{padding-left:.5rem}
a.bp-board_row .bp-board_code{transition:padding .1s steps(1,end)}
@media(max-width:767px){
  .bp-board{padding:2rem 1rem 2.5rem}
  .bp-board_row{grid-template-columns:3.75rem minmax(0,1fr);grid-template-areas:"code dest" "code type" "code status"}
  .bp-board_row>span{text-align:left;justify-content:flex-start}
  .bp-board_row>.bp-board_code{grid-area:code}
  .bp-board_row>.bp-board_dest{grid-area:dest;padding:.75rem .9rem .2rem}
  .bp-board_row>.bp-board_type{grid-area:type;padding:0 .9rem .2rem}
  .bp-board_row>.bp-board_status{grid-area:status;padding:0 .9rem .75rem}
  .bp-board_row--head{grid-template-areas:"code dest"}
  .bp-board_row--head>.bp-board_type,.bp-board_row--head>.bp-board_status{display:none}
  .bp-board_row--head>.bp-board_dest{padding:0 .9rem .75rem}
}
@media(prefers-reduced-motion:reduce){.bp-board_status i{animation:none}}

/* ---------- Paper artifacts share one wrapper so the pixel reveal and the hard shadow follow the cut shape ---------- */
.case-artifact{max-width:30rem;margin:0 0 1.5rem;padding:0 4px 4px 0;filter:drop-shadow(4px 4px 0 var(--bp-ink))}
.case-artifact p{margin:0}
.bp-fields{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);gap:1rem;margin:0}
.case-study_content .bp-fields>div{display:flex;flex-direction:column;justify-content:space-between;gap:.35rem;min-width:0;margin:0}
.case-study_content .bp-fields dt{margin:0;color:var(--bp-dim);overflow-wrap:normal}
.case-study_content .bp-fields dd{margin:0;color:var(--white,#fff);line-height:1.1}
.bp-head{display:flex;justify-content:space-between;gap:1rem}
.bp-head span:last-child{text-align:right}
.bp-caption{color:var(--bp-dim)}

/* Boarding pass: dark ticket, perforated stub, notched cut, dither barcode. */
.bp-pass,.bp-admit{
  --stub:6.5rem;
  display:grid;grid-template-columns:minmax(0,1fr) var(--stub);
  -webkit-mask-image:radial-gradient(circle 9px at calc(100% - var(--stub)) 0,#0000 97%,#000),radial-gradient(circle 9px at calc(100% - var(--stub)) 100%,#0000 97%,#000);
  mask-image:radial-gradient(circle 9px at calc(100% - var(--stub)) 0,#0000 97%,#000),radial-gradient(circle 9px at calc(100% - var(--stub)) 100%,#0000 97%,#000);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.bp-pass{background:#2b2b2f;color:var(--white,#fff);box-shadow:inset 0 0 0 1px #ffffff1f}
.bp-pass_main,.bp-admit_main{display:flex;flex-direction:column;gap:1rem;padding:1.25rem;min-width:0}
.bp-pass .bp-head{color:var(--purple,#b87bfb);padding-bottom:.75rem;border-bottom:1px dashed var(--bp-line)}
.bp-route{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.bp-route p{display:flex;flex-direction:column;gap:.25rem}
.bp-route .bp-label{color:var(--bp-dim)}
html body .bp-route strong{font-size:var(--type-display,24px)!important;line-height:1.1;color:var(--white,#fff);text-transform:uppercase}
.bp-route_arrow{color:var(--purple,#b87bfb);padding-bottom:.2rem}
.bp-stub{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem .75rem;border-left:2px dashed var(--bp-line)}
.bp-stub_code{writing-mode:vertical-rl;text-transform:uppercase;letter-spacing:.12em;color:var(--bp-dim)}
.bp-barcode{display:block;width:100%;height:4.5rem;background:repeating-linear-gradient(90deg,#e8e7e3 0 2px,transparent 2px 4px,#e8e7e3 4px 5px,transparent 5px 8px,#e8e7e3 8px 11px,transparent 11px 12px,#e8e7e3 12px 13px,transparent 13px 16px);opacity:.85}

/* Admit-one ticket: purple stock, punch hole on the stub. */
.bp-admit{background:var(--purple,#b87bfb);color:var(--bp-ink)}
.bp-admit .bp-head{padding-bottom:.75rem;border-bottom:1px dashed #0b0a0e59}
.case-study_content .bp-admit .bp-fields dt,.bp-admit .bp-caption,.bp-admit .bp-stub_code{color:#0b0a0eb3}
.case-study_content .bp-admit .bp-fields dd{color:var(--bp-ink)}
html body .bp-admit .bp-fields dd,html body .bp-pass .bp-fields dd{font-size:var(--type-display,24px)!important;line-height:1.1}
.bp-admit .bp-stub{border-left-color:#0b0a0e59}
.bp-stub_hole{display:block;width:1.5rem;height:1.5rem;border-radius:50%;background:#7d52c4;box-shadow:inset 2px 2px 0 #0b0a0e66}

/* Receipt: paper stock, dotted leaders, stepped tear at the bottom. */
.bp-receipt{
  max-width:24rem;padding:1.5rem 1.25rem 2.25rem;background:var(--bp-paper);color:var(--bp-ink);
  -webkit-mask-image:linear-gradient(#000,#000),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' shape-rendering='crispEdges'%3E%3Crect width='12' height='3'/%3E%3Crect x='3' y='3' width='6' height='3'/%3E%3Crect x='5' y='6' width='2' height='3'/%3E%3C/svg%3E");
  mask-image:linear-gradient(#000,#000),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' shape-rendering='crispEdges'%3E%3Crect width='12' height='3'/%3E%3Crect x='3' y='3' width='6' height='3'/%3E%3Crect x='5' y='6' width='2' height='3'/%3E%3C/svg%3E");
  -webkit-mask-size:100% calc(100% - 9px),12px 9px;mask-size:100% calc(100% - 9px),12px 9px;
  -webkit-mask-position:0 0,0 100%;mask-position:0 0,0 100%;
  -webkit-mask-repeat:no-repeat,repeat-x;mask-repeat:no-repeat,repeat-x;
}
.bp-receipt_head{text-align:center;padding-bottom:1rem;margin-bottom:1rem!important;border-bottom:1px dashed #0b0a0e59}
.bp-receipt_items{display:flex;flex-direction:column;gap:.5rem;margin:0}
.case-study_content .bp-receipt_items>div{display:flex;align-items:baseline;gap:.5rem;margin:0}
.case-study_content .bp-receipt_items dt{flex:0 1 auto;min-width:0;margin:0;color:var(--bp-ink)}
.bp-receipt_items div:after{content:"";order:2;flex:1 1 1.5rem;min-width:1.5rem;border-bottom:2px dotted #0b0a0e66;transform:translateY(-.25em)}
.case-study_content .bp-receipt_items dd{order:3;margin:0;color:var(--bp-ink);white-space:nowrap}
.bp-receipt_total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:1rem!important;padding-top:1rem;border-top:1px dashed #0b0a0e59}
.bp-receipt_total span:last-child{text-align:right}
.bp-receipt_foot{margin-top:1rem!important;color:#0b0a0e99;text-align:center}
.bp-receipt_foot a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.bp-receipt_foot a:hover,.bp-receipt_foot a:focus-visible{color:var(--bp-ink)}

/* Side notes: a dither bar beside short uppercase text. */
.case-metrics_note{position:relative;max-width:28rem;padding-left:1.25rem;text-transform:uppercase;letter-spacing:.04em;line-height:1.6;margin:0 0 1.75rem}
.case-metrics_note:before{content:"";position:absolute;left:0;top:.25em;bottom:.25em;width:6px;background:repeating-conic-gradient(#ffffff66 0 25%,transparent 0 50%) 0 0/4px 4px}

/* ---------- Box diagrams ---------- */
.bp-diagram{margin:1.75rem 0 0;padding:0}
.bp-diagram_label{display:flex;align-items:center;gap:.5rem;color:var(--purple,#b87bfb)}
.bp-diagram_label:before,.bp-diagram_label:after{content:"";align-self:flex-end;height:.55em;border-top:1px solid var(--bp-line);margin-bottom:.1em}
.bp-diagram_label:before{flex:0 0 1rem;border-left:1px solid var(--bp-line)}
.bp-diagram_label:after{flex:1 1 auto;border-right:1px solid var(--bp-line)}
.bp-diagram_body{padding:1.25rem 1rem 1rem;border:1px solid var(--bp-line);border-top:0;background-image:radial-gradient(circle,#b87bfb33 1px,transparent 1.25px);background-size:12px 12px}
.bp-diagram_note{margin:1rem 0 0;color:var(--bp-dim)}
.bp-node{display:flex;flex-direction:column;gap:.35rem;min-width:0;padding:.75rem;border:1px solid var(--bp-line-strong);background:#1d1d1fe6}
.bp-node strong{color:var(--white,#fff);text-transform:uppercase;letter-spacing:.06em}
.bp-node span{color:var(--bp-dim)}
.bp-link{display:flex;align-items:center;justify-content:center;padding:0 .5rem;color:var(--purple,#b87bfb);white-space:nowrap}
.bp-link:before{content:attr(data-h)}
.bp-flow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:stretch}
.bp-scale{display:grid;grid-template-columns:minmax(0,.9fr) auto minmax(0,1.3fr);align-items:center}
.bp-pages{display:flex;flex-direction:column;gap:.6rem;min-width:0}
.bp-pages_grid{display:grid;grid-template-columns:repeat(20,6px);gap:3px}
.bp-pages_grid i{display:block;width:6px;height:6px;background:var(--purple,#b87bfb)}
.bp-pages_grid.is-filling i{background:#b87bfb33}
.bp-pages_grid.is-filling i.is-on{background:var(--purple,#b87bfb)}
.bp-pages_legend{color:var(--bp-dim)}
.bp-keys{position:relative;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));height:7.5rem;border:1px solid var(--bp-line-strong);background:#1d1d1fe6}
.bp-key{display:flex;align-items:flex-end;justify-content:center;padding-bottom:.5rem;color:#ffffffbf;border-right:1px solid var(--bp-line);transition:background-color .08s steps(1,end),color .08s steps(1,end)}
.bp-key:nth-child(10){border-right:0}
.bp-key--black{position:absolute;top:0;left:calc(var(--at) * 10%);width:7%;height:58%;padding-bottom:.35rem;transform:translateX(-50%);background:var(--bp-ink);border:1px solid var(--bp-line-strong);border-top:0;color:var(--purple,#b87bfb)}
.bp-key:hover,.bp-key.is-down{background:var(--purple,#b87bfb);color:var(--bp-ink)}

/* ---------- Globe banner: live local times ---------- */
.bp-hud{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 2rem;margin:2.5rem 0 0;padding:.75rem 1.25rem 0;border-top:1px solid var(--bp-line)}
.bp-hud div{display:flex;gap:.6rem}
.bp-hud dt{color:var(--purple,#b87bfb)}
.bp-hud dd{margin:0;color:#ffffffbf;font-variant-numeric:tabular-nums}

/* ---------- Header and contact cards: a clipped document corner ---------- */
#header .works-intro_content-wrapper,.works-intro_content-wrapper-bottom{clip-path:polygon(-6px -6px,calc(100% - 28px) -6px,calc(100% + 6px) 28px,calc(100% + 6px) calc(100% + 6px),-6px calc(100% + 6px))}
#header .works-intro_content-wrapper:after,.works-intro_content-wrapper-bottom:after{content:"";position:absolute;z-index:2;top:0;right:0;width:22px;height:22px;background:linear-gradient(45deg,transparent calc(50% - 1px),#ffffff38 calc(50% - 1px) calc(50% + 0px),transparent calc(50% + 0px));pointer-events:none}

/* ---------- Story as a punched note page ---------- */
.section_works-services .works-services_list{position:relative;max-width:58rem;margin:2rem 1rem 0;padding:var(--bp-rule) 1.5rem var(--bp-rule) 5.5rem}
/* The paper sits on a -3 layer so the fixed story images (z-index -2) still show above it. */
.section_works-services .works-services_list:after{
  content:"";position:absolute;z-index:-3;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,transparent 4.25rem,#b87bfb66 4.25rem calc(4.25rem + 1px),transparent calc(4.25rem + 1px)),
    repeating-linear-gradient(to bottom,transparent 0 calc(var(--bp-rule) - 1px),#ffffff12 calc(var(--bp-rule) - 1px) var(--bp-rule)),
    #232326;
  box-shadow:inset 0 0 0 1px #ffffff1a,6px 6px 0 var(--bp-ink);
}
.section_works-services .works-services_list:before{content:"";position:absolute;left:1.4rem;top:0;bottom:0;width:1.5rem;pointer-events:none;background:radial-gradient(circle at 50% 50%,#101012 0 .6rem,#ffffff1f .6rem calc(.6rem + 1px),transparent calc(.6rem + 1.5px)) 0 0/1.5rem 7rem repeat-y}
.section_works-services .works-services_list>.spacer-medium{display:none}
.section_works-services .works-story_paragraph-wrapper{padding:0 0 var(--bp-rule);box-shadow:none;background:transparent}
.section_works-services .works-story_paragraph-wrapper:last-of-type{padding-bottom:0}
.section_works-services .works-story_paragraph[class]{margin-left:0;max-width:40rem;line-height:var(--bp-rule)}

@media(max-width:1100px){
  .bp-flow{grid-template-columns:minmax(0,1fr);gap:0}
  .bp-flow .bp-link,.bp-scale .bp-link{padding:.35rem 0}
  .bp-flow .bp-link:before,.bp-scale .bp-link:before{content:attr(data-v)}
  .bp-scale{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:1100px){
  .bp-pass,.bp-admit{--stub:4.25rem}
  .bp-stub{padding-inline:.5rem}
}
@media(max-width:991px){
  .bp-fields{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
}
@media(max-width:767px){
  .case-artifact{max-width:none}
  .bp-pass,.bp-admit{--stub:4.25rem}
  .bp-pass_main,.bp-admit_main{padding:1rem}
  .bp-stub{padding:1rem .5rem}
  .bp-receipt{max-width:none}
  .bp-keys{height:6rem}
  .bp-hud{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:.5rem 1.5rem;padding-inline:0}
  .section_works-services .works-services_list{margin:1.5rem 0 0;padding:var(--bp-rule) 1rem var(--bp-rule) 3.25rem}
  .section_works-services .works-services_list:after{background:linear-gradient(90deg,transparent 2.5rem,#b87bfb66 2.5rem calc(2.5rem + 1px),transparent calc(2.5rem + 1px)),repeating-linear-gradient(to bottom,transparent 0 calc(var(--bp-rule) - 1px),#ffffff12 calc(var(--bp-rule) - 1px) var(--bp-rule)),#232326}
  .section_works-services .works-services_list:before{left:.6rem;width:1.1rem;background-size:1.1rem 6rem;background-image:radial-gradient(circle at 50% 50%,#101012 0 .42rem,#ffffff1f .42rem calc(.42rem + 1px),transparent calc(.42rem + 1.5px))}
}
@media print{
  .case-artifact{filter:none}
}