/* Farid Kheloco — site UI kit styles
   Layered on top of ../../colors_and_type.css */

body { margin: 0; background: var(--bg-1); color: var(--fg-1); font-family: var(--font-body); }

.fk-app { min-height: 100vh; }

/* ---------------- shared utilities ---------------- */
.fk-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.fk-mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tr-cap); }
.fk-dot { display: inline-block; width: 3px; height: 3px; background: currentColor; border-radius: 50%; opacity: 0.5; }
.fk-link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
}
.fk-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 7.4vw, 116px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--fg-1);
  margin: 16px 0 24px;
  text-transform: lowercase;
}
.fk-display__italic {
  font-family: var(--font-editorial);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--accent);
  text-transform: none;
}
.fk-h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(40px, 5vw, 72px); line-height: 0.96; letter-spacing: -0.035em; margin: 16px 0 18px; text-transform: lowercase; }
.fk-h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.04; letter-spacing: -0.028em; margin: 6px 0 0; max-width: 22ch; text-transform: lowercase; }
.fk-h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.14; letter-spacing: -0.02em; margin: 0; text-transform: lowercase; }
.fk-h3 a { text-decoration: none; color: inherit; }
.fk-h3 a:hover { color: var(--accent); }
.fk-lede { font-size: 20px; line-height: 1.45; color: var(--fg-2); max-width: 56ch; margin: 0 0 24px; }
.fk-prose p { font-size: 17px; line-height: 1.65; margin: 18px 0; color: var(--fg-1); max-width: 64ch; }
.fk-prose em { font-family: var(--font-editorial); font-style: italic; font-size: 19px; color: var(--fg-1); }
.fk-pullquote { font-family: var(--font-editorial); font-weight: 500; font-size: clamp(32px, 3.2vw, 48px); line-height: 1.04; color: var(--fg-1); border-left: 1.5px solid var(--accent); padding-left: 22px; margin: 32px 0; max-width: 24ch; }

/* ---------------- buttons ---------------- */
.fk-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.005em;
  padding: 12px 18px;
  border-radius: 6px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.fk-btn--accent { background: var(--accent); color: var(--driftwood); }
.fk-btn--accent:hover { background: var(--accent-press); opacity: 1; }
.fk-btn--accent:active { transform: translateY(1px); }
.fk-btn--pacific { background: var(--pacific); color: var(--driftwood); padding: 9px 14px; font-size: 13px; }
.fk-btn--pacific:hover { background: var(--pacific-tide); opacity: 1; }
.fk-btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.fk-btn--ghost:hover { background: var(--ink); color: var(--driftwood); opacity: 1; }
.fk-btn:disabled { opacity: 0.6; cursor: default; }

/* ---------------- badges ---------------- */
.fk-badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-label); text-transform: uppercase; padding: 4px 9px; border-radius: 6px; }
.fk-badge--accent { background: var(--accent); color: var(--driftwood); }
.fk-badge--ink    { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.fk-badge--kelp   { background: rgba(80,110,74,0.16); color: var(--secondary); }

/* ---------------- nav ---------------- */
.fk-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--inset-x);
  background: rgba(242,242,242,0.82);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--rule);
  height: var(--nav-h);
  box-sizing: border-box;
}
.fk-nav__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.fk-nav__brand img { width: 32px; height: 32px; display: block; border-radius: 4px; }
.fk-nav__wm-img { width: auto; height: 22px; border-radius: 0 !important; }
.fk-nav__wm { font-family: var(--font-display); font-weight: 900; font-size: 18px; letter-spacing: -0.035em; color: var(--ink); display: inline-flex; align-items: center; gap: 5px; }
.fk-nav__period { width: 7px; height: 7px; background: var(--accent); display: inline-block; margin-bottom: 1px; }
.fk-nav__links { list-style: none; padding: 0; margin: 0; display: flex; gap: 28px; }
.fk-nav__links a { font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--ink); text-decoration: none; transition: opacity var(--dur-fast) var(--ease-out); }
.fk-nav__links a:hover { opacity: 0.65; }
.fk-nav__links a.is-current { color: var(--accent); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* ---------------- section scaffold ---------------- */
.fk-section { padding: var(--space-9) 0; }
.fk-section__inner { width: 100%; max-width: var(--page-max); padding: 0 var(--inset-x); margin: 0 auto; box-sizing: border-box; }
.fk-section__inner--narrow { max-width: 880px; }
.fk-section__head { margin-bottom: var(--space-7); }
.fk-section__head .fk-eyebrow { display: block; margin-bottom: 12px; }

/* ---------------- hero ---------------- */
.fk-hero { position: relative; padding: var(--space-10) 0 var(--space-9); overflow: hidden; }
.fk-hero__topo { position: absolute; inset: 0; background: url('../../assets/topo.svg') center/cover no-repeat; opacity: 0.12; pointer-events: none; }
.fk-hero .fk-section__inner { position: relative; }
.fk-hero .fk-eyebrow { display: block; margin-bottom: 12px; }
.fk-hero__cta { display: flex; gap: 14px; margin-top: var(--space-5); flex-wrap: wrap; }

/* ---------------- now block ---------------- */
.fk-now { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); }
.fk-now__cell { padding: 28px 24px 28px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 12px; align-content: start; }
.fk-now__cell + .fk-now__cell { padding-left: 24px; border-left: 1px solid var(--rule); }
.fk-now__cell .fk-eyebrow { display: block; }
.fk-now__body { font-size: 17px; line-height: 1.5; color: var(--fg-1); margin: 0; max-width: 38ch; }
.fk-now__tag { color: var(--fg-3); text-transform: uppercase; }

/* ---------------- journal ---------------- */
.fk-journal__list { display: grid; gap: 16px; }
.fk-journal__card { padding: 24px 26px; display: grid; gap: 12px; background: var(--salt); border: 1px solid var(--sand); border-radius: var(--radius-0); box-shadow: 0 1px 0 0 rgba(27,27,23,0.06); }
.fk-journal__card .fk-eyebrow { display: inline-flex; flex-wrap: wrap; }
.fk-journal__dek { font-size: 17px; line-height: 1.5; color: var(--fg-1); max-width: 60ch; margin: 0; }

/* ---------------- post reader ---------------- */
.fk-post { padding: var(--space-7) 0 var(--space-9); }
.fk-post__back { display: inline-block; margin-bottom: 28px; }

/* ---------------- work ---------------- */
.fk-work { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.fk-work__card { background: var(--foam); padding: 24px; display: grid; gap: 10px; min-height: 240px; align-content: start; border-radius: var(--radius-0); }
.fk-work__top { display: flex; align-items: center; justify-content: space-between; }
.fk-work__name { margin-top: 6px; }
.fk-work__role { color: var(--fg-2); }
.fk-work__dek { font-size: 15px; line-height: 1.5; color: var(--fg-1); margin: 0; }
.fk-work__link { color: var(--fg-3); margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule); }

/* ---------------- about ---------------- */
.fk-about__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-7); align-items: start; }
.fk-portrait-slot { aspect-ratio: 4 / 5; width: 100%; background: var(--salt); border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; position: relative; }
.fk-portrait-slot::after { content: ""; position: absolute; inset: 12px; border: 1px dashed var(--sand); pointer-events: none; }
.fk-portrait-slot__inner { display: grid; gap: 6px; text-align: center; }

/* ---------------- divider ---------------- */
.fk-divider { color: var(--pacific); display: block; padding: 8px 0; }
.fk-divider svg { width: 100%; height: 20px; display: block; }
.fk-divider.is-inverse { color: var(--cream-on-deep); }

/* ---------------- footer ---------------- */
.fk-footer { background: var(--pacific); color: var(--cream-on-deep); padding: var(--space-9) 0 var(--space-6); }
.fk-footer__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-7); }
.fk-footer__mark { width: 44px; height: 44px; margin-bottom: 22px; display: block; }
.fk-footer__quote { color: var(--driftwood); max-width: 22ch; }
.fk-footer__meta { color: rgba(232,223,199,0.55); margin-top: 36px; text-transform: uppercase; }
.fk-footer__right { display: grid; gap: 28px; }
.fk-footer__links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: var(--tr-cap); color: rgba(232,223,199,0.7); }
.fk-footer__links a { color: var(--driftwood); text-decoration: none; }
.fk-footer__links a:hover { opacity: 0.75; }

/* ---------------- subscribe ---------------- */
.fk-subscribe { display: grid; gap: 10px; }
.fk-subscribe__label { display: block; }
.fk-subscribe__row { display: flex; gap: 8px; }
.fk-subscribe__row input { flex: 1; font-family: var(--font-body); font-size: 15px; padding: 12px 14px; border-radius: 6px; border: 1px solid var(--rule); background: var(--foam); color: var(--ink); outline: 0; }
.fk-subscribe__row input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(199,90,36,0.22); }
.fk-subscribe__help { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: var(--tr-cap); margin: 0; }

.fk-subscribe.is-inverse .fk-subscribe__label { color: rgba(232,223,199,0.65); }
.fk-subscribe.is-inverse input { background: rgba(255,255,255,0.06); border-color: rgba(232,223,199,0.2); color: var(--driftwood); }
.fk-subscribe.is-inverse input::placeholder { color: rgba(232,223,199,0.45); }
.fk-subscribe.is-inverse .fk-subscribe__help { color: rgba(232,223,199,0.55); }

/* ---------------- responsive ---------------- */
@media (max-width: 880px) {
  .fk-now, .fk-work { grid-template-columns: 1fr; }
  .fk-now__cell + .fk-now__cell { padding-left: 0; border-left: 0; }
  .fk-about__grid, .fk-footer__grid { grid-template-columns: 1fr; }
  .fk-nav__links { display: none; }
}