/* A shared reading scale; mobile display mode reflows instead of shrinking a board. */
:root {
  --profile-caption:14px; --profile-body:17px; --profile-heading:28px;
  --profile-number:48px; --profile-name:144px; --profile-object:104px;
  --profile-padding:28px; --profile-gap:16px; --profile-leading:1.75;
}
.slab[data-profile] { container-type:inline-size; text-align:left; color:var(--ink); background:var(--plaster); }
.slab[data-profile="identity"] { --plaster:var(--tone-blue); --profile-padding:24px; --profile-gap:12px; }
.slab[data-profile="about"] { --plaster:var(--tone-terracotta); }
.slab[data-profile="ai"] { --plaster:var(--tone-moss); }
.slab[data-profile="engineering"] { --plaster:var(--tone-rose); }
.slab[data-profile="numbers"] { --plaster:var(--tone-purple); }
.slab[data-profile="statement"] { --plaster:var(--tone-ochre); }
.profile-surface {
  position:absolute; inset:0; overflow:hidden; border-radius:inherit; padding:var(--profile-padding);
  display:flex; flex-direction:column; gap:var(--profile-gap); pointer-events:none; user-select:none;
  font-family:var(--font-body); font-weight:400; letter-spacing:0; text-align:left;
}
.profile-kicker { display:block; flex:none; font-size:var(--profile-caption); line-height:1.5; font-weight:500; letter-spacing:.06em; }
.profile-title,.statement-text { display:block; font-size:var(--profile-heading); line-height:1.35; font-weight:600; letter-spacing:-.035em; text-wrap:balance; }
.profile-content { display:flex; flex-direction:column; gap:16px; margin-top:auto; min-width:0; }
.profile-copy { display:block; font-size:var(--profile-body); line-height:var(--profile-leading); color:var(--ink); }
.profile-note { display:block; font-size:var(--profile-caption); line-height:1.65; color:#3c3c3b; opacity:.85; }
.profile-art { display:flex; align-items:center; flex:1; min-height:124px; padding:8px 0 16px; }
.identity-heading { display:flex; align-items:center; justify-content:space-between; flex:none; }
.identity-seal { width:20px; height:20px; border-radius:6px; transform:rotate(20deg); background:var(--tone-purple); box-shadow:inset 0 1px 1px #d9b7f7,1px 2px #9370b8,2px 4px #665079; }
.identity-art { display:flex; align-items:center; justify-content:flex-start; gap:clamp(24px,5cqw,48px); flex:1; min-height:160px; padding:8px 4px 12px; }
.sculpted-name {
  display:block; flex:none; font-family:var(--font-rounded); font-size:clamp(44px,11cqw,76px); font-weight:900; letter-spacing:-.055em; line-height:1;
  color:#F8DF72; transform:rotate(-5deg); -webkit-text-stroke:0;
  text-shadow:0 1px #e3c85f,0 2px #e3c85f,0 3px #c5a94c,0 4px #c5a94c,0 5px #9e883f,0 6px #9e883f,1px 9px 7px #26322e20;
}
.identity-avatar { display:block; flex:none; width:clamp(96px,19cqw,128px); height:auto; aspect-ratio:1; border:2px solid #000; border-radius:50%; object-fit:cover; background:#fff; box-shadow:none; }
[data-profile="identity"] .profile-title { font-size:32px; }
[data-profile="identity"] .profile-content { gap:12px; }
[data-profile="identity"] .profile-copy { font-size:16px; line-height:1.7; }
.identity-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 16px; padding-top:4px; }
.identity-process { display:flex; align-items:center; gap:18px; font-size:var(--profile-caption); line-height:1.6; }
.identity-actions { display:flex; align-items:center; gap:10px; margin-left:auto; pointer-events:auto; }
.identity-contact,.identity-willow { display:inline-flex; align-items:center; justify-content:center; flex:none; min-height:44px; padding:11px 16px; border:1px solid #3c3c3b80; border-radius:999px; color:inherit; font:600 14px/1.2 var(--font-body); letter-spacing:0; text-decoration:none; white-space:nowrap; }
.identity-willow { border-color:#76392e80; color:#76392e; }
.identity-contact span,.identity-willow span { margin-left:12px; }
.identity-contact:hover,.identity-willow:hover { background:rgb(255 255 255 / 24%); }
.identity-contact:focus-visible,.identity-willow:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.object-orbit { position:relative; display:block; width:var(--profile-object); height:var(--profile-object); }
.object-orbit i { position:absolute; inset:0; border:4px solid #526F6B; border-radius:50%; transform:rotate(-27deg) scaleY(.57); box-shadow:inset 0 2px 1px #91aaa5,0 3px #3d5652,0 8px 6px #31454119; }
.object-orbit b { position:absolute; width:44%; aspect-ratio:1; left:34%; top:23%; border-radius:50%; background:radial-gradient(circle at 32% 27%,#e3e4cf,#a9b596 45%,#74836a 83%); box-shadow:2px 6px 8px #485b3026; }
.object-ai,.object-code { font-family:var(--font-display); font-size:var(--profile-object); line-height:1; font-weight:850; letter-spacing:-.07em; transform:rotate(-8deg); color:#66526C; text-shadow:1px 1px #58465e,2px 2px #58465e,3px 3px #493b4e,4px 4px #493b4e,5px 5px #392f3d,7px 10px 8px #2d252f23; }
.object-code { color:#537B86; transform:rotate(5deg); text-shadow:0 1px #476c76,0 2px #476c76,0 3px #385a63,0 4px #385a63,0 5px #29474e,3px 8px 8px #213b4120; }
.profile-stats { flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:24px; padding:20px 0 4px; }
.profile-stat { display:flex; flex-direction:column; gap:6px; }
.profile-stat strong { font-size:var(--profile-number); line-height:1.1; font-weight:600; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.profile-stat > span { font-size:var(--profile-body); line-height:1.5; }
.statement-composition { flex:1; display:flex; align-items:center; gap:32px; min-height:0; }
.statement-content { min-width:0; display:flex; flex-direction:column; gap:14px; }
.object-workflow { position:relative; display:block; flex:none; width:96px; height:96px; }
.object-workflow i { position:absolute; display:block; width:52px; height:52px; border:2px solid #3c3c3b80; border-radius:12px; transform:rotate(-12deg); box-shadow:0 4px 0 #3c3c3b30; }
.object-workflow i:nth-child(1) { background:var(--tone-blue); left:0; top:39px; }
.object-workflow i:nth-child(2) { background:var(--tone-moss); left:21px; top:20px; }
.object-workflow i:nth-child(3) { background:var(--tone-purple); left:41px; top:0; }
@media (min-width:901px) and (max-width:1200px) {
  :root { --profile-padding:20px; --profile-body:16px; --profile-heading:24px; --profile-caption:13px; --profile-object:88px; --profile-number:42px; }
  .profile-art { min-height:112px; }
  .identity-art { gap:24px; }
  [data-profile="identity"] .profile-title { font-size:30px; }
  .identity-process { gap:10px; }
  .statement-composition { gap:20px; }
  .object-workflow { width:76px; height:80px; transform:scale(.85); transform-origin:0 50%; margin-right:-8px; }
}
@media (max-width:900px) {
  /* Readable portfolio cards have their own content heights; the game is a distinct compact state. */
  :root { --profile-padding:20px; --profile-caption:12px; --profile-body:15px; --profile-heading:22px; --profile-object:72px; --profile-number:34px; --profile-gap:14px; }
  .board[data-level="0"] .profile-surface { position:relative; inset:auto; min-height:100%; overflow:visible; }
  .board[data-level="0"] [data-profile="identity"] .profile-surface { padding:24px; gap:22px; }
  .board[data-level="0"] .identity-art { min-height:130px; flex:none; padding:6px 0 16px; gap:24px; }
  .board[data-level="0"] .sculpted-name { font-size:clamp(30px,11cqw,56px); }
  .board[data-level="0"] .identity-avatar { width:clamp(76px,25cqw,108px); }
  .board[data-level="0"] [data-profile="identity"] .profile-title { font-size:28px; }
  .board[data-level="0"] .identity-process { display:none; }
  .board[data-level="0"] .identity-footer { padding-top:4px; }
  .board[data-level="0"] .identity-actions { width:100%; justify-content:space-between; margin-left:0; }
  .board[data-level="0"] .identity-contact { font-size:15px; padding:12px 18px; }
  .board[data-level="0"] .identity-willow { font-size:15px; padding:12px 18px; }
  .board[data-level="0"] .profile-art { min-height:100px; flex:none; padding:6px 0 12px; }
  .board[data-level="0"] .profile-content { gap:14px; }
  .board[data-level="0"] .profile-copy { font-size:15px; line-height:1.8; }
  .board[data-level="0"] .profile-title { font-size:22px; }
  .board[data-level="0"] .profile-stats { padding:8px 0; gap:25px; }
  .board[data-level="0"] .profile-stat > span { font-size:14px; }
  .board[data-level="0"] .statement-composition { padding:14px 0 4px; gap:18px; }
  .board[data-level="0"] .statement-text { font-size:24px; }
  .board[data-level="0"] .object-workflow { width:76px; transform:scale(.8); transform-origin:0 50%; margin-right:-12px; }
  .board:not([data-level="0"]) .profile-surface { padding:10px; gap:10px; }
  .board:not([data-level="0"]) .profile-kicker { font-size:11px; letter-spacing:0; }
  .board:not([data-level="0"]) .profile-art { min-height:66px; flex:1; padding:6px 0 12px; }
  .board:not([data-level="0"]) .profile-title { font-size:16px; line-height:1.5; }
  .board:not([data-level="0"]) .profile-copy,.board:not([data-level="0"]) .profile-note,.board:not([data-level="0"]) .identity-process { display:none; }
  .board:not([data-level="0"]) .object-ai,.board:not([data-level="0"]) .object-code { font-size:54px; }
  .board:not([data-level="0"]) .object-orbit { width:56px; height:56px; }
  .board:not([data-level="0"]) .identity-art { min-height:76px; gap:10px; padding:8px 0 12px; }
  .board:not([data-level="0"]) .sculpted-name { font-size:clamp(18px,12cqw,36px); }
  .board:not([data-level="0"]) .identity-avatar { width:clamp(46px,28cqw,68px); }
  .board:not([data-level="0"]) .identity-contact { padding:8px 10px; font-size:12px; }
  .board:not([data-level="0"]) .identity-contact span { margin-left:6px; }
  .board:not([data-level="0"]) .profile-stats { gap:14px; padding:4px 0; }
  .board:not([data-level="0"]) .profile-stat strong { font-size:22px; }
  .board:not([data-level="0"]) .profile-stat > span { font-size:11px; }
  .board:not([data-level="0"]) .statement-composition { gap:8px; }
  .board:not([data-level="0"]) .statement-text { font-size:16px; }
  .board:not([data-level="0"]) .object-workflow { width:36px; height:48px; transform:scale(.43); transform-origin:0 0; margin-right:-2px; }
}
@media (max-width:360px) {
  .board[data-level="0"] .profile-surface { padding:20px; }
  .board[data-level="0"] [data-profile="identity"] .profile-surface { padding:20px; }
  .board[data-level="0"] .identity-art { gap:16px; }
  .board[data-level="0"] .profile-title { font-size:22px; }
  .board[data-level="0"] .profile-copy { font-size:16px; }
  .board[data-level="0"] .profile-stats { flex-direction:row; gap:12px; }
  .board[data-level="0"] .profile-stat strong { font-size:26px; }
  .board[data-level="0"] .profile-stat > span { font-size:12px; }
  .board[data-level="0"] .statement-composition { gap:10px; }
  .board[data-level="0"] .statement-text { font-size:21px; }
}

/* Desktop composition follows both dimensions of the live window. */
@media (min-width:901px) and (max-height:1079px) {
  :root { --profile-padding:clamp(12px,1.8dvh,20px); --profile-gap:clamp(6px,.9dvh,10px); --profile-caption:clamp(11px,1.5dvh,14px); --profile-body:clamp(12px,1.75dvh,17px); --profile-heading:clamp(18px,2.7dvh,28px); --profile-object:clamp(48px,8dvh,88px); --profile-number:clamp(26px,4.5dvh,46px); --profile-leading:1.55; }
  .slab[data-profile="identity"] { --profile-padding:clamp(12px,1.8dvh,20px); --profile-gap:clamp(6px,.9dvh,10px); }
  .profile-art { min-height:0; padding:4px 0 8px; }
  .profile-content,[data-profile="identity"] .profile-content { gap:clamp(6px,1dvh,10px); }
  .identity-art { min-height:0; gap:clamp(16px,3vw,36px); padding:4px 4px 8px; }
  .sculpted-name { font-size:clamp(32px,6dvh,64px); }
  .identity-avatar { width:clamp(56px,9dvh,96px); }
  [data-profile="identity"] .profile-title { font-size:var(--profile-heading); }
  [data-profile="identity"] .profile-copy { font-size:var(--profile-body); line-height:1.55; }
  .identity-process { font-size:var(--profile-caption); gap:12px; }
  .identity-contact { font-size:var(--profile-caption); padding:8px 12px; }
  .profile-stats { gap:8px; padding:4px 0; }
  .profile-stat { gap:3px; }
  .statement-composition { gap:18px; }
  .statement-content { gap:6px; }
  .object-workflow { scale:.7; margin:-14px; }
}

.board:not([data-level="0"]) .identity-willow{display:none}