/* Mi.Ko. Observer: the "Portrait of the visitor" block, the full screen view, the skeleton cursor and the vertical tag top right.
   Built from the design system: --mk-* tokens only (colour, space, radius, motion, z-index), Syne for text, Gallery Modern for the title accent.
   Buttons = design system "Button" (pill, 60px, UI/Button). Icon-only controls = design system "Icon button" (circle, 48px, 20px icon, border-strong).
   Section heading = "Section title" (subtitle + title, the same size as the other about sections).
   Works in Light and Dark (html.miko-dark-active): every colour is a token that already switches with the theme. */

/* ---------- tokens used here (fallbacks = the Light values) ---------- */
.mk-observer,.mk-obs-fs{
  --ob-fg:var(--mk-color-text,#1e1e1e);
  --ob-text2:var(--mk-color-text-secondary,#5d5d63);
  --ob-text3:var(--mk-color-text-muted,#6a6d71);
  --ob-rule:var(--mk-color-border,#eaeaeb);
  --ob-line:var(--mk-color-border-strong,#d9d9d9);
  --ob-bg:var(--mk-color-bg,#fff);
  --ob-accent:var(--mk-color-accent,#7303c0);
  --ob-accent-ink:var(--mk-color-accent-contrast,#f5f7f5);
  --ob-move:var(--mk-duration-base,.3s) var(--mk-ease-standard,cubic-bezier(0,0,.58,1));
  color:var(--ob-fg);
  font-family:var(--mk-font-sans,'Syne',sans-serif);
}

/* ---------- the block ---------- */
/* Solid background and its own stacking, like the template's "Get in Touch" block: the pinned Instagram block above slides underneath it. */
.mk-observer{position:relative;background:var(--ob-bg);padding:var(--mk-section-sm,80px) 0;border-top:1px solid var(--ob-rule)}
/* Self-contained on every page: same width and prose size as the about page, where the block was designed. */
.mk-observer{--ob-prose:18px}
.mk-observer>.container{width:calc(100% - 96px);max-width:1480px;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
.mk-observer .mk-obs__sub,.mk-observer .mk-obs__intro,.mk-observer .mk-obs__legend,.mk-observer .mk-obs__note{font-size:var(--ob-prose);line-height:1.65}
@media (max-width:767px){.mk-observer{--ob-prose:16px}.mk-observer>.container{width:calc(100% - 40px)}}

/* Room below the template's Instagram block (see miko-observer.js). Measured in the finished state: how far its pictures and handle hang below its edge depends only on the page width
   (286px at 1200, 167px at 1440, 88px at 1600, none from 1920 up; 300px on tablets, none on phones). The line stays at least ~80px clear of them. */
.mk-obs--after-ig{margin-top:380px}
@media (min-width:1200px) and (prefers-reduced-motion:no-preference){.mk-obs--after-ig{margin-top:max(0px,calc(374px - (100vw - 1200px) * .4958))}}
@media (max-width:767px){.mk-obs--after-ig{margin-top:0}}

/* left: heading + text + buttons. right: the picture and the numbers */
.mk-obs__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);column-gap:var(--mk-space-xl,50px);align-items:stretch}
.mk-obs__left{display:flex;flex-direction:column;min-width:0}
.mk-obs__right{min-width:0}
.mk-obs__head{margin:0}

/* Section title: subtitle (UI/Subtitle) above the title; main words in Syne Medium, accent words in the display font, same size as the other about sections */
.mk-obs__sub{display:flex;align-items:center;margin:0 0 var(--mk-space-sm,20px);font-size:var(--mk-font-size-text-xl,20px);font-weight:400;line-height:1.2;color:var(--ob-text2)}
.mk-obs__sep{margin:0 var(--mk-space-2xs,10px);color:var(--ob-text3)}
.mk-obs__title{margin:0;font-family:var(--mk-font-sans,'Syne',sans-serif);font-weight:500;font-size:var(--about-section,clamp(36px,4.2vw,68px));line-height:1.08;letter-spacing:-.035em;color:var(--ob-fg)}
.mk-obs__title span{font-family:var(--mk-font-display,'Gallery Modern',serif);font-weight:400}

/* Text/MD for the explanation, Text/SM (helper) for the notes */
.mk-obs__intro{margin:var(--mk-space-md,30px) 0 0;max-width:78ch;font-size:var(--mk-font-size-text-md,16px);line-height:1.55;color:var(--ob-text2)}
.mk-obs__legend{margin:var(--mk-space-sm,20px) 0 0;max-width:78ch;font-size:var(--mk-font-size-text-sm,14px);line-height:1.55;color:var(--ob-text3)}
.mk-obs__note{margin:var(--mk-space-2xs,10px) 0 0;max-width:78ch;font-size:var(--mk-font-size-text-sm,14px);line-height:1.55;color:var(--ob-text3)}
.mk-obs__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:var(--mk-space-md,30px)}
.mk-obs__pic{margin:0 0 var(--mk-space-sm,20px);width:100%}
.mk-obs__canvas{display:block;box-sizing:border-box;width:100%;max-width:100%;min-width:0;height:auto;aspect-ratio:2/1;border:1px solid var(--ob-line);border-radius:var(--mk-radius-sm,10px);color:var(--ob-fg)}

/* the numbers: UI/Label (Syne Medium 14); labels in text-secondary, values in text; rules in the border token */
.mk-obs__dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);column-gap:0}
.mk-obs__dl dt,.mk-obs__dl dd{margin:0;padding:var(--mk-space-2xs,10px) 0;border-bottom:1px solid var(--ob-rule);font-size:var(--mk-font-size-text-sm,14px);font-weight:500;line-height:1.2;letter-spacing:0}
.mk-obs__dl dt{color:var(--ob-text2);padding-right:var(--mk-space-sm,20px);padding-left:14px}
.mk-obs__dl dd{padding-right:14px;color:var(--ob-fg);text-align:right;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-obs__dl dt.mk-obs__r{padding-left:24px;border-left:1px solid var(--ob-rule)}
.mk-obs__dl dt.mk-obs__full{grid-column:1}
.mk-obs__dl dd.mk-obs__full{grid-column:2 / -1}
.mk-obs__rec{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:var(--mk-space-2xs,10px);background:var(--ob-accent);animation:mkObsBlink 1.4s steps(2) infinite}
@keyframes mkObsBlink{50%{opacity:.2}}

/* Button (design system): pill, 60px, 30px padding, UI/Button = Syne Medium 16 / 100% / 3%, original case.
   Primary = main action (filled accent; hover = outline). Outline = secondary (hover = filled accent). Focus ring comes from the site's global :focus-visible rule. */
.mk-obs__btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--mk-space-2xs,10px);box-sizing:border-box;height:60px;margin:0;padding:0 var(--mk-space-md,30px);border:1px solid var(--ob-accent);border-radius:var(--mk-radius-pill,9999px);font-family:var(--mk-font-sans,'Syne',sans-serif);font-size:var(--mk-font-size-text-md,16px);font-weight:500;line-height:1;letter-spacing:var(--mk-letter-spacing-button,.03em);text-transform:none;white-space:nowrap;cursor:pointer;-webkit-appearance:none;appearance:none;transition:background-color var(--ob-move),color var(--ob-move),border-color var(--ob-move)}
/* Design system Button, Small style: 38px high, 20px side padding. Used in the block; the full screen bar keeps the 60px size. */
.mk-observer .mk-obs__btn{height:38px;padding:0 var(--mk-space-sm,20px)}
.mk-obs__btn--primary{background:var(--ob-accent);color:var(--ob-accent-ink)}
.mk-obs__btn--primary:hover{background:transparent;color:var(--ob-fg)}
.mk-obs__btn--outline{background:transparent;color:var(--ob-fg)}
.mk-obs__btn--outline:hover{background:var(--ob-accent);color:var(--ob-accent-ink)}

/* Icon button (design system): circle 48px, 1px border-strong, 20px icon in text colour. Hover (not defined for icon buttons) follows the Outline button: filled accent. */
.mk-obs__iconbtn,.mk-obs__zoom-ic{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:48px;height:48px;margin:0;padding:0;border:1px solid var(--ob-line);border-radius:50%;background:transparent;color:var(--ob-fg);transition:background-color var(--ob-move),color var(--ob-move),border-color var(--ob-move)}
.mk-obs__iconbtn{cursor:pointer;-webkit-appearance:none;appearance:none}
.mk-obs__iconbtn svg,.mk-obs__zoom-ic svg{display:block;width:20px;height:20px}
.mk-obs__iconbtn:hover,.mk-obs__zoom:hover .mk-obs__zoom-ic{background:var(--ob-accent);border-color:var(--ob-accent);color:var(--ob-accent-ink)}

/* the picture itself is a button that opens the full screen view; the icon button marks it (on the picture it keeps a solid fill so the drawing never runs under it) */
.mk-obs__zoom{position:relative;display:block;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;-webkit-appearance:none;appearance:none}
.mk-observer .mk-obs__zoom{cursor:zoom-in}
.mk-obs__zoom-ic{position:absolute;top:12px;right:12px;background:var(--ob-bg)}

/* tablet and phone: one column, in reading order (heading, text, picture, numbers, notes, buttons) */
@media (max-width:1199px){
  .mk-observer{padding:var(--mk-section-sm,80px) 0}
  .mk-obs__grid{grid-template-columns:1fr;row-gap:var(--mk-space-md,30px)}
  .mk-obs__left,.mk-obs__right{display:contents}
  .mk-obs__head{order:1}
  .mk-obs__intro{order:2;margin:0;max-width:68ch}
  .mk-obs__pic{order:3;margin:0;max-width:680px}
  .mk-obs__dl{order:4;max-width:680px;width:100%}
  .mk-obs__legend{order:5;margin:0}
  .mk-obs__note{order:6;margin:0}
  .mk-obs__acts{order:7;margin:0;padding-top:0}
}
@media (max-width:575px){
  .mk-observer{padding:70px 0}
  .mk-obs__dl{grid-template-columns:auto minmax(0,1fr)}
  .mk-obs__dl dt,.mk-obs__dl dt.mk-obs__r{padding-left:10px;border-left:0}
  .mk-obs__dl dd{padding-right:10px}
  .mk-obs__dl dt.mk-obs__full{grid-column:auto}
  .mk-obs__dl dd.mk-obs__full{grid-column:auto}
}

/* ---------- full screen view (a Modal: bg surface, z-modal, focus trapped, Esc closes) ---------- */
.mk-obs-fs{position:fixed;left:0;top:0;right:0;bottom:0;z-index:var(--mk-z-modal,1100);display:flex;flex-direction:column;background:var(--ob-bg);color:var(--ob-fg)}
.mk-obs-fs[hidden]{display:none}
.mk-obs-fs__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--mk-space-sm,20px);flex-wrap:wrap;padding:var(--mk-space-xs,15px) var(--mk-space-md,30px);border-bottom:1px solid var(--ob-rule)}
.mk-obs-fs__cap{display:flex;align-items:center;font-size:var(--mk-font-size-text-sm,14px);font-weight:500;line-height:1.2}
.mk-obs-fs__t{margin-left:var(--mk-space-sm,20px);font-variant-numeric:tabular-nums;color:var(--ob-text3)}
.mk-obs-fs__acts{display:flex;align-items:center;gap:12px}
@media (max-width:575px){.mk-obs-fs__acts{width:100%;justify-content:space-between}}
.mk-obs-fs__stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:var(--mk-space-lg,40px);padding:var(--mk-space-md,30px);overflow:auto;overscroll-behavior:contain}
.mk-obs-fs__pic{flex:1 1 0;min-width:0;display:flex;justify-content:center}
.mk-obs-fs__canvas{display:block;box-sizing:border-box;width:100%;max-width:calc((100vh - 170px) * 1.6);aspect-ratio:16/10;border:1px solid var(--ob-line);border-radius:var(--mk-radius-sm,10px);color:var(--ob-fg)}
@supports (height:100dvh){.mk-obs-fs__canvas{max-width:calc((100dvh - 170px) * 1.6)}}
.mk-obs-fs__side{flex:0 0 440px;min-width:0}
/* in the full screen view the table is one pair per row */
.mk-obs-fs .mk-obs__dl{grid-template-columns:auto minmax(0,1fr)}
.mk-obs-fs .mk-obs__dl dt.mk-obs__r{padding-left:14px;border-left:0}
.mk-obs-fs .mk-obs__dl dt.mk-obs__full,.mk-obs-fs .mk-obs__dl dd.mk-obs__full{grid-column:auto}
.mk-obs-fs .mk-obs__legend{margin-top:var(--mk-space-xs,15px)}
@media (max-width:1099px){
  .mk-obs-fs__stage{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:var(--mk-space-md,30px)}
  .mk-obs-fs__pic{flex:0 0 auto}
  .mk-obs-fs__side{flex:0 0 auto}
}

/* ---------- skeleton cursor (replaces the template's magic cursor; z-cursor) ---------- */
/* The native arrow stays; add "cursor:none" to body.mk-obs-chain to hide it. */
body.mk-obs-chain #magic-cursor{display:none!important}
#mkObsChain{position:fixed;left:0;top:0;width:100%;height:100%;z-index:var(--mk-z-cursor,9999);pointer-events:none;mix-blend-mode:difference}

/* ---------- vertical tag, top right (UI/Label) ---------- */
/* Fixed, below the header (96px) and above the Light/Dark tab on the right edge. The blend mode keeps it readable on light, dark and image sections. */
.mk-obs-side{position:fixed;top:118px;right:16px;z-index:998;display:flex;align-items:center;gap:var(--mk-space-2xs,10px);writing-mode:vertical-rl;color:#fff;mix-blend-mode:difference;text-decoration:none;font-family:var(--mk-font-sans,'Syne',sans-serif);font-size:var(--mk-font-size-text-sm,14px);font-weight:500;line-height:1.2;letter-spacing:0;padding:4px 2px;white-space:nowrap}
.mk-obs-side:hover{color:#fff}
.mk-obs-menu{display:none;align-items:center;gap:var(--mk-space-2xs,10px);margin-top:var(--mk-space-md,30px);color:var(--mk-color-text,#1e1e1e);text-decoration:none;font-family:var(--mk-font-sans,'Syne',sans-serif);font-size:var(--mk-font-size-text-sm,14px);font-weight:500;line-height:1.2}
.mk-obs-menu .mk-obs-side__rec{background:var(--mk-color-accent,#7303c0)}
.mk-obs-menu:hover{color:var(--mk-color-accent,#7303c0)}
@media (max-width:991px){.mk-obs-menu{display:inline-flex}}
.mk-obs-side__rec{display:block;width:8px;height:8px;border-radius:50%;background:#fff;animation:mkObsBlink 1.4s steps(2) infinite}
.mk-obs-side span{transition:opacity var(--mk-duration-base,.3s) var(--mk-ease-standard,cubic-bezier(0,0,.58,1))}
.mk-obs-side:hover span{opacity:.6}
@media (max-width:991px),(max-height:699px){.mk-obs-side{display:none}}

@media (prefers-reduced-motion:reduce){.mk-obs__rec,.mk-obs-side__rec{animation:none}.mk-obs__btn,.mk-obs__iconbtn,.mk-obs__zoom-ic,.mk-obs-side span{transition:none}}