/* D'Kenang stationery, shared by the pages that wear the homepage's look
   (sign in, the guest page). Warm paper, ink, and notes in the margin.
   The homepage carries the same tokens inline; the signed-in pages still use
   style.css. */
:root {
  --paper:   #F2ECE1;
  --card:    #FFFDF8;
  --ink:     #1F1B18;
  --muted:   #5F564E;   /* 6.1:1 on --paper */
  --faint:   #857A70;
  --red:     #B3392B;   /* margin notes, 5.2:1 on --paper */
  --ok:      #2F6B41;
  --tape:    rgba(231, 211, 160, .82);
  --line:    rgba(31, 27, 24, .13);
  --line-2:  rgba(31, 27, 24, .24);
  --head:    "Young Serif", Georgia, serif;
  --sans:    Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand:    "Nanum Pen Script", "Segoe Print", cursive;
  --lift:    0 1px 1px rgba(0, 0, 0, .06), 0 14px 30px -14px rgba(70, 45, 20, .45);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh; color: var(--ink); font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
  background: var(--paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .36  0 0 0 0 .28  0 0 0 .1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.logo { font-family: var(--head); font-size: 21px; letter-spacing: -.01em; text-decoration: none; }
.logo .ap { color: var(--red); }

/* Only the other language is offered, as a plain word. */
.lang button { background: none; border: 0; padding: 8px 4px; font: 500 15px var(--sans); color: var(--muted); cursor: pointer; }
.lang button.on { display: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 24px;
  border: 0; border-radius: 12px; background: var(--ink); color: var(--paper); font: 700 17px var(--sans);
  text-decoration: none; cursor: pointer; box-shadow: 0 2px 0 #000, 0 10px 20px -10px rgba(0, 0, 0, .55);
  transition: transform .12s ease, box-shadow .12s ease, opacity .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 #000; }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.textlink { font-weight: 650; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

.field { display: flex; flex-direction: column; gap: 6px; }
label { font-weight: 650; font-size: 14.5px; }
label .opt { font-weight: 500; color: var(--faint); }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], textarea {
  width: 100%; font: 400 16px/1.4 var(--sans); color: var(--ink);   /* 16px: iOS zooms on anything smaller */
  background: #fff; border: 1.5px solid var(--line-2); border-radius: 12px; padding: 13px 14px;
  transition: border-color .15s ease, box-shadow .15s ease; -webkit-appearance: none; appearance: none;
}
textarea { resize: vertical; min-height: 88px; }
/* With appearance:none an empty date field collapses on iOS and centres its value. */
input[type="date"] { min-height: 50px; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
input:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(31, 27, 24, .1); }
::placeholder { color: #A99E93; opacity: 1; }

.err { color: var(--red); font-size: 15px; font-weight: 600; line-height: 1.45; }
.err:empty { display: none; }

.tape {
  position: absolute; top: -12px; left: 50%; width: 88px; height: 24px; background: var(--tape);
  transform: translateX(-50%) rotate(-3deg);
  clip-path: polygon(0 12%, 7% 0, 18% 10%, 30% 0, 43% 9%, 57% 0, 70% 10%, 84% 0, 100% 12%, 97% 88%, 88% 100%, 75% 90%, 61% 100%, 47% 90%, 33% 100%, 19% 91%, 6% 100%, 1% 86%);
}
.hand { font-family: var(--hand); color: var(--red); line-height: 1; }

.fade-in { animation: fadeIn .45s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fade-in { animation: none; } }