/* /referenciak/ and /en/work/ in the split stage (2026-10-31). Loads on top of home-split.css, which is the
   world (tokens, the seam, the split layout, type, controls); everything here is this page only.
   The map: the country drawn once on paper and once on ink, clipped at the seam, so its line changes colour
   where it crosses; Csopak is the hub and every place carries its site's real phone capture.
   The plates: per group a list of credit rows on paper and the picked site full size on ink. */

/* ------------------------------------------------------------------------------ the page's scale -- */
.page-ref main{
  --t-title:clamp(1.0625rem,1rem + .2vw,1.1875rem);
  --t-small:clamp(.9375rem,.9rem + .15vw,1.0625rem);
  --t-micro:clamp(.8125rem,.8rem + .08vw,.875rem);
  --lh-title:1.3; --lh-small:1.55; --lh-body:1.62;
  --s1:.4rem; --s2:.75rem; --s3:1.1rem; --s4:1.8rem;
  --map-ratio:2.1831;                 /* the stage, 3100 x 1420 map units */
}
.page-ref ::selection{background:rgba(37,99,235,.2)}
.page-ref .side--ink ::selection,.page-ref .closer ::selection{background:rgba(96,165,250,.38);color:#fff}
.page-ref main .sh-lede{max-width:34em}

/* ------------------------------------------------------------------------------------ 0 · the map -- */
/* the flowing sections paint above the ink ground (the pinned close gets this from .sh-act) */
.rf-hero,.rf-group,.rf-faq{position:relative;z-index:1}
.rf-hero{grid-template-columns:1fr 1fr;grid-template-areas:"h1 h1" ". lede" "map map" "ix ix";
  min-height:calc(100svh - var(--hdr,64px));align-content:start;padding-top:0;padding-bottom:clamp(.6rem,1.6vh,1.2rem)}
.rf-hero .hero-h1{grid-area:h1;display:grid;grid-template-columns:1fr 1fr;column-gap:6rem;align-items:end;
  margin:0;padding:clamp(1.3rem,3.2vh,2.4rem) var(--gut) 0;font-size:var(--t-display);font-weight:800;
  line-height:1.04;letter-spacing:-.032em;text-wrap:balance;max-width:none}
.rf-hero .h1-a{justify-self:end;text-align:right;color:var(--paper-text);max-width:12em}
.rf-hero .h1-b{color:var(--ink-text);max-width:12em}
.rf-hero-foot{display:contents}
.rf-lede{grid-area:lede;margin:var(--s2) 0 0!important;padding-inline:3rem var(--gut);max-width:calc(34rem + 3rem);
  font-size:var(--t-small);line-height:var(--lh-small);color:var(--ink-soft);text-wrap:pretty}

.rf-map{grid-area:map;margin:clamp(.4rem,1.4vh,1rem) 0 0;padding:0;position:relative;z-index:1}
.rf-map-stage{position:relative;margin-inline:auto;aspect-ratio:3100/1420;
  width:min(calc(100% - var(--gut) * 2), calc((100svh - var(--hdr,64px) - 20rem) * var(--map-ratio)), 86rem)}
.rf-map-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rf-country{fill:none;stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.rf-side--paper .rf-country{stroke:var(--paper-text)}
.rf-side--ink .rf-country{stroke:var(--ink-soft)}
.rf-lake{fill:rgba(37,99,235,.16);stroke:var(--paper-accent);stroke-width:1.2;vector-effect:non-scaling-stroke}
.rf-leader{fill:none;stroke-width:3.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.rf-side--paper .rf-leader{stroke:var(--paper-accent)}
.rf-side--ink .rf-leader{stroke:var(--ink-accent)}
/* the one authored moment: the lines are drawn out from the places, once, on load */
@media (prefers-reduced-motion:no-preference){
  .rf-leader{animation:rf-draw 1.1s cubic-bezier(.16,1,.3,1) both}
  .rf-side .rf-leader:nth-of-type(3){animation-delay:.15s}
  .rf-side .rf-leader:nth-of-type(4){animation-delay:.27s}
  .rf-side .rf-leader:nth-of-type(5){animation-delay:.39s}
  .rf-side .rf-leader:nth-of-type(6){animation-delay:.51s}
  .rf-side .rf-leader:nth-of-type(7){animation-delay:.63s}
}
@keyframes rf-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

.rf-dot{position:absolute;border-radius:50%;pointer-events:none}
/* the studio mark: the compass on a white disc, so it reads as a mark and not as a blot on the lake */
.rf-hub{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;padding:4px;box-sizing:border-box;
  border-radius:50%;background:#fff;box-shadow:var(--shadow-paper);z-index:3;pointer-events:none}
html[data-theme="dark"] .rf-hub{filter:invert(1) hue-rotate(180deg) saturate(1.35) brightness(1.05)}
.rf-dot{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:var(--paper-text);z-index:2}
.rf-dot.rf-ink{background:var(--ink-text)}
.rf-place{position:absolute;white-space:nowrap;z-index:3;pointer-events:none}
/* on desktop the captures name their places; the bare labels are for phones, where the captures step aside */
.rf-place{display:none;font:600 var(--t-micro)/1.2 var(--sc-font-text);color:var(--paper-soft)}
.rf-place.rf-ink{color:var(--ink-soft)}
.rf-place--start{translate:0 -50%}
.rf-place--end{translate:-100% -50%}
.rf-place--mid{translate:-50% 0}

.rf-thumb{position:absolute;z-index:4;display:block;text-decoration:none;color:var(--paper-text)}
.rf-thumb img{display:block;width:100%;height:auto;border-radius:var(--r-m);border:1px solid var(--hair-paper);
  background:#fff;box-shadow:var(--shadow-paper);transition:translate 260ms cubic-bezier(.16,1,.3,1),box-shadow 260ms}
.rf-thumb.rf-ink{color:var(--ink-text)}
.rf-thumb.rf-ink img{border-color:var(--hair-ink);box-shadow:var(--shadow-ink)}
.rf-thumb-cap{display:block;margin-top:.45rem;font:400 var(--t-micro)/1.3 var(--sc-font-text);white-space:nowrap}
.rf-thumb-cap b{display:block;font-weight:700}
.rf-thumb-cap span{display:block;color:var(--paper-soft)}
.rf-thumb.rf-ink .rf-thumb-cap span{color:var(--ink-soft)}
@media (hover:hover){
  .rf-thumb:hover img{translate:0 -4px;box-shadow:var(--shadow-slip)}
  .rf-thumb:hover .rf-thumb-cap{color:var(--paper-accent)}
  .rf-thumb.rf-ink:hover .rf-thumb-cap{color:var(--ink-accent)}
}
.rf-thumb:focus-visible{outline:2px solid var(--paper-accent);outline-offset:4px;border-radius:var(--r-m)}
.rf-thumb.rf-ink:focus-visible{outline-color:var(--ink-accent)}
.rf-credit{position:absolute;right:var(--gut);bottom:0;max-width:24rem;text-align:right;
  font:400 .75rem/1.4 var(--sc-font-text);color:var(--ink-soft)}

/* the group index: one hairline row, two groups on each ground */
.rf-index{grid-area:ix;padding:clamp(.4rem,1.2vh,.9rem) var(--gut) 0}
.rf-index ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);column-gap:4.5rem}
.rf-index li{margin:0}
.rf-index a{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.7rem 0 .2rem;
  border-top:1px solid var(--hair-paper);font:700 var(--t-title)/1.2 var(--sc-font-text);letter-spacing:-.01em;
  color:var(--paper-text);text-decoration:none}
.rf-index li:nth-child(n+3) a{border-top-color:var(--hair-ink);color:var(--ink-text)}
.rf-ix-n{font-weight:600;font-size:var(--t-small);color:var(--paper-soft);font-variant-numeric:tabular-nums}
.rf-index li:nth-child(n+3) .rf-ix-n{color:var(--ink-soft)}
@media (hover:hover){
  .rf-index a:hover{color:var(--paper-accent)}
  .rf-index li:nth-child(n+3) a:hover{color:var(--ink-accent)}
}
.rf-index li:nth-child(n+3) a:focus-visible{outline-color:var(--ink-accent)}

/* ----------------------------------------------------------------------------- 1-4 · the groups -- */
.rf-group{padding-block:clamp(3rem,9vh,5.5rem) clamp(2.4rem,7vh,4.5rem);align-items:center}
.rf-group .side-body{margin-left:auto;max-width:34rem}
.rf-group h2{margin-bottom:var(--s3)}
.rf-list{list-style:none;margin:var(--s4) 0 0;padding:0}
.rf-item{position:relative;margin:0;padding:var(--s3) 0;border-top:1px solid var(--hair-paper)}
.rf-item:last-child{border-bottom:1px solid var(--hair-paper)}
.rf-mshot{display:none}
.rf-item.has-logo{display:grid;grid-template-columns:8rem minmax(0,1fr);column-gap:var(--s3);align-items:start}
.rf-item.has-logo>:not(.rf-logo){grid-column:2}
/* one quiet logo row: each client's own shape, no ground, painted in the text colour (light on ink in the dark
   theme, since --paper-text flips); --lg-w is set per mark so the three carry the same optical weight */
.rf-logo{grid-column:1;grid-row:1 / span 4;display:flex;align-items:center;justify-content:center;height:3.4rem;
  margin-top:.1rem}
.rf-logo-mark{display:block;width:var(--lg-w);max-width:100%;aspect-ratio:var(--lg-r);background-color:var(--paper-text);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-position:center;mask-position:center}
.side--ink .rf-logo-mark{background-color:var(--ink-text)}
.rf-pick{display:block;width:100%;margin:0;padding:0;border:0;background:none;text-align:left;cursor:pointer;
  font:inherit;color:inherit}
.rf-name{display:block;font:800 var(--t-title)/var(--lh-title) var(--sc-font-display);letter-spacing:-.014em;
  color:var(--paper-text)}
.rf-self{display:inline-block;margin-left:.6rem;padding:.08rem .45rem;border:1px solid var(--hair-paper);border-radius:var(--r-s);
  font:600 var(--t-micro)/1.3 var(--sc-font-text);letter-spacing:0;color:var(--paper-soft);vertical-align:.12em}
.rf-for{display:block;margin-top:.15rem;font-size:var(--t-small);line-height:var(--lh-small);color:var(--paper-soft)}
.rf-built{margin-top:var(--s1)!important;font-size:var(--t-small);line-height:var(--lh-small);color:var(--paper-text);
  text-wrap:pretty}
.rf-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1.1rem;margin-top:var(--s2)!important;
  font-size:var(--t-micro);line-height:1.35;color:var(--paper-soft)}
.rf-out{margin-left:auto;display:inline-flex;align-items:center;gap:.3rem;font-weight:600;color:var(--paper-accent)!important;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.rf-arrow{flex:none}
.rf-auto{color:var(--paper-text)}
/* the picked row: its name takes the blue and a dot marks it, the same mark the map uses for a place */
.rf-item.is-on .rf-name{color:var(--paper-accent)}
.rf-item::before{content:"";position:absolute;left:-1.25rem;top:calc(var(--s3) + .5em);width:8px;height:8px;
  border-radius:50%;background:var(--paper-accent);scale:0;transition:scale 220ms cubic-bezier(.16,1,.3,1)}
.rf-item.is-on::before{scale:1}
@media (hover:hover){
  .rf-pick:hover .rf-name{color:var(--paper-accent)}
  .rf-out:hover{color:var(--paper-accent-hover)!important}
}
.rf-pick:focus-visible{outline:2px solid var(--paper-accent);outline-offset:5px;border-radius:var(--r-s)}

/* the plate on ink: the picked site in a plain browser frame, its phone view lapping the frame's corner */
.rf-side-plate{display:flex;align-items:center}
.rf-plate{width:min(40rem,100%);margin-right:auto}
.rf-shot{position:relative;margin:0;padding-bottom:0}
.rf-shot[hidden]{display:none}
.rf-browser{border-radius:var(--r-m);overflow:hidden;background:#fff;border:1px solid var(--hair-ink);box-shadow:var(--shadow-ink)}
.rf-bar{display:flex;align-items:center;height:2.1rem;padding:0 .75rem;background:var(--ink-surface)}
.rf-bar-url{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.12rem .7rem;
  border-radius:var(--r-s);background:rgba(232,234,242,.08);font:500 var(--t-micro)/1.4 var(--sc-font-text);color:var(--ink-soft)}
.rf-browser img{display:block;width:100%;height:auto;aspect-ratio:1200/750}
.rf-phone{position:absolute;left:-2.4rem;bottom:2.4rem;width:min(8.6rem,23%);height:auto;border-radius:14px;
  border:1px solid var(--hair-ink);background:#fff;box-shadow:var(--shadow-ink)}
.rf-shot figcaption{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:var(--s3);
  padding-left:calc(min(8.6rem,23%) - 1.4rem);font-size:var(--t-micro);line-height:1.45;color:var(--ink-soft)}
.rf-open{flex:none;gap:.4rem;padding:.7rem 1.1rem;font-size:var(--t-small)}

/* ------------------------------------------------------------------------- 5 · questions and sources -- */
.rf-faq{padding-block:clamp(2.4rem,6.5vh,4.25rem) clamp(1.5rem,3.75vh,2.5rem)}
.rf-faq .side-body{margin-left:auto;max-width:34rem}
.rf-faq .side--ink .side-body{margin-left:0}
.rf-faq .faq,.rf-faq .sources{margin:0;padding:0;max-width:none}
.rf-faq .faq h2{margin-bottom:var(--s3)}
.rf-faq details{border:0;border-bottom:1px solid var(--hair-paper);border-radius:0;background:transparent;box-shadow:none;margin:0}
.rf-faq summary{padding:var(--s3) 0;font:600 var(--t-title)/var(--lh-title) var(--sc-font-text);color:var(--paper-text);gap:1.2em}
.rf-faq summary::after{font-family:var(--sc-font-display);font-size:1.35rem;font-weight:700;color:var(--paper-accent)}
.rf-faq details>div{padding:0 0 var(--s3)}
.rf-faq details p{font-size:var(--t-small);line-height:var(--lh-small);color:var(--paper-soft)}
.rf-faq .sources h2{font-size:var(--t-title);line-height:var(--lh-title);margin-bottom:var(--s2);color:var(--ink-text)}
.rf-faq .sources ul{display:grid;gap:var(--s2);margin:0;padding:0 0 0 1.1rem}
.rf-faq .sources li{font-size:var(--t-small);line-height:var(--lh-small);color:var(--ink-soft)}
.rf-faq .sources a{color:var(--ink-soft)!important;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.rf-faq .sources a:hover{color:var(--ink-text)!important}

/* --------------------------------------------------------------------------- shorter laptop screens -- */
@media (min-width:761px) and (max-height:820px){
  .rf-hero .hero-h1{font-size:clamp(1.8rem,0.9rem + 2vw,2.5rem)}
  .rf-map-stage{width:min(calc(100% - var(--gut) * 2), calc((100svh - var(--hdr,64px) - 17.5rem) * var(--map-ratio)), 86rem)}
}
@media (min-width:761px) and (max-width:1100px){
  .rf-index ul{column-gap:2rem}
  .rf-phone{left:-1.4rem}
}

/* ------------------------------------------------------------------------------------------ phones -- */
@media (max-width:760px){
  .rf-hero{display:block;min-height:0;padding-bottom:0;background:var(--paper)}
  .rf-hero .hero-h1{display:block;padding:1.4rem var(--gut) 0;font-size:1.75rem}
  .rf-hero .h1-a,.rf-hero .h1-b{display:inline;text-align:left;color:var(--paper-text);max-width:none}
  /* the country fills the width: the stage's side margins (where the desktop captures hang) fall away */
  .rf-map{margin-top:1rem;overflow:hidden}
  .rf-map-stage{width:148%;margin-left:-24%}
  .rf-leader,.rf-thumb{display:none}
  /* the whole phone map sits on paper, so its east half drops the ink colours */
  .rf-side--ink .rf-country{stroke:var(--paper-text)}
  .rf-dot.rf-ink{background:var(--paper-text)}
  .rf-place,.rf-place.rf-ink{display:block;color:var(--paper-soft)}
    .rf-credit{position:static;max-width:none;text-align:left;padding:.5rem var(--gut) 1.2rem;color:var(--paper-soft)}
  .rf-hero-foot{display:block;position:relative;background:var(--ink-ground);padding:2.4rem var(--gut) 2rem}
  .rf-lede{margin:0!important;padding:0;max-width:none;font-size:1rem}
  .rf-index{padding:1.2rem 0 0}
  .rf-index ul{grid-template-columns:1fr 1fr;column-gap:1.25rem}
  .rf-index li a{border-top-color:var(--hair-ink);color:var(--ink-text)}
  .rf-index .rf-ix-n{color:var(--ink-soft)}

  .rf-group{padding-block:0;display:block;background:var(--paper)}
  .rf-group .side--paper{padding-block:2.4rem 2rem}
  .rf-group .side-body{max-width:none}
  .rf-side-plate{display:none}
  /* one card per site in a row that scrolls sideways: the next card peeks in, so the row explains itself */
  .rf-list{display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin:var(--s3) calc(var(--gut) * -1) 0;padding:.3rem var(--gut) 1rem;scroll-padding-inline:var(--gut);scrollbar-width:none}
  .rf-list::-webkit-scrollbar{display:none}
  .rf-item,.rf-item:last-child{flex:0 0 82%;scroll-snap-align:start;padding:0 0 1rem;border:1px solid var(--hair-paper);
    border-radius:14px;background:var(--paper-card);box-shadow:var(--shadow-paper);overflow:hidden}
  .rf-item::before{display:none}
  .rf-item.has-logo{display:flex;flex-direction:column}
  .rf-item.has-logo .rf-mshot{order:-1}
  .rf-logo{justify-content:flex-start;height:2.6rem;margin:.75rem 1rem 0;grid-row:auto}
  .rf-logo-mark{width:calc(var(--lg-w) * .8)}
  .rf-item.has-logo .rf-mshot{aspect-ratio:390/340}
  .rf-item.has-logo .rf-pick{margin-top:.6rem}
  .rf-item.is-on .rf-name{color:var(--paper-text)}
  .rf-mshot{display:block;width:100%;height:auto;aspect-ratio:390/430;object-fit:cover;object-position:top;
    border-bottom:1px solid var(--hair-paper)}
  .rf-pick,.rf-built,.rf-meta{padding-inline:1rem}
  .rf-pick{margin-top:.85rem;cursor:default}
  .rf-built{font-size:.9375rem}
  .rf-meta{gap:.2rem .9rem}
  .rf-out{margin-left:0;width:100%}

  .rf-faq .side-body{max-width:none}
  .rf-faq .side--paper{padding-block:2.4rem 1.6rem}
  .rf-faq .side--ink{padding-block:2.4rem 2.2rem}
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference){
  .rf-list{scroll-behavior:smooth}
}