/* Shared by every page. The hero, the flow and the headline block are only
   ever on the front page, so those stay inline in index.html. */

:root{
  /* Split's own materials: limestone, the Adriatic, roof tile. */
  --paper:#faf6ef; --card:#fffdf9; --ink:#211d18; --ink-soft:#5f574c;
  --line:#e4dccf; --sea:#1c6b8c; --sea-deep:#12546f; --tile:#c2573a;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  /* One grotesque throughout. Nothing is downloaded: the character is meant
     to come out of the setting, not out of a typeface nobody has. */
  font:400 17px/1.55 'Helvetica Neue',Helvetica,Arial,'Liberation Sans',sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
::selection{background:#cfe4ee}
a{color:var(--sea)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em; white-space:nowrap}
.wrap{max-width:34rem; margin:0 auto; padding:0 1.6rem}

/* ---------- header ---------- */
.bar{max-width:74rem; margin:0 auto; padding:0 1.6rem}
header{display:flex; align-items:center; justify-content:space-between; padding:1.5rem 0}
.mark{
  display:flex; align-items:center; gap:.6rem; font-size:1.06rem; font-weight:600;
  letter-spacing:.005em; color:var(--ink); text-decoration:none;
}
.lang{
  display:flex; gap:.15rem; background:rgba(255,253,249,.8); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:999px; padding:.15rem;
}
.lang button{
  font-family:inherit;
  font-size:.7rem; font-weight:700; letter-spacing:.08em; background:none; border:0;
  color:var(--ink-soft); padding:.32rem .72rem; border-radius:999px; cursor:pointer;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.lang button[aria-pressed="true"]{background:var(--sea); color:#fff}

/* ---------- writing, in labelled sections ---------- */
.notes{max-width:52rem; margin:0 auto; padding:0 1.6rem}
/* Label beside the text rather than above it, so a page of prose reads as a
   handful of short answers instead of one column to get through. */
.note{display:grid; gap:.5rem; padding:2.3rem 0; border-top:1px solid var(--line)}
.note:first-child{border-top:0; padding-top:0}
.note h2{
  margin:0; font-size:.7rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:#a3998a;
}
.note-body{max-width:31rem; font-size:1.04rem; line-height:1.66; color:#332e27}
.note-body p{margin:0 0 1.1rem}
.note-body p:last-child{margin-bottom:0}
.note-body strong{font-weight:700; color:var(--ink)}
.note-body em{
  font-style:normal; color:var(--ink); white-space:nowrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.86em;
}
.note-body ul{margin:0 0 1.1rem; padding-left:1.1rem}
.note-body li{margin-bottom:.5rem}
.formula{
  margin:1.5rem 0 0 !important; color:var(--sea); font-size:.93rem; overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.plat{font-weight:700; color:var(--ink)}
.note-small{font-size:.95rem; color:var(--ink-soft)}
.open{font-weight:700; text-decoration-thickness:1px; text-underline-offset:3px}

@media (min-width:56rem){
  .note{grid-template-columns:9rem 1fr; gap:3.5rem; padding:2.8rem 0}
  .note h2{padding-top:.4rem}
}

/* ---------- page title, on the pages that have one ---------- */
.page-head{max-width:52rem; margin:0 auto; padding:2.6rem 1.6rem 2.4rem}
.page-head h1{
  margin:0; font-size:clamp(1.8rem,5.4vw,2.4rem); font-weight:800;
  letter-spacing:-.035em; line-height:1.04;
}
.page-head p{margin:.9rem 0 0; max-width:31rem; color:var(--ink-soft); font-size:1.04rem; line-height:1.6}
.updated{
  display:block; margin-top:1.1rem; font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:#a3998a;
}

/* ---------- footer ---------- */
footer{
  margin-top:4.5rem; padding:1.5rem 0 3.5rem; border-top:1px solid var(--line);
  color:#8a8175; font-size:.82rem; line-height:1.6; max-width:30rem;
}
footer p{margin:0 0 .5rem}
.footer-nav{display:flex; flex-wrap:wrap; gap:1.1rem; margin-bottom:.9rem}
.footer-nav a{font-weight:700; text-decoration-thickness:1px; text-underline-offset:3px}

[data-lang]{display:none}
html[lang="hr"] [data-lang="hr"], html[lang="en"] [data-lang="en"]{display:revert}