/* Fixed reading sizes shared by all six surfaces. Only named breakpoints change the scale.
   Spacing and hierarchy principles: Carbon Design System / spacing and typography. */
:root {
  --profile-caption:14px;
  --profile-body:18px;
  --profile-heading:28px;
  --profile-number:40px;
  --profile-name:152px;
  --profile-object:112px;
  --profile-padding:32px;
  --profile-gap:16px;
  --profile-leading:32px;
}
.slab[data-profile] { container-type:size; text-align:left; color:var(--surface-ink,var(--ink)); }
.slab[data-profile="identity"] { --plaster:var(--tone-purple); }
.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-blue); }
.slab[data-profile="statement"] { --plaster:var(--tone-ochre); }
.slab[data-profile] {
  background:var(--plaster);
}
.profile-surface {
  position:absolute; inset:0; overflow:hidden; border-radius:inherit;
  padding:var(--profile-padding); display:flex; flex-direction:column;
  pointer-events:none; user-select:none;
  font-family:var(--font-body);
  font-weight:400; letter-spacing:0; text-wrap:pretty;
}
.profile-kicker { display:block; flex-shrink:0; font-size:var(--profile-caption); line-height:1.5; font-weight:500; letter-spacing:.08em; color:color-mix(in srgb,var(--surface-ink,var(--ink)) 82%,transparent); }
.profile-title,.statement-text {
  display:block; font-size:var(--profile-heading); line-height:1.5;
  font-weight:600; letter-spacing:-.025em;
}
.profile-content { display:flex; flex-direction:column; flex-shrink:0; gap:var(--profile-gap); margin-top:auto; }
.profile-copy { display:flex; flex-direction:column; font-size:var(--profile-body); line-height:var(--profile-leading); font-weight:400; color:color-mix(in srgb,var(--surface-ink,var(--ink)) 88%,transparent); }
.profile-copy > span,.statement-text > span { display:block; }
.profile-art,.identity-art {
  display:flex; flex:1; min-height:0; align-items:center; justify-content:flex-start;
  padding-block:var(--profile-gap);
}
/* Vertical cards reserve a real visual lane for rotated, extruded artwork.
   The extra space covers glyph overhang and its lower extrusion. */
[data-profile="about"] .profile-surface,
[data-profile="ai"] .profile-surface,
[data-profile="engineering"] .profile-surface {
  --profile-art-safe:calc(var(--profile-object) + var(--profile-gap) * 1.5);
  display:grid;
  grid-template-rows:auto minmax(var(--profile-art-safe),1fr) auto;
  row-gap:calc(var(--profile-gap) * .75);
}
[data-profile="about"] .profile-art,
[data-profile="ai"] .profile-art,
[data-profile="engineering"] .profile-art {
  min-height:var(--profile-art-safe);
  padding-block:var(--profile-gap);
  align-self:stretch;
}
[data-profile="about"] .profile-content,
[data-profile="ai"] .profile-content,
[data-profile="engineering"] .profile-content { margin-top:0; }
.identity-heading { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.identity-seal { width:20px; height:20px; border-radius:6px; transform:rotate(20deg); background:#B77852; box-shadow:inset 0 1px 1px #d2a080,1px 2px #8f5b3f,2px 4px #684332,3px 6px 4px #38251e20; }
.identity-art { padding-left:8px; padding-bottom:calc(var(--profile-gap) * 2); }
[data-profile="identity"] { --profile-name:184px; }
.identity-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:8px; }
.identity-process { display:flex; gap:24px; min-width:0; font-size:var(--profile-caption); line-height:1.5; color:color-mix(in srgb,var(--surface-ink,var(--ink)) 86%,transparent); }
.identity-contact {
  flex:none; pointer-events:auto; padding:9px 14px; border:1px solid color-mix(in srgb,currentColor 50%,transparent);
  border-radius:999px; color:inherit; font-size:var(--profile-caption); line-height:1; font-weight:600; text-decoration:none;
}
.identity-contact span { margin-left:10px; }
.identity-contact:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.sculpted-name {
  display:block; font-family:var(--font-rounded);
  font-size:var(--profile-name); font-weight:900; letter-spacing:-.055em; line-height:1;
  color:#F8DF72; transform:rotate(-5deg);
  text-shadow:0 1px #e3c85f,0 2px #e3c85f,0 3px #c5a94c,0 4px #c5a94c,0 5px #9e883f,0 6px #9e883f,1px 10px 8px #26322e26;
  /* The rounded font has overlapping contours; stroking exposes their internal seams. */
  -webkit-text-stroke:0;
}
.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-evenly; gap:var(--profile-gap); padding-top:var(--profile-gap); }
.profile-stat { display:flex; flex-direction:column; gap:4px; }
.profile-stat strong { font-size:var(--profile-number); line-height:1.1; font-weight:600; letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.profile-stat > span { font-size:var(--profile-caption); line-height:1.5; color:color-mix(in srgb,var(--surface-ink,var(--ink)) 88%,transparent); }
[data-profile="statement"] .profile-surface { justify-content:space-between; gap:var(--profile-gap); }
.statement-text { font-weight:500; }
.statement-text > span:last-child { color:#4F424F; }
/* One-row cards become very shallow on landscape displays. Their content keeps
   the same hierarchy while fitting inside an explicit vertical safe area. */
@container (max-height: 360px) {
  [data-profile="numbers"] .profile-surface {
    --profile-padding:16px;
    --profile-gap:6px;
    --profile-caption:12px;
    --profile-number:28px;
  }
  [data-profile="numbers"] .profile-stats { padding-top:4px; }
  [data-profile="statement"] .profile-surface {
    --profile-padding:18px;
    --profile-gap:8px;
    --profile-caption:12px;
    --profile-heading:24px;
  }
  [data-profile="statement"] .statement-text { line-height:1.3; }
}
@container (max-height: 190px) {
  [data-profile="statement"] .profile-surface {
    --profile-padding:12px;
    --profile-gap:5px;
    --profile-caption:10px;
    --profile-heading:18px;
  }
  [data-profile="statement"] .statement-text { line-height:1.22; }
}
@media (max-width:1100px) {
  [data-profile="identity"] { --profile-name:132px; }
  .identity-process { justify-content:space-between; gap:8px; padding-top:0; }
  :root {
    --profile-caption:12px; --profile-body:14px; --profile-heading:22px;
    --profile-number:32px; --profile-name:104px; --profile-object:80px;
    --profile-padding:16px; --profile-gap:12px; --profile-leading:24px;
  }
}
@media (max-width:480px) {
  [data-profile="identity"] { --profile-name:80px; }
  :root {
    --profile-caption:10px; --profile-body:12px; --profile-heading:16px;
    --profile-number:24px; --profile-name:68px; --profile-object:52px;
    --profile-padding:12px; --profile-gap:8px; --profile-leading:20px;
  }
}
/* Short landscape screens use one consistent compact scale, not per-card shrinkage. */
@media (max-height:700px) and (min-width:481px) {
  [data-profile="identity"] { --profile-name:104px; }
  :root {
    --profile-caption:12px; --profile-body:14px; --profile-heading:22px;
    --profile-number:28px; --profile-name:84px; --profile-object:64px;
    --profile-padding:16px; --profile-gap:8px; --profile-leading:22px;
  }
}
/* The board can create wide but shallow cards even on a tall viewport. Size
   containers keep display type from crossing the reading stack in those ratios. */
@container (max-height: 520px) {
  [data-profile="identity"] .profile-surface { --profile-name:clamp(72px,28cqh,144px); --profile-padding:clamp(14px,4cqh,24px); --profile-gap:8px; }
  .identity-art { padding-bottom:16px; }
  [data-profile="about"] .profile-surface,
  [data-profile="ai"] .profile-surface,
  [data-profile="engineering"] .profile-surface {
    --profile-padding:20px;
    --profile-gap:10px;
    --profile-caption:12px;
    --profile-body:16px;
    --profile-heading:24px;
    --profile-leading:25px;
    --profile-object:92px;
  }
}
@container (max-height: 330px) {
  [data-profile="about"] .profile-surface,
  [data-profile="ai"] .profile-surface,
  [data-profile="engineering"] .profile-surface {
    --profile-padding:14px;
    --profile-gap:6px;
    --profile-caption:11px;
    --profile-body:13px;
    --profile-heading:20px;
    --profile-leading:18px;
    --profile-object:84px;
  }
  [data-profile="about"] .profile-art,
  [data-profile="ai"] .profile-art,
  [data-profile="engineering"] .profile-art { --profile-art-safe:calc(var(--profile-object) + 10px); padding-block:4px; }
  [data-profile="identity"] .profile-surface { --profile-name:clamp(52px,34cqh,112px); }
  [data-profile="identity"] .profile-copy { display:none; }
  [data-profile="identity"] .identity-footer { padding-top:0; }
  .identity-art { padding-block:4px 10px; }
}
/* A four-column Klotski board leaves each phone cell intentionally narrow.
   Apply the phone scale after container rules so display type and long counters
   stay inside their own slabs at a true 390px viewport. */
@media (max-width:480px) {
  [data-profile="identity"] .profile-surface {
    --profile-name:58px;
    --profile-padding:10px;
    --profile-gap:6px;
  }
  [data-profile="about"] .profile-surface,
  [data-profile="ai"] .profile-surface,
  [data-profile="engineering"] .profile-surface {
    --profile-padding:10px;
    --profile-gap:6px;
    --profile-caption:10px;
    --profile-body:11px;
    --profile-heading:16px;
    --profile-leading:16px;
    --profile-object:48px;
    --profile-art-safe:56px;
  }
  [data-profile="numbers"] .profile-surface {
    --profile-padding:10px;
    --profile-gap:5px;
    --profile-caption:9px;
    --profile-number:21px;
  }
  [data-profile="statement"] .profile-surface {
    --profile-padding:10px;
    --profile-caption:9px;
    --profile-heading:15px;
  }
  .identity-contact { padding:7px 10px; }
  .identity-contact span { margin-left:6px; }
}