/* Emi Kobayashi: shared site layer on top of scrollcraft.css.
   A light drafting-sheet world: warm grey ground with a faint column grid,
   black type, monospace labels, one signal orange, and the morphing blob
   still shifting colour from section to section. */

:root {
  color-scheme: light;
  --sc-canvas:     #E8E8E6;
  --sc-surface:    #FFFFFF;
  --sc-ink:        #161616;
  --sc-ink-soft:   #4A4A47;
  --sc-accent:     #F07A3A;
  --sc-accent-ink: #161616;
  --ek-mark:       #B8480F;  /* orange dark enough for small text on the grey */
  --ek-deep:       #D6D6D3;
  --ek-grid:       rgb(0 0 0 / 0.16);
  --ek-radius:     clamp(12px, 1.2vw, 20px);  /* every image, video and card */
  --sc-font-display: "Mulish", "Muli", system-ui, sans-serif;
  --sc-font-text:    "Mulish", "Muli", system-ui, sans-serif;
  --ek-mono: "JetBrains Mono", ui-monospace, monospace;
  --sc-shadow-color: 0 0% 0%;
  --sc-e2: 0 6px 14px -6px hsl(var(--sc-shadow-color) / 0.18), 0 2px 4px hsl(var(--sc-shadow-color) / 0.08);
  --sc-e3: 0 24px 48px -24px hsl(var(--sc-shadow-color) / 0.28), 0 6px 14px -8px hsl(var(--sc-shadow-color) / 0.18);
  --sc-edge: 0 0 0 1px rgb(0 0 0 / 0.08);
  --sc-hairline: rgb(0 0 0 / 0.12);
  --bar-h: 4.5rem;
}

html { background: var(--sc-canvas); }
body { color: var(--sc-ink); background: transparent; }
/* The grid is the bottom layer: above the page colour, below the blob and
   everything else. Crisp in the middle of the screen, fading to the edges. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to right, var(--ek-grid) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(to bottom, var(--ek-grid) 1px, transparent 1px) 0 0 / 48px 48px;
  /* An eased fade: full strength in the middle, then a long soft falloff
     that reaches nothing right at each edge of the screen. */
  --fade: radial-gradient(ellipse closest-side at 50% 50%,
    #000 0%, #000 22%, rgb(0 0 0 / 0.86) 38%, rgb(0 0 0 / 0.62) 54%,
    rgb(0 0 0 / 0.36) 70%, rgb(0 0 0 / 0.15) 84%, rgb(0 0 0 / 0.04) 94%, transparent 100%);
  -webkit-mask: var(--fade);
          mask: var(--fade);
}
.sc-grain { opacity: 0.025; z-index: 2; }
img { display: block; }
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }

/* -------------------------------------------------------------- the blob -- */
.blob { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main { position: relative; z-index: 3; }

/* ------------------------------------------------------------ the top bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome); height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-5);
  padding: 0 var(--sc-gutter);
  transition: background-color 240ms var(--sc-ease-out), box-shadow 240ms var(--sc-ease-out);
}
.bar.is-solid { background: color-mix(in oklab, var(--sc-canvas) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--sc-hairline); }
.bar__mark { display: flex; align-items: center; gap: var(--sc-3); color: inherit; text-decoration: none; }
.bar__mark img { width: 3.1rem; height: auto; }
.bar__name { font: 800 var(--sc-t-base)/1.1 var(--sc-font-display); letter-spacing: -0.01em; white-space: nowrap; }
.bar__nav { display: flex; align-items: center; }
.bar__sheet { display: flex; align-items: center; gap: var(--sc-7); }
.bar__sheet ul { display: flex; gap: var(--sc-6); list-style: none; margin: 0; padding: 0; }
.bar__sheet ul a {
  position: relative; display: inline-block; color: var(--sc-ink); text-decoration: none; padding: 0.5rem 0;
  font: 500 var(--sc-t-sm)/1 var(--ek-mono); letter-spacing: 0.02em;
}
.bar__sheet ul a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 0;
  background: var(--sc-accent); transform: scaleX(0); transform-origin: left;
  transition: transform 220ms var(--sc-ease-out);
}
.bar__sheet ul a[aria-current="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .bar__sheet ul a:hover::after { transform: scaleX(1); } }
.bar__menu, .bar__close { display: none; }
.bar__now { margin: 0; font: 500 var(--sc-t-xs)/1.2 var(--ek-mono); color: var(--sc-ink-soft); letter-spacing: 0.02em; }
.bar__now b { color: var(--sc-ink); font-weight: 800; }

/* ------------------------------------------------------------- buttons -- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.9rem; padding: 0 var(--sc-6);
  border: 0; border-radius: 0; background: var(--sc-accent); color: var(--sc-accent-ink);
  font: 700 var(--sc-t-sm)/1 var(--ek-mono); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  /* Square, with two clipped corners. */
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: transform 140ms var(--sc-ease-out), filter 140ms var(--sc-ease-out);
}
.btn:active { transform: translate(1px, 1px); }
@media (hover: hover) and (pointer: fine) { .btn:hover { filter: brightness(1.08); } }
.btn--small { min-height: 2.5rem; padding: 0 var(--sc-5); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.link {
  color: var(--sc-ink); font-weight: 700; text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 0.3em; text-decoration-color: var(--ek-mark);
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--ek-mark); outline-offset: 3px; border-radius: 4px;
}

/* -------------------------------------------------------- shared bits -- */
.lbl__kind {
  margin: 0; font: 500 var(--sc-t-xs)/1.3 var(--ek-mono);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ek-mark);
}
/* A small orange square marks each label, like a drafting tick. */
.lbl__kind::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.6em; background: var(--sc-accent); vertical-align: 0.05em; }
.shot { margin: 0; overflow: hidden; border-radius: var(--ek-radius); background: var(--ek-deep); box-shadow: var(--sc-e3), var(--sc-edge); }
.shot img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------ the menu sheet -- */
@media (max-width: 1099px) {
  .bar__sheet { display: none; }
  .bar__menu {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--sc-4);
    border: 1px solid var(--sc-hairline); border-radius: 0; background: transparent; color: var(--sc-ink);
    font: 700 var(--sc-t-sm)/1 var(--sc-font-text);
  }
  .bar.is-open { background: var(--sc-canvas); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .bar.is-open .bar__sheet {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--sc-7);
    position: fixed; inset: 0; z-index: 2; overflow-y: auto;
    padding: calc(var(--bar-h) + var(--sc-6)) var(--sc-gutter) var(--sc-7);
    background: var(--sc-canvas);
  }
  .bar.is-open .bar__sheet ul { display: grid; gap: var(--sc-3); }
  .bar.is-open .bar__sheet ul a { font: 800 var(--sc-t-2xl)/1.15 var(--sc-font-display); }
  .bar.is-open .bar__close {
    display: inline-flex; align-items: center; position: absolute; top: calc((var(--bar-h) - 2.75rem) / 2); right: var(--sc-gutter);
    min-height: 2.75rem; padding: 0 var(--sc-4); border: 1px solid var(--sc-hairline); border-radius: 0;
    background: var(--sc-canvas); color: var(--sc-ink); font: 700 var(--sc-t-sm)/1 var(--sc-font-text);
  }
}
/* Phones: keep the logo and name, drop the background grid. */
@media (max-width: 420px) { .bar__mark img { width: 2.6rem; } .bar__name { font-size: var(--sc-t-sm); } }
@media (max-width: 760px) { body::before { display: none; } }

/* ----------------------------------------------------------- the cursor -- */
/* Two layers: a solid black dot on top, a larger see-through orange disc below
   that trails, grows over anything clickable and squeezes on press. The
   native cursor is hidden only once a mouse has moved (cursor.js). */
.cur { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity 200ms var(--sc-ease-out); will-change: transform; }
.cur--dot { width: 16px; height: 16px; margin: -8px 0 0 -8px; background: #161616; box-shadow: none; }
.cur--disc { width: 46px; height: 46px; margin: -23px 0 0 -23px; background: rgb(240 122 58 / 0.2); border: 1px solid rgb(240 122 58 / 0.55); }
html.has-cur .cur { opacity: 1; }
html.has-cur.cur-out .cur { opacity: 0; }
html.has-cur, html.has-cur * { cursor: none !important; }
/* Text fields keep the I-beam, so placing the caret stays precise. */
html.has-cur input, html.has-cur textarea { cursor: text !important; }

/* Hidden from view, still read by screen readers and search engines. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }