/* Liborius constructions — placeholder page. Sumi-e: paper, one painted stroke, name, slogan, seal. */

:root {
  color-scheme: only light;   /* opt out of browser forced-dark (Brave night mode, Chrome auto dark) */
  --paper: #f4efe6;
  --paper-edge: #ebe4d8;
  --ink: #1c1a17;
  --ink-soft: #6b665e;
  --seal: #1f5133;            /* deep forest green (was vermilion) */
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  background-image:
    radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    linear-gradient(var(--paper), var(--paper-edge));
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
}

/* the placeholder is now a full-height hero; details scroll in below */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 8vh 6vw;
}

/* downward double-chevron: a quiet "there is more below" cue */
.scroll-cue {
  position: absolute;
  left: 50%;
  margin-left: -13px;         /* center the 26px cue via margin, leaving transform free for the entrance */
  bottom: 1.8rem;
  color: #b8b2a6;             /* faint via a light colour (not opacity), so the group fade-in can own opacity */
  text-decoration: none;
  transition: color .2s ease;
}
.scroll-cue:hover { color: var(--ink-soft); }
.scroll-cue svg { display: block; }

/* details / real content */
.details {
  padding: 18vh 6vw 20vh;
  display: flex;
  justify-content: center;
}
.details-inner {
  width: 100%;
  max-width: 38rem;
}
.details .lead {
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  line-height: 1.5;
  margin: 0 0 1.6rem;
}
.details p { line-height: 1.85; margin: 0 0 1.2rem; }
.block { margin: 7rem 0 0; }
.block h2 {
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1.6rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid rgba(28,26,23,.12);
}
.block-lead {
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 1.1rem;
}
.services { list-style: none; margin: 0; padding: 0; }
.services li { margin: 0 0 2.2rem; line-height: 1.8; }
.services li:last-child { margin-bottom: 0; }
.services strong { display: block; color: var(--ink); margin-bottom: .3rem; }
.services li > span { color: var(--ink-soft); }
.block--contact { margin-top: 8rem; }

@media (prefers-reduced-motion: no-preference) {
  .scroll-cue svg { animation: bob 2.1s ease-in-out 2.6s infinite; }   /* bob only after it has settled in */
  @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
}

.scroll {
  position: relative;
  width: min(560px, 100%);
  text-align: center;
  padding-top: 2.6rem;      /* room for the menu above the stroke */
  padding-bottom: 3.5rem;
}

/* hamburger menu — top-left, a quiet counterpart to the seal + cursor */
.menu { position: absolute; top: 0; left: .2rem; z-index: 3; }
.menu-btn {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 1.7rem; height: 1.7rem; padding: .3rem;
  background: none; border: 0; cursor: pointer;
}
.menu-btn span {
  display: block; height: 1.5px; border-radius: 1px;
  background: var(--ink-soft); opacity: .65; transition: opacity .2s ease;
}
.menu-btn:hover span, .menu-btn[aria-expanded="true"] span { opacity: 1; }
.menu-panel {
  position: absolute; top: 1.9rem; left: 0;
  display: inline-flex; align-items: baseline; gap: .5rem;
  padding: .35rem .7rem; white-space: nowrap;
  background: var(--paper); border: 1px solid rgba(28,26,23,.14); border-radius: .3rem;
  box-shadow: 0 5px 16px rgba(28,26,23,.08);
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  font-size: .82rem; letter-spacing: .04em;
}
.menu-panel[hidden] { display: none; }   /* the hidden attribute must win over inline-flex */
.menu-panel button {
  padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--ink-soft);
}
.menu-panel button:hover { color: var(--ink); }
.menu-panel button[aria-current="true"] { color: var(--ink); font-weight: 700; }   /* active language in bold */
.menu-sep { color: var(--ink-soft); opacity: .45; }

.stroke {
  margin: 0 auto 2.6rem;
  width: 100%;
}

.stroke svg {
  display: block;
  width: 100%;
  height: auto;
}

.ink {
  fill: var(--ink);
  opacity: .92;
}

.ink.dry {
  fill: var(--paper);
  opacity: .55;
}

.title {
  margin: 0;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1.6;
}

.slogan {
  margin: .7rem auto 0;
  font-style: italic;
  font-size: clamp(.95rem, 2vw, 1.08rem);
  letter-spacing: .04em;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* a system, quietly online — the machine note against the hand-painted stroke */
/* the prompt: a terminal line. The blinking "_" IS the cursor and sits after the text.
   The real input overlays it, invisible (transparent text + no native caret), and stays
   focused so you can just type — no click, no "|" bar. */
.prompt-wrap {
  position: absolute;
  left: .35rem;
  right: 2.7rem;             /* span the bottom up to just before the L box */
  bottom: .3rem;
  text-align: left;          /* terminal text stays left in the corner (page is centered) */
  overflow: hidden;          /* single-line window; long lines scroll horizontally */
  white-space: nowrap;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  font-size: .95rem;
  line-height: 1.4;
}
.prompt-line {
  display: inline-block;
  margin: 0;
  white-space: nowrap;           /* one line; the window scrolls to keep the cursor in view */
  pointer-events: none;          /* clicks pass through to the input beneath */
  color: var(--ink-soft);
}
.prompt-cursor { color: #a8a29a; opacity: .55; }
.prompt-input {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: none;
  outline: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: transparent;        /* the visible text is the echo line above */
  caret-color: transparent;  /* no "|" — the "_" is the cursor */
}

/* the bottom-right corner: a wrapper that handles the ENTRANCE (fade+rise with the group),
   so the seal/counter inside are free to crossfade on click without an animation fighting them */
.corner {
  position: absolute;
  right: .25rem;
  bottom: 0;
}

/* hanko (also a click target — see the counter below) */
.seal {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  border: 2px solid var(--seal);
  border-radius: .18rem;
  background: none;
  color: var(--seal);
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.4rem;
  transform: rotate(-3deg);   /* KEEP (Richard 2026-09-07): the L eases into this lean after
                                 the group settles — a deliberate touch of human/"stubborn"
                                 imperfection. Subtle on purpose. Do not straighten. */
  opacity: .92;
  cursor: pointer;
  transition: opacity .4s ease, transform .2s ease;
}
.seal:hover { opacity: 1; transform: rotate(-3deg) scale(1.06); }
.seal.dim { opacity: 0; pointer-events: none; }   /* fades out while the counter is shown */
.seal.flat { transform: rotate(0deg); transition: none; }   /* JS starts it straight; removing this eases it into the tilt */

/* retro click-counter that takes the seal's place for 3s — grey, like the menu/cursor,
   right edge aligned with the seal box */
.counter {
  position: absolute;
  right: 0;
  bottom: .1rem;
  display: inline-flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;   /* same speed in and out as the seal */
}
.counter.show { opacity: .75; }
.counter-num {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  font-size: .8rem;
  letter-spacing: .16em;
  color: var(--ink-soft);
  border: 1px solid var(--ink-soft);
  border-radius: .18rem;
  padding: .14rem .34rem;
  background: none;
}

@media (max-width: 480px) {
  body { padding: 10vh 8vw; }
  .stroke { margin-bottom: 2rem; }
  .title { letter-spacing: .16em; }
}

/* Motion: the brush paints the stroke on (left to right), then the words settle in.
   Everything static by default and for reduced-motion — no flash of empty page. */
@media (prefers-reduced-motion: no-preference) {
  /* one gesture, one arrival: blank paper → the brush paints the stroke →
     everything else settles in together as a single quiet group. */
  #revealRect {
    transform-box: fill-box;
    transform-origin: left center;
    animation: paint 1.5s cubic-bezier(.22,.61,.36,1) both;
  }
  .menu, .title, .slogan, .corner, .prompt-wrap, .scroll-cue { animation: settle .8s ease-out 1.55s both; }
  .prompt-cursor { animation: blink 1.6s steps(1) 2.5s infinite; }

  @keyframes paint  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes settle { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
  @keyframes blink  { 0%,49% { opacity: .55; } 50%,100% { opacity: 0; } }
}