/* Personnel File: base layout, colours, type, background.
   Link entries live in brands.css, motion in animations.css, share button in share.button.css.
   Day copy is the default; night copy follows the system setting or html[data-theme="dark"]
   (set by the 夜 / 昼 switch in extra/). */

@import url('https://fonts.bunny.net/css?family=shippori-mincho-b1:800|barlow-condensed:700,800|ibm-plex-mono:400,500&display=swap');

:root {
  --paper: #e2e1d4;
  --ink: #17140f;
  --faint: #6a6558;
  --stamp: #c41f1a;
  --tab: #ff6a13;
  --on-tab: #17140f;
  --hilite: rgba(255, 106, 19, .38);
  --sheen: rgba(255, 255, 255, .55);
  --shade: rgba(23, 20, 15, .12);
  --line: rgba(23, 20, 15, .055);
  --blend: multiply;
  --photo-blend: multiply;
  --photo: grayscale(1) contrast(1.35) brightness(1.08);
  --font-display: 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Noto Serif JP', 'Times New Roman', serif;
  --font-cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  /* names the stock themes and LinkStack core expect */
  --bgColor: var(--paper);
  --bgColor2: var(--paper);
  --accentColor: var(--tab);
  --font: var(--font-mono);
  --delay: .3s;
  color-scheme: light;
}

/* Night copy: the same file read on a microfiche viewer */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111511;
    --ink: #e7e3d3;
    --faint: #8d8d7b;
    --stamp: #ff5245;
    --hilite: rgba(255, 106, 19, .34);
    --sheen: rgba(170, 215, 185, .08);
    --shade: rgba(0, 0, 0, .5);
    --line: rgba(231, 227, 211, .05);
    --blend: screen;
    --photo-blend: normal;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #111511;
  --ink: #e7e3d3;
  --faint: #8d8d7b;
  --stamp: #ff5245;
  --hilite: rgba(255, 106, 19, .34);
  --sheen: rgba(170, 215, 185, .08);
  --shade: rgba(0, 0, 0, .5);
  --line: rgba(231, 227, 211, .05);
  --blend: screen;
  --photo-blend: normal;
  color-scheme: dark;
}

html { font-size: 100%; }

/* Paper: soft sheen top-left, shadow bottom-right, faint ruled lines */
body {
  margin: 0;
  padding: 0 0 32px;
  min-height: 100vh;
  position: relative;
  color: var(--ink);
  font-family: var(--font-mono);
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 20% -10%, var(--sheen), transparent 55%),
    radial-gradient(ellipse at 110% 110%, var(--shade), transparent 50%),
    repeating-linear-gradient(0deg, transparent 0 27px, var(--line) 27px 28px);
  transition: background-color .3s steps(3), color .3s steps(3);
}

/* The stock parallax layers are not part of this look */
.background-container { display: none; }

/* Grid */
.container { position: relative; width: 100%; max-width: 440px; margin: 0 auto; box-sizing: border-box; text-align: left; }
.column { width: 100%; box-sizing: border-box; }
center { display: block; text-align: left; }

/* The record: photo left, name and fields right, entries full width below */
.column {
  display: grid;
  grid-template-columns: 116px 1fr;
  column-gap: 16px;
  padding: 64px 18px 0;
  counter-reset: entry;
}
.column > * { grid-column: 1 / -1; min-width: 0; }

/* Header band and file number share row 1 */
.column::before {
  grid-column: 1 / -1; grid-row: 1;
  content: "人事記録  PERSONNEL RECORD";
  padding: 9px 10px 8px;
  margin-bottom: 18px;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-cond); font-weight: 700; font-size: 15px; letter-spacing: .16em;
}
.column::after {
  grid-column: 1 / -1; grid-row: 1; justify-self: end; align-self: start;
  content: "FILE 0001";
  padding: 9px 10px 8px;
  background: var(--tab); color: var(--on-tab);
  font-family: var(--font-cond); font-weight: 700; font-size: 15px; letter-spacing: .12em;
}

/* Photo: photocopied grayscale, back to colour on hover */
.column > img[alt="avatar"] {
  grid-column: 1; grid-row: 2 / span 2;
  width: 116px !important; height: 140px !important; min-width: 0 !important;
  object-fit: cover;
  border-radius: 0 !important;
  border: 2px solid var(--ink);
  outline: 1px solid var(--ink); outline-offset: 4px;
  box-sizing: border-box;
  filter: var(--photo);
  mix-blend-mode: var(--photo-blend);
  transition: filter .4s steps(4);
}
.column > img[alt="avatar"]:hover { filter: none; mix-blend-mode: normal; }

/* Name: .column > h1 so it outranks the full-width .column > * rule and stays beside the photo */
.column > h1 {
  grid-column: 2; grid-row: 2;
  position: relative; margin: 0; align-self: start;
  font-family: var(--font-display); font-weight: 800; font-size: 46px; line-height: 1; letter-spacing: -.01em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
h1::before {
  content: "氏名  NAME"; display: block; margin-bottom: 6px;
  font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: .18em; color: var(--faint);
}
/* Red classified stamp */
h1::after {
  content: "機密\A CLASSIFIED"; white-space: pre;
  position: absolute; right: -6px; top: -14px; transform: rotate(9deg);
  padding: 4px 8px 3px; line-height: 1.15; text-align: center;
  border: 3px double var(--stamp); color: var(--stamp);
  font-family: var(--font-cond); font-weight: 800; font-size: 13px; letter-spacing: .12em;
  opacity: .82; mix-blend-mode: var(--blend);
  pointer-events: none;
}
/* Verified badge in ink */
h1 .badge { height: .45em !important; margin: 0 0 0 .15em !important; vertical-align: .6em !important; }
.badge-body { fill: var(--ink); }
.badge-tick { fill: var(--paper); }

/* File fields, drawn above the bio (the bio shows underneath if one is set) */
.column > center { grid-column: 2; grid-row: 3; align-self: end; }
.description-parent::before {
  content: "呼称 ······ DESYNCC_\A 状態 ······ ACTIVE\A 権限 ······ LV.3";
  white-space: pre; display: block;
  font-size: 11.5px; line-height: 1.85; letter-spacing: .06em;
  border-top: 1px solid var(--ink); padding-top: 6px;
}
.description-parent p { margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: var(--faint); }
.description-parent p:empty { display: none; }
a { color: var(--ink); }

/* Section header above the entries (social icons, if added, sit between the two labels) */
.social-icon-div {
  grid-row: 4; margin-top: 26px; padding-bottom: 6px;
  border-bottom: 2px solid var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-family: var(--font-cond); font-weight: 700; font-size: 14px; letter-spacing: .16em;
}
.social-icon-div::before { content: "記録  RECORD ENTRIES"; }
.social-icon-div::after { content: "REF. →"; color: var(--faint); }

/* Footer: barcode and property line left, 承認 seal right */
.column > .container {
  margin-top: 30px;
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px;
}
.column > .container > br { display: none; }
.footer { margin: 0 !important; min-width: 0; }
.footer::before {
  content: ""; display: block; height: 34px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 3px, var(--ink) 3px 4px, transparent 4px 7px, var(--ink) 7px 10px, transparent 10px 11px, var(--ink) 11px 12px, transparent 12px 16px, var(--ink) 16px 17px, transparent 17px 19px);
}
.footer::after { content: "THIS FILE IS PROPERTY OF NERV · 第3新東京市"; display: block; margin-top: 6px; font-size: 9.5px; letter-spacing: .14em; color: var(--faint); }
.footer a { font-size: 11px; letter-spacing: .1em; color: var(--faint); text-decoration: none; margin-right: 10px; }

.credit-footer {
  grid-column: 2; grid-row: 1 / span 2; margin: 0;
  width: 74px; height: 74px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  border: 3px solid var(--stamp); transform: rotate(-12deg);
  mix-blend-mode: var(--blend); opacity: .85;
}
.credit-footer::before { content: "承認"; display: block; font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1; color: var(--stamp); }
.credit-footer a:empty { display: none; }
.credit-footer a, .credit-txt, .credit-text {
  display: block; max-width: 56px; margin-top: 2px;
  font-family: var(--font-mono); font-size: 6.5px; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
}
.credit-txt-clr { color: var(--stamp) !important; }

/* 夜 / 昼 switch, injected by extra/custom-body */
.pf-daynight {
  position: absolute; top: 20px; left: 20px; z-index: 20;
  padding: 6px 10px;
  border: 1px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink);
  font: 500 11px/1 var(--font-mono); letter-spacing: .14em;
  cursor: pointer;
}
.pf-daynight:hover { background: var(--ink); color: var(--paper); }
.pf-daynight:focus-visible { outline: 2px solid var(--tab); outline-offset: 2px; }

a:focus-visible { outline: 2px solid var(--tab); outline-offset: 3px; }

@media (min-width: 480px) {
  .column { padding-top: 72px; }
}