@font-face{font-family:'IBM Plex Mono';src:url(fonts/ibm-plex-mono-400.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(fonts/ibm-plex-mono-700.ttf) format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Architects Daughter';src:url(fonts/ArchitectsDaughter-Regular.ttf) format('truetype');font-display:swap}
/* Selawik: open (OFL) stand-in for the Segoe UI face in the chosen wordmark */
@font-face{font-family:'Selawik';src:url(fonts/selawksb.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Selawik';src:url(fonts/selawksl.woff2) format('woff2');font-weight:300;font-display:swap}

:root{
  color-scheme:dark;
  --board:#1a1a19;
  --chalk:#efeee6;
  --chalk-2:#dddcd2;
  --chalk-3:#b9b8ae;
  --line:#dcdbd0;
  --gold:#d6b16a;
  --gold-hi:#f0d699;
  --gold-lo:#9a7234;
  --ink:#1b1408;
  --pad:clamp(16px,5.6vw,80px);
}
*{box-sizing:border-box}
html{background:var(--board)}
body{margin:0;color:var(--chalk);font:400 15px/1.7 'IBM Plex Mono',ui-monospace,monospace;background:var(--board);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.defs{position:absolute;width:0;height:0;overflow:hidden}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px dashed var(--gold-hi);outline-offset:5px}
::selection{background:#d6b16a55;color:#fff}

/* The board carries its own texture. Phones and narrow windows scroll; landscape screens see one board. */
.board{position:relative;max-width:1440px;margin:0 auto;padding:0 var(--pad);overflow:hidden;
  background:var(--board) url(board.jpg) top center/1440px auto repeat-y}
/* Landscape 1100px+: the board is composed at 1600px and scaled to the window width (script in index.html). */
.fit .board{width:1600px;max-width:none;padding:0 64px;zoom:var(--z);display:flex;flex-direction:column;background-size:1600px auto}
/* "one screen" option: the whole board fits the window, texture behind it fills the rest */
/* the chalk drawings belong to the board, so they keep their place next to the content at any window size;
   the margins outside it show the same board texture without drawings, and the two fade into each other */
.one body{background:var(--board) url(board-plain.jpg) center top/cover no-repeat fixed}
.one .board{min-height:max(960px,calc(100vh / var(--z)));background:none;isolation:isolate}
.one .board::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(board.jpg) top center/1600px auto repeat-y;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 150px,#000 calc(100% - 150px),transparent);mask-image:linear-gradient(90deg,transparent,#000 150px,#000 calc(100% - 150px),transparent)}
.fit main{flex:1;display:flex;flex-direction:column}
.fit dialog{zoom:var(--z)}

/* chalk lettering */
.chalk,.chalk-sm,.chalk-wm{display:inline-block;filter:url(#chalk)}
.chalk-sm{filter:url(#chalk-sm)}
.chalk-wm{filter:url(#chalk-wm)}
.hand{font-family:'Architects Daughter','IBM Plex Mono',cursive}

/* smudgy residue behind heavy text: it was written, wiped, and written again */
.smudge{position:relative;isolation:isolate}
.smudge::before{content:'';position:absolute;inset:-75% -14%;z-index:-1;pointer-events:none;background:url(smudge-a.png) center/100% 100% no-repeat;opacity:.8}
.smudge-b::before{background-image:url(smudge-b.png)}
.smudge-sm::before{inset:-110% -16% -110% -12%;opacity:.3}

/* hand-drawn rules */
.rule{border:0;height:2px;margin:0;flex:none;background:linear-gradient(90deg,#dcdbd000,#dcdbd0aa 6%,#e6e5da88 40%,#d5d4c8b0 70%,#dcdbd055 96%,#dcdbd000);filter:url(#chalk-line)}

/* ---------- actions: solid gold buttons (anything gold and solid can be clicked) ---------- */
.btn-gold{position:relative;display:inline-flex;align-items:center;gap:14px;padding:11px 20px 11px 22px;border-radius:3px;
  font-weight:700;font-size:15px;letter-spacing:.2px;color:var(--ink);
  background:linear-gradient(160deg,#f3dda6 0%,#dcb872 38%,#c39448 72%,#e2c486 100%);
  box-shadow:inset 0 1px 0 #fff3cf99,inset 0 -2px 0 #8a5f2a66,0 8px 22px #000b,0 0 0 1px #6d4c1f;
  transition:transform .15s,box-shadow .15s,filter .15s}
.btn-gold span{font-size:18px;line-height:1;transition:transform .15s}
.btn-gold:hover{filter:brightness(1.08) saturate(1.05);transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff3cfcc,inset 0 -2px 0 #8a5f2a66,0 12px 30px #000c,0 0 26px #d6b16a55,0 0 0 1px #6d4c1f}
.btn-gold:hover span{transform:translate(2px,-2px)}
.btn-gold:active{transform:translateY(0);filter:brightness(.96)}

/* top bar: small logo (Tech under unshey, like the big wordmark) and the place, centred on one line */
.topbar{height:76px;flex:none;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:22px}
.brand-logo{display:flex;align-items:flex-end;gap:1px;color:var(--chalk);text-decoration:none;font-family:'Selawik','Segoe UI',system-ui,sans-serif}
.brand-logo img{width:40px;height:auto;margin-bottom:12px;filter:drop-shadow(0 4px 8px #000c)}
.bl-words{display:flex;flex-direction:column;align-items:flex-end}
.bl-unshey{font-weight:600;font-size:34px;line-height:.8;letter-spacing:-.8px}
.bl-tech{font-weight:300;font-size:15px;line-height:1;margin-top:3px;color:var(--chalk-2)}
.place{font-size:14px;letter-spacing:.8px;color:var(--chalk-2);padding-left:22px;border-left:1.5px solid #dcdbd055;line-height:30px}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:center;padding:26px 0 0}
.stack{padding-bottom:26px}
.stack{text-align:center;display:flex;flex-direction:column;align-items:center}
.wordmark{margin:0;display:grid;grid-template-columns:auto auto;align-items:end;justify-items:start;column-gap:.05em;font:600 108px/1 'Selawik','Segoe UI',system-ui,sans-serif;letter-spacing:-2px;color:var(--chalk)}
.wm-m{grid-row:1;width:.98em;height:auto;margin-bottom:.03em;filter:drop-shadow(0 10px 16px #000c) drop-shadow(0 0 18px #d6b16a2e)}
.wm-unshey{grid-row:1;line-height:.8;padding-bottom:.02em}
.wm-tech{grid-column:2;justify-self:end;font-weight:300;font-size:.44em;letter-spacing:-.5px;line-height:1;margin-top:.06em;color:var(--chalk-2)}
.lede{margin:20px 0 0;max-width:860px;text-wrap:balance;font-size:23px;line-height:1.45;letter-spacing:.2px;color:var(--chalk)}
.maker{position:relative;margin:0 -30px 0 0;align-self:end}
.maker img{display:block;width:100%;max-width:600px;margin-left:auto;height:auto}
.notes{position:absolute;inset:0;pointer-events:none}
/* chalk notes beside the drawing (Architects Daughter), like the c2 margin notes */
.note{position:absolute;margin:0;font-size:17px;line-height:1.45;letter-spacing:.6px;color:#dedcd0;transform:rotate(-6deg);white-space:nowrap}
.note b{font-weight:400;color:var(--gold-hi);font-size:1.25em}
.note::after{content:'';display:block;width:28px;height:1.5px;margin-top:8px;background:#c9c8bd99}
.note-a{left:-4%;top:-4%}
.note-team{right:-1%;top:14%;transform:rotate(-3deg);font-size:19px;display:flex;align-items:center;gap:6px}
.note-team::after{display:none}
.team-arrow{width:42px;height:20px}
.maker::after{content:'';position:absolute;inset:-6% -4%;background:url(smudge-b.png) center/100% 100% no-repeat;opacity:.2;mix-blend-mode:screen;pointer-events:none;transform:scaleX(-1)}

/* ---------- grow the pie ---------- */
.grow{display:grid;grid-template-columns:minmax(0,370px) minmax(0,1fr) minmax(0,360px);column-gap:34px;align-items:center;padding:22px 0 0;position:relative}
.grow-copy{align-self:start;position:relative}
.grow-copy .years{font-weight:700;color:var(--gold-hi)}
.grow h2{margin:0;font-weight:400;font-size:42px;line-height:1.1;letter-spacing:-1.3px;white-space:nowrap}
.grow-copy>p{margin:18px 0 0;font-size:14.5px;line-height:1.65;color:var(--chalk-2)}
.pie-col{min-width:0;display:flex;justify-content:center}
.pie-wrap{width:100%;max-width:490px;position:relative}
#leader{display:none}
#pie{display:block;width:100%;height:auto;overflow:visible}
.slice{cursor:pointer;outline:none}
.slice:hover .edge{stroke:#f6e7bf;stroke-opacity:1}
.slice:focus-visible .edge{stroke:var(--gold-hi);stroke-width:2.6;stroke-dasharray:5 4}
.hint{position:absolute;left:2%;bottom:6%;margin:0;display:flex;align-items:center;gap:8px;font-size:17px;color:#d9d8ce;transform:rotate(-4deg);pointer-events:none;filter:url(#chalk-sm)}
.hint svg{width:34px;height:20px}
.callout{align-self:center;min-width:0;position:relative;isolation:isolate;padding:10px 0}
.case-icon{position:absolute;z-index:-1;right:-24px;top:50%;width:230px;height:230px;translate:0 -54%;opacity:.17;overflow:visible;pointer-events:none}
.sector{margin:0 0 12px;font-size:18px;letter-spacing:1.8px;text-transform:uppercase;color:var(--gold-hi)}
.sentence{margin:0;font-size:23px;line-height:1.4;letter-spacing:-.3px;min-height:5.6em;transition:opacity .2s}
.tags{margin:12px 0 0;font-size:13px;letter-spacing:.4px;color:var(--chalk-3);display:flex;flex-wrap:wrap;align-items:center;gap:6px 0}
.tag{display:inline-flex;align-items:center;gap:7px}
.tag+.tag::before{content:'\00b7';margin:0 10px}
.tag svg{display:none;width:22px;height:22px;fill:#e2e1d6;filter:url(#chalk-pie)}
[data-tags=logos] .tag svg,[data-tags=logos-only] .tag svg{display:block}
[data-tags=logos] .tags,[data-tags=logos-only] .tags{gap:10px 0}
[data-tags=logos] .tag+.tag::before,[data-tags=logos-only] .tag+.tag::before{content:'';margin:0 9px}
[data-tags=logos-only] .tag.has-logo svg{width:28px;height:28px}
/* the AWS mark is a wide wordmark, so it needs more width to read at the same size */
.tag.logo-amazonwebservices svg{width:46px!important;height:28px!important}
[data-tags=logos-only] .tag.logo-amazonwebservices svg{width:46px!important;height:30px!important}
[data-tags=logos-only] .tag.has-logo .tag-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.callout.out .sentence,.callout.out .case-icon,.callout.out .sector,.callout.out .tags{opacity:0}
.case-icon,.sector,.tags{transition:opacity .2s}
.callout.out .case-icon{opacity:0}
/* plain chalk arrows: big enough to hit, gold on hover */
.arrows{display:flex;gap:6px;margin:10px 0 0 -12px}
.arrows button{font-size:34px;line-height:1;width:56px;height:48px;display:grid;place-items:center;color:var(--chalk);transition:color .15s}
.arrows button:hover{color:var(--gold-hi)}
.arrows button span{transition:transform .15s}
#prev:hover span{transform:translateX(-4px)}#next:hover span{transform:translateX(4px)}

/* ---------- principles ---------- */
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:18px 0 12px;margin-top:auto}
.principles article{padding:0 34px;border-left:1.5px solid #dcdbd055;position:relative}
.principles article:first-child{border-left:0;padding-left:0}
.principles article:last-child{padding-right:0}
.p-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.icon{flex:none;width:54px;height:24px;margin-left:-6px;overflow:visible}
.principles h3{margin:0;font-weight:400;font-size:21px;letter-spacing:-.3px;line-height:1.3}
.principles p{margin:0;font-size:14.5px;line-height:1.55;color:var(--chalk-2)}

/* ---------- footer: name, the second gold button, place ---------- */
footer{position:relative;z-index:1;flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:10px 0 12px;font-size:14px;color:var(--chalk-2)}
footer::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,#dcdbd000,#dcdbd0aa 6%,#e6e5da88 40%,#d5d4c8b0 70%,#dcdbd055 96%,#dcdbd000);filter:url(#chalk-line)}
.foot-place{justify-self:end;color:var(--chalk-2)}
.dust-band{position:absolute;left:0;right:0;bottom:0;height:150px;background:url(dust-band.png) left bottom/1440px 150px repeat-x;pointer-events:none;z-index:0}
/* fitted: the chalk powder runs along the whole bottom of the window, not just the board */
.one .dust-band{display:none}
.one body::after{content:'';position:fixed;left:0;right:0;bottom:0;height:calc(150px * var(--z));background:url(dust-band.png) left bottom/calc(1440px * var(--z)) 100% repeat-x;pointer-events:none}
footer{z-index:2}

/* ---------- dialog ---------- */
body.dialog-open{overflow:hidden}
dialog{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:var(--chalk);background:#1c1c1a url(board.jpg) 30% 40%/1440px auto;border:1.5px solid #cfcec488;padding:34px 34px 26px;box-shadow:0 30px 80px #000c}
.fit dialog{width:520px;max-height:calc(100dvh / var(--z) - 40px)}
dialog::backdrop{background:#000a;backdrop-filter:blur(2px)}
dialog h2{font-weight:400;font-size:28px;margin:0 40px 2px 0}
dialog>p{margin:0;font-size:14px;color:var(--chalk-2)}
.dialog-close{position:absolute;right:10px;top:8px;width:44px;height:44px;font-size:28px;border-radius:50%}
.dialog-close:hover{color:var(--gold-hi);background:#d6b16a1f}
dialog label{display:block;margin-top:16px;font-size:13px;color:var(--chalk-2)}
dialog input,dialog textarea{display:block;width:100%;margin-top:6px;padding:10px 11px;background:#0f0f0ecc;border:1.5px solid #a9a89e;border-radius:2px;transition:border-color .15s}
dialog input:hover,dialog textarea:hover{border-color:#d9d8ce}
dialog input:focus,dialog textarea:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px #d6b16a33}
dialog textarea{resize:vertical}
.submit{margin-top:22px}
.form-note,#form-status{font-size:12px;line-height:1.7;color:var(--chalk-3);margin:12px 0 0}
#form-status:empty{display:none}

/* ---------- not fitted (narrow or portrait): fluid, scrolling layout ---------- */
/* the board always reaches the bottom of the window */
.board{min-height:100vh;display:flex;flex-direction:column}
main{flex:1;display:flex;flex-direction:column}
/* 1000px+ keeps the desktop order: words | pie | the slice's text */
html:not(.fit) .grow{grid-template-columns:minmax(0,300px) minmax(0,1fr) minmax(0,300px);column-gap:28px}
/* medium widths: principles as rows, notes sit above the drawing, smaller intro line */
@media (max-width:1099px){
  html:not(.fit) .lede{font-size:clamp(18px,2.3vw,23px)}
  html:not(.fit) .notes{position:static}
  html:not(.fit) .note-a{position:relative;left:auto;top:auto;margin:0 0 4px 4px}
  html:not(.fit) .note-team{top:4%;right:-3%}
}
@media (min-width:821px) and (max-width:1099px){
  html:not(.fit) .principles{grid-template-columns:1fr;row-gap:18px}
  html:not(.fit) .principles article{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);column-gap:30px;padding:0;border-left:0}
  html:not(.fit) .p-head{margin:0}
}
@media (max-width:999px){
  html:not(.fit) .grow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  html:not(.fit) .grow-copy{grid-column:1/-1;grid-row:auto}
}
html:not(.fit) .wordmark{font-size:clamp(54px,8vw,104px)}
html:not(.fit) footer{padding-bottom:110px}
@media (max-width:820px){
  .notes{position:static}
  .note{font-size:14px;white-space:normal}
  .note-a{position:relative;left:auto;top:auto;margin:0 0 10px 6px}
  .note-team{display:none}
  .hero{grid-template-columns:1fr;padding-top:24px}
  .maker{margin:22px -8px 10px}
  html:not(.fit) .grow{grid-template-columns:1fr;row-gap:16px}
  #leader{display:none}
  .sentence{min-height:0;font-size:23px}
  .principles{grid-template-columns:1fr;gap:28px}
  .principles article,.principles article:first-child{border-left:0;padding:0}
}
@media (max-width:560px){
  .topbar{height:66px}
  .place{display:none}
  .bl-unshey{font-size:28px}.brand-logo img{width:34px;margin-bottom:10px}
  .btn-gold{font-size:14px;padding:10px 14px 10px 16px;gap:10px}
  html:not(.fit) .wordmark{font-size:clamp(50px,17vw,72px);letter-spacing:-1px}
  .lede{font-size:18px}
  .grow h2{font-size:36px}
  .smudge::before{inset:-50% -6%}
  .hint{font-size:15px}
  footer{grid-template-columns:1fr;justify-items:center;text-align:center;gap:12px}
  .foot-place{justify-self:center}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}