/* Calm, legible connecting strokes. Keep their aspect ratio and arrowheads intact. */
.journey-ink-arrow,.journey-node:nth-child(2) .journey-ink-arrow{left:calc(100% + 4px);top:12px;width:calc(clamp(30px,4vw,64px) - 8px);height:30px;transform:none;stroke-width:1.7}
.journey-ink-arrow path{vector-effect:non-scaling-stroke}
@media(max-width:820px){.journey-ink-arrow,.journey-node:nth-child(2) .journey-ink-arrow{left:calc(100% + 2px);width:21px;height:18px;top:5px;stroke-width:1.3}}
/* A softly lit, grainy surface drawn from the workflow world. */
#map .mcard{background:#242b24;color:#fff;border:1px solid #d5d3bf55;isolation:isolate;overflow:hidden;box-shadow:0 24px 70px #0004}
#map .mcard::before{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(120deg,#151f20bc,#282b21b8),url(img/journey/define.jpg) center/cover;filter:blur(22px);transform:scale(1.2)}
#map .mcard::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.28;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.8' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}
#map .mcard h3,#map .mcard .mk,#map .mcard .mx{color:#fff}#map .mcard>p,#map .mproof p{color:#f4f3e8}#map .mproof .mono{color:#e4e4d5b3}#map .mproof{border-color:#ffffff30}
/* Selected images retain all their colour and opacity, including folder contents. */
#work .fld .it:hover,#work .fld .it:focus-visible{opacity:1!important;filter:none!important;z-index:200!important}
#work .fld .it:hover img,#work .fld .it:focus-visible img,.tile:hover .thumb,.tile:focus-within .thumb,.tile:hover img,.tile:focus-within img,.modal img{opacity:1!important;filter:none!important}
.layout-choices{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 0 44px;position:relative;z-index:35;font:12px/1.3 'Inter Tight',Arial,sans-serif}
.layout-choices>span{margin-right:auto;opacity:.6}.layout-choices button{color:inherit;background:none;border:1px solid currentColor;border-radius:30px;padding:10px 16px;opacity:.5;cursor:pointer}.layout-choices button[aria-pressed=true]{opacity:1;background:#f2f0e6;color:#18201e;border-color:#f2f0e6}.layout-choices button:focus-visible{outline:2px solid currentColor;outline-offset:4px}
#standards .note .paper,#standards .note:hover .paper,#standards .note.open .paper{background:transparent!important;border:0!important;box-shadow:none!important}
#standards .note .paper::before,#standards .note .paper::after{display:none!important}
#standards[data-layout]:not([data-layout='1']) .note{position:relative;left:auto;top:auto;width:auto;transform:rotate(calc(var(--r)*.4))!important;cursor:default}
#standards[data-layout]:not([data-layout='1']) .desk{display:grid;height:auto;min-height:0;gap:32px;align-items:start}
/* Portrait held between two columns of handwritten principles. */
#standards[data-layout='2'] .desk{grid-template-columns:1fr 1.25fr 1fr;grid-template-rows:repeat(3,auto)}
#standards[data-layout='2'] .standards-portrait{position:relative;grid-column:2;grid-row:1/4;width:100%;height:100%;min-height:850px}
#standards[data-layout='2'] .note:nth-of-type(odd){grid-column:1}#standards[data-layout='2'] .note:nth-of-type(even){grid-column:3}
#standards[data-layout='2'] .p1,#standards[data-layout='2'] .p2{grid-row:1}#standards[data-layout='2'] .p3,#standards[data-layout='2'] .p4{grid-row:2}#standards[data-layout='2'] .p5,#standards[data-layout='2'] .p6{grid-row:3}
#standards[data-layout='2'] .standards-portrait-copy h2{font-size:clamp(48px,5.2vw,85px)}
/* An editorial list, paired with a quiet portrait on the right. */
#standards[data-layout='3'] .desk{grid-template-columns:1.4fr 1fr;gap:0 60px}
#standards[data-layout='3'] .standards-portrait{position:sticky;top:95px;grid-column:2;grid-row:1/7;width:100%;height:740px}
#standards[data-layout='3'] .note{grid-column:1;transform:none!important;border-bottom:1px solid #ffffff25}
#standards[data-layout='3'] .note .paper{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;min-height:180px;padding:18px 0}
#standards[data-layout='3'] .note .hw{height:125px;margin:0;width:100%}#standards[data-layout='3'] .note .paper>p{font-size:14px}
/* Full portrait atmosphere behind a spacious wall of principles. */
#standards[data-layout='4'] .desk{grid-template-columns:repeat(3,1fr);padding:360px 3% 40px;gap:40px;isolation:isolate}
#standards[data-layout='4'] .standards-portrait{inset:0;width:100%;height:100%;opacity:.8;z-index:-1}
#standards[data-layout='4'] .standards-photo,#standards[data-layout='4'] .standards-particles{opacity:.22}
#standards[data-layout='4'] .standards-portrait-copy{top:30px;bottom:auto;text-align:center;left:0;right:0}
#standards[data-layout='4'] .standards-portrait-copy h2 br{display:none}#standards[data-layout='4'] .standards-portrait-copy p{display:none}
#standards[data-layout='4'] .note .paper>p{font-size:15px;max-width:29ch;margin:auto}#standards[data-layout='4'] .note .hw{height:150px}
/* Career: preserve every role and date across four reading patterns. */
#credits .career-heading{font:400 clamp(42px,6vw,96px)/1 'Inter Tight',Arial,sans-serif;letter-spacing:-.05em;margin:0 0 65px}
#credits .layout-choices button[aria-pressed=true]{background:#18201e;color:white;border-color:#18201e}
#credits .ds-ch li{opacity:1;padding:35px 0;min-height:0}
#credits .ds-ch li em.it{text-decoration:none;font-style:normal;color:inherit!important;-webkit-text-fill-color:currentColor!important}
#credits .ds-ch li p{color:#555b53}#credits .ds-side{position:static}
#credits .ds-lede{max-width:32ch}
#credits[data-layout='1'] .ds{grid-template-columns:240px 1fr;gap:75px}#credits[data-layout='1'] .ds-port{max-width:220px;aspect-ratio:1}
#credits[data-layout='1'] .ds-ch{padding:0}#credits[data-layout='1'] .ds-ch li{border-top:1px solid #18201e30;grid-template-columns:110px 1fr}
#credits[data-layout='1'] .ds-ch li em.it{font-size:38px}#credits[data-layout='1'] .ds-ch li b{font-size:30px}
#credits[data-layout='2'] .ds{display:block}#credits[data-layout='2'] .ds-side{display:none}#credits[data-layout='2'] .ds-ch{position:relative;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:90px}
#credits[data-layout='2'] .ds-ch::before{content:'';position:absolute;top:0;bottom:0;left:50%;border-left:1px solid #18201e50}
#credits[data-layout='2'] .ds-ch li{position:relative;display:block;padding:25px 0 45px}#credits[data-layout='2'] .ds-ch li:nth-child(odd){grid-column:1}#credits[data-layout='2'] .ds-ch li:nth-child(even){grid-column:2;margin-top:120px}
#credits[data-layout='2'] .ds-ch li::before{content:'';position:absolute;top:36px;width:9px;height:9px;background:#18201e;border-radius:50%;right:-50px}#credits[data-layout='2'] .ds-ch li:nth-child(even)::before{left:-49px;right:auto}
#credits[data-layout='2'] .ds-ch li em.it{display:block;font-size:65px;margin-bottom:20px}#credits[data-layout='2'] .ds-ch li b{font-size:33px}
#credits[data-layout='3'] .ds{display:block}#credits[data-layout='3'] .ds-side{display:none}#credits[data-layout='3'] .ds-ch{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;padding:0}
#credits[data-layout='3'] .ds-ch li{display:flex;flex-direction:column;border-top:1px solid #18201e45;padding:25px 0;gap:14px}#credits[data-layout='3'] .ds-ch li em.it{font-size:65px;margin-bottom:30px}#credits[data-layout='3'] .ds-ch li b{font-size:29px}#credits[data-layout='3'] .ds-ch li p{margin:0}
#credits[data-layout='4'] .ds{display:block}#credits[data-layout='4'] .ds-side{display:none}#credits[data-layout='4'] .ds-ch{display:flex;gap:35px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 30px;scrollbar-color:#18201e #e7e9e3}
#credits[data-layout='4'] .ds-ch li{display:block;flex:0 0 340px;scroll-snap-align:start;border-top:1px solid #18201e55;padding:30px 0}#credits[data-layout='4'] .ds-ch li em.it{display:block;font-size:90px;margin-bottom:50px}#credits[data-layout='4'] .ds-ch li b{font-size:33px}
@media(max-width:820px){
.layout-choices{gap:8px;margin-bottom:32px}.layout-choices>span{width:100%;margin-bottom:8px}.layout-choices button{padding:9px 12px;font-size:11px}
#standards[data-layout='2'] .desk,#standards[data-layout='3'] .desk,#standards[data-layout='4'] .desk{grid-template-columns:1fr 1fr;gap:24px 14px;padding:0}
#standards[data-layout='2'] .standards-portrait,#standards[data-layout='3'] .standards-portrait,#standards[data-layout='4'] .standards-portrait{position:relative;grid-column:1/-1;grid-row:auto;min-height:0;height:480px;width:100%;inset:auto;z-index:0}
#standards[data-layout='2'] .note,#standards[data-layout='3'] .note,#standards[data-layout='4'] .note{grid-column:auto;grid-row:auto}
#standards[data-layout='3'] .note .paper{display:block;min-height:290px}#standards[data-layout='3'] .note .paper>p,#standards[data-layout='4'] .note .paper>p{font-size:12px}
#standards[data-layout='4'] .standards-portrait-copy{top:140px}#standards[data-layout='4'] .standards-portrait-copy h2{font-size:56px}
#credits .career-heading{margin-bottom:40px}#credits[data-layout='1'] .ds{grid-template-columns:1fr;gap:32px}#credits[data-layout='1'] .ds-side{display:none}
#credits[data-layout='1'] .ds-ch li{grid-template-columns:70px 1fr;gap:15px}#credits[data-layout='1'] .ds-ch li em.it{font-size:28px}#credits[data-layout='1'] .ds-ch li b{font-size:25px}
#credits[data-layout='2'] .ds-ch{display:block;padding-left:25px}#credits[data-layout='2'] .ds-ch::before{left:0}#credits[data-layout='2'] .ds-ch li:nth-child(even){margin-top:0}#credits[data-layout='2'] .ds-ch li::before,#credits[data-layout='2'] .ds-ch li:nth-child(even)::before{left:-29px}
#credits[data-layout='3'] .ds-ch{grid-template-columns:1fr 1fr;gap:25px}#credits[data-layout='3'] .ds-ch li b{font-size:23px}#credits[data-layout='3'] .ds-ch li em.it{font-size:43px}#credits[data-layout='3'] .ds-ch li p{font-size:14px}
#credits[data-layout='4'] .ds-ch li{flex-basis:85%;} }
#standards[data-layout='3'] .desk .note{transform:none!important}
#credits[data-layout='1'] .ds-ch li em.it{font-size:38px!important}
#credits[data-layout='2'] .ds-ch li em.it,#credits[data-layout='3'] .ds-ch li em.it{font-size:65px!important}
#credits[data-layout='4'] .ds-ch li em.it{font-size:90px!important}
#credits .ds,#credits .ds-ch{min-width:0;max-width:100%}
.career-sequence-nav{display:none;gap:12px;justify-content:flex-end;margin-bottom:25px}.career-sequence-nav button{border:1px solid #18201e55;background:none;border-radius:50%;width:46px;height:46px;font-size:23px;cursor:pointer}
#credits[data-layout='4'] .career-sequence-nav{display:flex}
@media(max-width:820px){#credits[data-layout='1'] .ds-ch li em.it{font-size:28px!important}#credits[data-layout='3'] .ds-ch li em.it{font-size:43px!important}}
/* Flowing connectors sit in the centre of the gap and beside the step labels. */
.journey-ink-arrow,.journey-node:nth-child(2) .journey-ink-arrow{left:calc(100% + clamp(30px,4vw,64px)/2);top:calc(27px + 15px + .6em);width:calc(clamp(30px,4vw,64px) - 12px);height:32px;transform:translate(-50%,-50%);stroke-width:1.5}
#map .mcard::before{background:radial-gradient(ellipse at 85% 15%,hsl(var(--popup-glow,250) 85% 53% / .92),transparent 72%),radial-gradient(ellipse at 0% 100%,hsl(var(--popup-hue,185) 85% 37%),transparent 80%),linear-gradient(135deg,hsl(var(--popup-hue,185) 77% 27%),hsl(var(--popup-glow,250) 70% 18%));filter:blur(18px)}
#map .mcard::after{opacity:.24}
.career-visual{display:none}
#credits[data-layout='4'] .career-visual{display:block;width:100%;height:auto;aspect-ratio:430/230;object-fit:cover;margin:0 0 28px;filter:none;opacity:1}
#credits[data-layout='4'] .ds-ch li{padding-top:0;border-top:0}
#credits[data-layout='4'] .ds-ch li em.it{margin-bottom:24px}
@media(max-width:820px){.journey-ink-arrow,.journey-node:nth-child(2) .journey-ink-arrow{left:calc(100% + 11px);top:calc(22px + 12px + .6em);width:20px;height:23px;stroke-width:1.2}}
/* Keep white copy readable over the brighter colour combinations. */
#map .mcard::before{filter:blur(18px) brightness(.64)}
#map .mproof .mono{color:#ffffffe0}
/* Career scenes share the site's photographic, grainy atmosphere. */
#credits[data-layout='4'] .career-visual{position:relative;isolation:isolate;overflow:hidden;background:#222b25;aspect-ratio:430/260;filter:none}
.career-visual img,.career-visual canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.career-visual img{filter:blur(5px) saturate(.8);opacity:.7}
.career-visual canvas{opacity:.95}
.career-visual::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,#31423725,transparent 60%,#201e2340);box-shadow:inset 0 0 30px #17201935}
/* A full architectural field, with fine construction lines across the scene. */
#standards.atelier{position:relative;isolation:isolate;background:#17211f url(img/standards-ai-atelier.jpg) center top/cover no-repeat;padding:65px 6% 85px;overflow:hidden}
#standards.atelier::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#10161530 0%,#10161545 35%,#10161598 100%);pointer-events:none}
.atelier-lines{position:absolute;inset:0;width:100%;height:100%;color:#f7edcf;opacity:.18;pointer-events:none;z-index:0}
#standards.atelier .row-no{position:relative;margin-bottom:70px}
.atelier-heading{position:relative;max-width:650px;margin-bottom:70px}.atelier-heading>span{font-size:10px;letter-spacing:.13em;color:#f5efdfb0}.atelier-heading h2{font:400 clamp(56px,7.2vw,112px)/.98 'Inter Tight',Arial,sans-serif;letter-spacing:-.055em;margin:20px 0}.atelier-heading p{font:18px/1.5 'Inter Tight',Arial,sans-serif;color:#f6f0e5d9}
#standards.atelier .desk{height:auto;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 55px}
#standards.atelier .note{position:relative;left:auto;top:auto;width:auto;transform:rotate(calc(var(--r)*.25))!important;cursor:default}
#standards.atelier .note .paper{padding:12px 10px;min-height:230px;background:transparent!important;box-shadow:none!important}
#standards.atelier .note .hw{height:130px;max-width:100%;width:100%;margin:0 0 18px;object-position:left center}
#standards.atelier .note .paper>p{font:14px/1.55 'Inter Tight',Arial,sans-serif;color:#f7f2e6e3;max-width:33ch;text-shadow:0 1px 12px #0007}
#credits[data-layout='4'] .career-visual img{filter:saturate(.9);opacity:1;transform:none!important}
#credits[data-layout='4'] .career-visual canvas{display:none}
.career-visual::after{background:linear-gradient(135deg,#3142370d,transparent 60%,#201e231a);box-shadow:none}
@media(max-width:820px){#standards.atelier{padding:45px 24px 65px;background-position:60% top}#standards.atelier .row-no{margin-bottom:50px}.atelier-heading{margin-bottom:45px}.atelier-heading p{font-size:16px}#standards.atelier .desk{grid-template-columns:1fr 1fr;gap:25px 18px}#standards.atelier .note .paper{padding:0;min-height:245px}#standards.atelier .note .hw{height:95px}#standards.atelier .note .paper>p{font-size:12px}.atelier-lines{opacity:.12}}
@media(max-width:480px){#standards.atelier .desk{grid-template-columns:1fr;gap:35px}#standards.atelier .note .paper{display:grid;grid-template-columns:.95fr 1fr;gap:18px;align-items:center;min-height:0}#standards.atelier .note .hw{height:120px;margin:0}#standards.atelier .note .paper>p{font-size:13px}.atelier-heading h2{font-size:60px}}