/* shared: page shell, site header (+ front variant), nav tabs, footer, post card, topic line, running-text links, comment, page title, link slip, phone rules for these */

/* page shell: the linen (body background) fills the window, the content is centred */
body { max-width: 1248px; margin: 0 auto; padding: 34px 34px 50px; }

/* site header: compact on inner pages */
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.logo { font-family: var(--hand); font-weight: 700; font-size: 40px; line-height: .9; }
.logo a { display: inline-flex; align-items: center; gap: 8px; }
.logo-bf { flex: none; width: 36px; height: 29px; color: var(--rose); transform: rotate(-10deg); /* decor */ }

/* front variant: bigger logo, squiggle underline, typed tagline on a paper strip */
.site-header--front { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 18px; margin-bottom: 34px; }
.site-header--front .logo { font-size: 62px; }
.site-header--front .logo a { gap: 12px; }
.site-header--front .logo-bf { width: 54px; height: 44px; }
.squiggle { display: block; width: 290px; max-width: 100%; height: 14px; margin-top: 2px; color: var(--rose); /* decor */ }
.tagline {
  width: fit-content; margin-top: 8px; padding: 3px 10px; background: var(--paper); box-shadow: 0 1px 3px rgba(60,40,20,.15);
  font-family: var(--type); font-size: 13.5px; color: var(--ink2); transform: rotate(-.6deg);
}

/* nav: four paper tabs, the current page's tab is yellow */
.site-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.site-nav a {
  font-family: var(--hand); font-size: 21px; padding: 1px 13px 3px; white-space: nowrap;
  background: var(--paper); box-shadow: 0 2px 4px rgba(60,40,20,.15);
}
.site-nav a:nth-child(1) { --tilt: -2deg; }
.site-nav a:nth-child(2) { --tilt: 1.5deg; }
.site-nav a:nth-child(3) { --tilt: -1deg; }
.site-nav a:nth-child(4) { --tilt: 2deg; background: var(--mint); }
.site-nav a[aria-current="page"] { background: var(--tab-current); }
.site-header--front .site-nav { justify-content: flex-end; gap: 10px; }
.site-header--front .site-nav a { font-size: 23px; padding: 2px 16px 4px; }
.site-header--front .site-nav a:nth-child(1) { --tilt: -3deg; }
.site-header--front .site-nav a:nth-child(2) { --tilt: 2deg; }
.site-header--front .site-nav a:nth-child(3) { --tilt: -1.5deg; }
.site-header--front .site-nav a:nth-child(4) { --tilt: 2.5deg; }

/* footer */
.site-footer { margin-top: 56px; text-align: center; font-family: var(--hand); font-size: 26px; color: var(--ink2); }
.site-footer svg { width: 30px; height: 24px; color: var(--rose); vertical-align: -4px; /* decor */ }
/* the privacy link: handwriting of 24px may sit on the linen; underlined, so colour is not the only cue */
.site-footer .footer-links { margin-top: 4px; font-size: 24px; }
.site-footer a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.site-footer a:hover { text-decoration-thickness: 2px; }

/* post card: taped photo card, or a text-only index card (post-card--text index-card) */
.post-card {
  position: relative; display: flex; flex-direction: column;
  background-color: var(--paper); padding: 12px 12px 18px; box-shadow: 0 4px 12px rgba(60,40,20,.16);
}
.post-card:nth-child(6n+1) { --tilt: -1.8deg; }
.post-card:nth-child(6n+2) { --tilt: 1.2deg; }
.post-card:nth-child(6n+3) { --tilt: -.6deg; }
.post-card:nth-child(6n+4) { --tilt: 1deg; }
.post-card:nth-child(6n+5) { --tilt: -1.2deg; }
.post-card:nth-child(6n+6) { --tilt: .8deg; }
.post-card > .tape { top: -12px; left: 50%; margin-left: -48px; transform: rotate(-3deg); }
.post-card img { display: block; width: 100%; height: 140px; object-fit: cover; margin-bottom: 12px; }
.post-card .date { font-family: var(--type); font-size: 11.5px; letter-spacing: .02em; text-transform: uppercase; color: var(--ink2); }
.post-card h3 { font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 1.3; margin-top: 4px; }
.post-card h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post-card > .excerpt { font-size: 14.5px; line-height: 26px; color: var(--ink2); }
.post-card .topics { margin-top: auto; padding-top: 10px; }

/* text-only card: the paper is the .index-card piece (on the Forside .index-card--ruled), title on top */
.post-card--text { padding: 18px 18px 20px; }
.post-card--text h3 { order: -1; font-family: var(--hand); font-weight: 700; font-size: 28px; line-height: 1; margin: 0 0 10px; }

/* topic line: a dot in the topic's color, then its name */
.topics { display: flex; flex-wrap: wrap; gap: 0 12px; margin: 0; padding: 0; list-style: none; font-family: var(--hand); font-size: 18px; line-height: 1.3; color: var(--ink2); }
.topics li { display: inline-flex; align-items: center; gap: 5px; }

/* links in running Lora text (post body, lede, comments): underlined, so colour is not the only cue */
.prose a, .lede a, .comment .note > p:not(.who) a {
  color: var(--teal-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.prose a:hover, .lede a:hover, .comment .note > p:not(.who) a:hover { text-decoration-thickness: 2px; }

/* comment: a lined note; the owner's reply is nested in the comment it answers, pink and indented */
.comment { margin-bottom: 22px; }
.comment .note {
  position: relative; padding: 18px 22px 20px; background-color: var(--paper); box-shadow: 0 4px 12px rgba(60,40,20,.13);
  background-image: repeating-linear-gradient(transparent 0 27px, rgba(143,183,207,.28) 27px 28px); background-position: 0 44px;
  --tilt: -.6deg;
}
.comment:nth-of-type(even) > .note { --tilt: .5deg; }
.comment .who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; margin-bottom: 6px; }
.comment .name { font-family: var(--hand); font-weight: 700; font-size: 25px; line-height: 1.1; }
.comment time { font-family: var(--type); font-size: 11.5px; text-transform: uppercase; color: var(--ink2); }
.comment .note > p:not(.who) { font-size: 15.5px; line-height: 28px; color: var(--ink2); }
.comment--owner { margin: 22px 0 0 40px; }
.comment--owner > .note { --tilt: .5deg; background-color: #fbefe9; }
.comment--owner .name { color: var(--rose-text); }

/* page title on inner pages (Arkiv, Skriv til mig): handwritten h1, rose squiggle, the intro on a paper strip (text under 24px is not on linen) */
.page-title h1 { font-family: var(--hand); font-weight: 700; font-size: 72px; line-height: .9; }
.page-title .squig { display: block; width: 180px; max-width: 100%; height: 12px; margin: 4px 0 14px; color: var(--rose); /* decor */ }
.page-title .intro {
  width: fit-content; max-width: 560px; padding: 8px 14px 10px; background: var(--paper); box-shadow: 0 1px 3px rgba(60,40,20,.15);
  font-size: 16.5px; line-height: 1.6; color: var(--ink2); transform: rotate(-.5deg);
}

/* link slip: a paper slip with a small typed label and a handwritten title (Artikel prev/next, Min historie, Start her) */
.slip { display: block; position: relative; padding: 16px 20px 18px; background: var(--paper); box-shadow: 0 4px 12px rgba(60,40,20,.15); transform: rotate(var(--tilt, 0deg)); }
.slip small { display: block; margin-bottom: 4px; font-family: var(--type); font-size: 12px; text-transform: uppercase; color: var(--ink2); }
.slip-title { font-family: var(--hand); font-weight: 700; font-size: 26px; line-height: 1.05; }

@media (max-width: 820px) {
  .site-header--front { grid-template-columns: 1fr; }
  .site-header--front .site-nav { justify-content: flex-start; }
}

@media (max-width: 600px) {
  body { padding: 18px 16px 40px; }
  .site-header, .site-header--front { margin-bottom: 24px; }
  .logo, .site-header--front .logo { font-size: 40px; }
  .logo-bf, .site-header--front .logo-bf { width: 34px; height: 28px; }
  .squiggle { width: 200px; }
  .tagline { font-size: 12px; }
  .site-nav, .site-header--front .site-nav { flex-wrap: nowrap; gap: 6px; }
  .site-nav a, .site-header--front .site-nav a { font-size: 19px; padding: 1px 9px 3px; }

  .post-card { padding: 8px 8px 12px; }
  .post-card img { height: 96px; }
  .post-card h3 { font-size: 15px; }
  .post-card--text { padding: 14px 12px 14px; }
  .post-card--text h3 { font-size: 23px; }
  .post-card > .excerpt { font-size: 13px; }
  .topics { font-size: 16px; gap: 0 10px; }
  .comment--owner { margin-left: 16px; }
  .page-title h1 { font-size: 54px; }
}