/* jeanchristian.id - placeholder
   Swiss spec-sheet: grotesque + monospace, strict grid, one accent.
   Self-contained: system fonts, no external requests, minimal CSS motion. */

:root {
  --paper: #e9e8e3;   /* warm-neutral light ground */
  --ink: #17171a;     /* near-black */
  --muted: #86867e;   /* grey, secondary + labels */
  --line: rgba(23, 23, 26, 0.16);
  --accent: #2e2bf5;  /* electric blue, the single pop */

  --grotesque: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --edge: clamp(28px, 5.5vw, 72px);        /* content inset */
  --mark-inset: clamp(14px, 2.2vw, 24px);  /* crop marks sit in the outer margin */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- Sheet: full-height grid aligned to a single left margin --- */
.sheet {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: max(var(--edge), env(safe-area-inset-top)) var(--edge)
           max(var(--edge), env(safe-area-inset-bottom));
}

/* --- Registration marks at the four corners --- */
.mark {
  position: absolute;
  width: 15px;
  height: 15px;
  color: var(--muted);
  opacity: 0.7;
}
.mark::before,
.mark::after { content: ""; position: absolute; background: currentColor; }
.mark::before { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-0.5px); }
.mark::after  { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-0.5px); }
.mark.tl { top: calc(var(--mark-inset) - 7px); left: calc(var(--mark-inset) - 7px); }
.mark.tr { top: calc(var(--mark-inset) - 7px); right: calc(var(--mark-inset) - 7px); }
.mark.bl { bottom: calc(var(--mark-inset) - 7px); left: calc(var(--mark-inset) - 7px); }
.mark.br { bottom: calc(var(--mark-inset) - 7px); right: calc(var(--mark-inset) - 7px); }

/* --- Meta rows: top bar + footer, mono, tracked --- */
.row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: clamp(10px, 1.4vw, 12px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.topbar { animation: fade 0.5s ease both 0.05s; }
.wip { display: inline-flex; align-items: center; gap: 0.55em; color: var(--ink); }
.wip .sq {
  width: 6px; height: 6px;
  background: var(--accent);
  animation: blink 1.4s steps(1) infinite;
}

/* --- Center block: left-aligned, vertically centered --- */
.block {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.name {
  font-family: var(--grotesque);
  font-weight: 800;
  font-size: clamp(3rem, 11.5vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--ink);
  animation: fade 0.6s ease both 0.12s;
}

.role {
  margin-top: clamp(14px, 2.4vh, 22px);
  font-size: clamp(11px, 1.6vw, 13px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  animation: fade 0.6s ease both 0.22s;
}

.rule {
  width: clamp(120px, 26vw, 240px);
  height: 1px;
  background: var(--ink);
  margin: clamp(24px, 4vh, 40px) 0 clamp(20px, 3vh, 30px);
  transform-origin: left;
  animation: grow 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both 0.3s;
}

.status {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: clamp(11px, 1.6vw, 13px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  animation: fade 0.6s ease both 0.4s;
}
.status .label { color: var(--muted); }
.status .sep { color: var(--muted); margin: 0 0.6em; }
.caret {
  display: inline-block;
  width: 0.62em;
  height: 1.05em;
  margin-left: 0.5em;
  background: var(--accent);
  transform: translateY(0.14em);
  animation: blink 1.15s steps(1) infinite;
}

.note {
  margin-top: clamp(14px, 2.2vh, 18px);
  max-width: 34ch;
  font-size: clamp(12px, 1.7vw, 13.5px);
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-transform: none;
  animation: fade 0.6s ease both 0.5s;
}
.home-link {
  color: var(--ink);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--ink);
  transition: box-shadow 0.2s ease, color 0.2s ease;
}
.home-link:hover { color: var(--accent); box-shadow: inset 0 -1px 0 var(--accent); }
.home-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.foot { animation: fade 0.5s ease both 0.6s; }

/* --- Keyframes --- */
@keyframes fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* --- Motion preference: entrance only sets opacity:0 in keyframes, so
       disabling animation returns everything to its visible resting state. --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

.wip .short { display: none; }

@media (max-width: 520px) {
  .row { font-size: 10px; letter-spacing: 0.1em; }
  .wip .full { display: none; }
  .wip .short { display: inline; }
}