/* ==========================================================================
   BLACK SWALLOW - cut-out collage
   World taken from lolilaboureau.com. Ground, type and shape all diverge:
   see build.py for what was taken and what was deliberately left.

   The whole page is one hand-placed canvas. There is no grid, no card
   component and no repeating section shell, because a repeating shell is
   what made six earlier Regan IT demos look like the same site.
   ========================================================================== */

:root{
  --paper:#E6E8E1;        /* cool studio seamless, cleared the divergence gate */
  --paper-2:#DDE0D7;
  --ink:#101010;
  --ink-soft:#5A5E56;
  --red:#E8281E;
  --acid:#9CFF33;
  --pink:#FACDF8;
  --marker:#1B44E8;       /* blue Sharpie, the annotation voice */
  --rule:#C6C9BE;
  --white:#FFFFFF;

  --sans:'Instrument Sans',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --mono:'Fragment Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --hand:'Permanent Marker','Instrument Sans',cursive;

  /* Type stays tiny on purpose. The reference's largest text anywhere is 40px
     and it has no body copy at all between the hero and the footer. The
     pictures do the shouting. */
  --t-micro:8px;
  --t-small:11px;
  --t-body:13px;
  --t-lead:16px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Halftone ground. The fidelity check caught this: the reference carries
   background texture above the fold and a first pass here had none, so the
   ground read as flat screen colour rather than as paper. A fine dot screen
   is also the right texture for traditional flash, which is a print tradition
   before it is a tattoo one. */
body{
  margin:0;color:var(--ink);
  background-color:var(--paper);
  background-image:radial-gradient(rgba(16,16,16,.055) 1px,transparent 1.15px);
  background-size:4px 4px;
  font-family:var(--sans);font-size:var(--t-body);line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:600}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}

:focus-visible{outline:2.5px solid var(--marker);outline-offset:3px}

/* ==========================================================================
   DEMO BAR + NAV
   ========================================================================== */
.pv{
  background:var(--red);color:var(--white);
  font-family:var(--mono);font-size:var(--t-small);line-height:1.45;
  padding:8px 18px;text-align:center;position:relative;z-index:60;
}
.pv b{font-weight:400;letter-spacing:.08em}

.nav{
  position:sticky;top:0;z-index:55;
  display:flex;align-items:center;gap:22px;
  padding:11px 18px;
  background:color-mix(in srgb,var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.2) blur(7px);
  border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:var(--t-small);letter-spacing:.1em;
}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;letter-spacing:.14em}
.bird{display:inline-flex;color:var(--ink)}
.nav nav{display:flex;gap:20px;margin-left:auto}
.nav nav a{text-decoration:none;opacity:.72;transition:opacity .18s,color .18s}
.nav nav a:hover{opacity:1;color:var(--red)}
.navtel a{text-decoration:none;color:var(--red);border:1px solid var(--red);
  border-radius:999px;padding:5px 13px;transition:background .18s,color .18s}
.navtel a:hover{background:var(--red);color:var(--white)}
@media (max-width:720px){
  .navtel{display:none}
  .nav{gap:12px;padding:10px 12px}
  .nav nav{gap:13px}
}

/* ==========================================================================
   THE CANVAS
   Each scene is a positioning context. Pieces are placed by hand inside it
   with percentage offsets and vw widths, so the composition holds its shape
   across widths instead of reflowing into a column.
   ========================================================================== */
.canvas{position:relative}
.scene{position:relative;width:100%;overflow:visible}
.s-hero{min-height:104vh}
.s-work{min-height:116vh;margin-top:2vh}
.s-flash{min-height:66vh}
.s-art{min-height:114vh}
.s-book{min-height:120vh}

/* Photo bands that stop mid-scene. Cut-outs break across the seam, which is
   the single move that stops a collage looking like floating clip art. */
.band{position:absolute;left:0;right:0;z-index:1;pointer-events:none}
.band-acid{top:58%;height:clamp(150px,20vw,260px);background:var(--acid)}
.band-red{top:6%;height:clamp(220px,32vw,430px);background:var(--red)}
.band-pink{top:34%;height:clamp(200px,26vw,360px);background:var(--pink)}

/* --- pieces --------------------------------------------------------------- */
.p{
  position:absolute;margin:0;
  transform:rotate(var(--rot,0deg)) translate3d(var(--dx,0px),var(--dy,0px),0);
  will-change:transform;
}
.p img{display:block;width:100%;height:auto;-webkit-user-drag:none;user-select:none}

/* A drop-shadow on an alpha image follows the silhouette, not the box. That
   is what makes a cut-out read as an object sitting on the page. */
.p-cut img{filter:drop-shadow(0 18px 22px rgba(16,16,16,.30)) drop-shadow(0 2px 3px rgba(16,16,16,.22))}

/* Vision cuts the subject perfectly but cannot invent the part of a body that
   was never in the frame, so on those photographs the mask stops dead at the
   original edge and leaves a straight horizontal slice. Fading the bottom
   sinks the object into the ground instead, which is what a real collage does
   with a piece it has run out of. The mask applies after the filter, so the
   drop shadow fades with it. */
.p-fade img{
  -webkit-mask-image:linear-gradient(to bottom,#000 68%,rgba(0,0,0,.5) 87%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 68%,rgba(0,0,0,.5) 87%,transparent 100%);
}

/* Five of the fifteen photographs have a subject that runs off the edge of the
   original frame. As a cut-out that straight edge looks like a mistake; in a
   print border it reads as intentional. */
/* A real photo print has a slightly rounded corner, which is also one of the
   three distinct corner treatments the reference carries and an earlier pass
   here was missing. */
.p-print{background:var(--white);padding:10px 10px 34px;border-radius:2px;
  box-shadow:0 16px 26px rgba(16,16,16,.24),0 2px 4px rgba(16,16,16,.18)}
.p-print img{filter:none}

.pcap{
  display:block;position:absolute;left:12px;right:12px;bottom:9px;
  font-family:var(--hand);font-size:var(--t-body);color:var(--marker);
  line-height:1.1;transform:rotate(-1.2deg);
}
.p-cut .pcap{left:0;right:auto;bottom:-30px;white-space:nowrap}

.drag{touch-action:none}
.p.held{z-index:40!important}
.p.held img{filter:drop-shadow(0 34px 40px rgba(16,16,16,.34))}
.p-print.held{box-shadow:0 34px 44px rgba(16,16,16,.3)}

/* --- hero type ------------------------------------------------------------ */
.herotext{position:absolute;left:36%;top:9%;z-index:14;max-width:44ch}
h1{line-height:.86;letter-spacing:-.02em}
.wm{display:block;font-size:clamp(30px,4.4vw,54px);font-weight:600}
.wm2{display:block;font-family:var(--mono);font-size:clamp(10px,1.05vw,13px);
     letter-spacing:.44em;font-weight:400;margin-top:9px;color:var(--ink-soft)}
.tw{margin-top:20px;font-family:var(--mono);font-size:var(--t-lead);line-height:1.45;max-width:34ch;min-height:3.2em}
.cur2{display:inline-block;width:.58em;height:1.05em;background:var(--red);
      vertical-align:-.16em;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.sub{margin-top:14px;font-family:var(--mono);font-size:var(--t-small);color:var(--ink-soft);letter-spacing:.06em}

.scrollhint{
  position:absolute;left:3%;bottom:3%;z-index:14;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.28em;color:var(--ink-soft);
}

/* --- marker annotations --------------------------------------------------- */
.note{
  position:absolute;font-family:var(--hand);color:var(--marker);
  font-size:clamp(13px,1.25vw,17px);line-height:1.22;max-width:26ch;
  transform:rotate(var(--rot,-1.5deg));z-index:15;pointer-events:none;
}
.anno{position:absolute;z-index:15;display:flex;align-items:center;gap:6px;pointer-events:none}
.anno .note{position:static;transform:none;max-width:22ch}
.arrowwrap{color:var(--marker);flex:none;display:block}
.arw{display:block}

.anno-machine{left:37%;top:42%}
.anno-price{right:6%;top:22%;flex-direction:column;align-items:flex-end;text-align:right}
.anno-care{left:6%;bottom:9%}
.n1{left:6%;top:78%;--rot:-2deg}
.n2{left:64%;top:86%;--rot:1.6deg}
.n3{left:8%;bottom:6%;--rot:-1deg}

/* --- section labels ------------------------------------------------------- */
.slab{
  position:absolute;left:3%;top:2.5%;z-index:16;
  display:flex;align-items:center;gap:11px;
  font-family:var(--mono);font-size:var(--t-small);letter-spacing:.26em;
}
.slab .num{color:var(--red)}
.slab .rule{display:block;width:clamp(40px,7vw,96px);height:1px;background:var(--ink)}

/* ==========================================================================
   FLASH SHEET
   Drawn, not fetched. Sits deep in the page, well below the two-fold window
   the character probe reads, so it cannot be mistaken for a row of icons.
   ========================================================================== */
.sheet{
  position:absolute;left:50%;top:15%;width:min(1010px,90vw);
  transform:translateX(-50%) rotate(-1.4deg);
  background:var(--white);padding:38px 30px 26px;z-index:8;
  box-shadow:0 22px 40px rgba(16,16,16,.22),0 3px 6px rgba(16,16,16,.16);
}
/* torn lower edge, drawn with a repeating mask rather than an image */
.sheet::after{
  content:"";position:absolute;left:0;right:0;bottom:-13px;height:14px;background:var(--white);
  -webkit-mask-image:radial-gradient(circle at 8px -3px,transparent 9px,#000 10px);
  mask-image:radial-gradient(circle at 8px -3px,transparent 9px,#000 10px);
  -webkit-mask-size:19px 14px;mask-size:19px 14px;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
}
.pin{
  position:absolute;left:50%;top:-11px;width:22px;height:22px;border-radius:50%;
  transform:translateX(-50%);
  background:radial-gradient(circle at 34% 32%,#ff8a84,var(--red) 58%,#8d130d);
  box-shadow:0 4px 7px rgba(16,16,16,.4);
}
/* Five across on a wide sheet, so it reads as one flash sheet rather than a
   wrapped 4-plus-1 grid. */
.flashlist{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,2.2vw,30px)}
.fitem{position:relative;text-align:center;color:var(--ink)}
.fl{display:block;width:clamp(96px,11.5vw,150px);height:auto;overflow:visible}
.fnum{position:absolute;left:2px;top:-4px;font-family:var(--mono);font-size:var(--t-micro);color:var(--red)}
.fname{display:block;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.2em;margin-top:4px;color:var(--ink-soft)}
.sheetfoot{margin-top:22px;text-align:center;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.24em;color:var(--ink-soft)}

/* ==========================================================================
   CARDS, SLIPS AND STICKERS
   The reference has no business content at all. Ours is put into the collage
   as physical objects so the page can still sell without breaking the world.
   ========================================================================== */
.cards{position:absolute;left:4%;bottom:12%;display:flex;gap:clamp(10px,1.6vw,22px);z-index:13;flex-wrap:wrap}
.card{
  background:var(--white);padding:18px 20px 20px;
  box-shadow:0 14px 24px rgba(16,16,16,.2),0 2px 4px rgba(16,16,16,.14);
  transform:rotate(var(--rot,0deg));position:relative;
}
.acard{width:clamp(168px,17vw,224px)}
.cnum{font-family:var(--mono);font-size:var(--t-micro);color:var(--red);letter-spacing:.2em}
.acard h3{font-size:var(--t-lead);letter-spacing:.02em;margin-top:6px}
.cstyle{font-family:var(--mono);font-size:var(--t-small);color:var(--ink-soft);margin-top:5px}
.cbook{font-family:var(--hand);font-size:var(--t-body);color:var(--marker);margin-top:9px;line-height:1.15}

.pricecard{position:absolute;left:26%;top:11%;width:clamp(250px,24vw,320px);--rot:-1.8deg;z-index:14;padding-top:26px}
.hourscard{position:absolute;right:6%;bottom:7%;width:clamp(250px,23vw,310px);--rot:1.4deg;z-index:14}
.card h2{font-family:var(--mono);font-size:var(--t-small);letter-spacing:.24em;color:var(--ink-soft);font-weight:400}
.rows{margin-top:12px;border-top:1px solid var(--rule)}
.rows li{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--rule);font-size:var(--t-body)}
.rows b{font-weight:600;font-variant-numeric:tabular-nums}
.fine{margin-top:11px;font-family:var(--hand);font-size:var(--t-body);color:var(--marker);line-height:1.18}
.bigtel{margin-top:12px;font-size:var(--t-lead);font-weight:600}
.bigtel a{text-decoration:none;color:var(--red)}

.slip{
  position:absolute;right:5%;top:9%;width:clamp(240px,23vw,310px);
  background:#FBFBF6;padding:22px 22px 20px;transform:rotate(2.2deg);z-index:13;
  box-shadow:0 12px 20px rgba(16,16,16,.16);
}
.tape{position:absolute;top:-11px;width:74px;height:23px;background:rgba(255,255,255,.62);
      border-left:1px dashed rgba(16,16,16,.16);border-right:1px dashed rgba(16,16,16,.16);
      box-shadow:0 1px 2px rgba(16,16,16,.14)}
.tape-l{left:-16px;transform:rotate(-26deg)}
.tape-r{right:-16px;transform:rotate(24deg)}
.care{margin-top:12px;counter-reset:c}
.care li{position:relative;padding:6px 0 6px 24px;font-size:var(--t-body);border-bottom:1px solid var(--rule)}
.care li::before{counter-increment:c;content:counter(c);position:absolute;left:0;top:6px;
  font-family:var(--mono);font-size:var(--t-micro);color:var(--red)}

.sticker{
  position:absolute;left:12%;bottom:22%;z-index:16;
  background:var(--acid);color:var(--ink);padding:16px 20px;text-align:center;
  transform:rotate(-7deg);border:2.5px solid var(--ink);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.2em;line-height:1.7;
  box-shadow:0 10px 18px rgba(16,16,16,.22);
}
.sticker b{display:block;font-size:clamp(19px,2.4vw,30px);letter-spacing:.02em;font-weight:600;line-height:1.05;margin:3px 0}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{position:relative;background:var(--ink);color:#E9E9E4;padding:64px 5vw 34px;margin-top:8vh;z-index:20}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px}
.fcol h3{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.28em;color:#8B8F86;font-weight:400;margin-bottom:11px}
.fcol p,.fcol li{font-size:var(--t-body);line-height:1.65}
.fcol a{color:inherit}
.fask{font-size:clamp(19px,2.3vw,30px);font-weight:600;line-height:1.15;max-width:15ch}
.copy{
  margin-top:15px;display:inline-flex;align-items:center;gap:12px;
  background:none;border:1px solid #3A3A36;color:inherit;
  padding:11px 15px;font-family:var(--mono);font-size:var(--t-body);
  transition:border-color .2s,background .2s;
}
.copy:hover{border-color:var(--acid);background:rgba(156,255,51,.07)}
.cstate{font-size:var(--t-micro);letter-spacing:.2em;color:#8B8F86}
.copy.done .cstate{color:var(--acid)}
.fhours li{display:flex;justify-content:space-between;gap:10px}
.fhours b{font-weight:400;color:#9DA298}
.clock{font-family:var(--mono);font-size:clamp(19px,2.1vw,26px);font-variant-numeric:tabular-nums}
.coords{font-family:var(--mono);font-size:var(--t-micro);color:#8B8F86;letter-spacing:.14em;margin-top:5px}

.fbase{margin-top:44px;padding-top:20px;border-top:1px solid #2B2B27}
.cred{font-size:var(--t-small);color:#8B8F86;line-height:1.7;max-width:105ch}
.cred a{color:#B9BEB2}
.cred + .cred{margin-top:7px}

.totop{
  position:fixed;right:20px;bottom:20px;z-index:50;
  width:42px;height:42px;border-radius:50%;background:var(--red);color:var(--white);
  display:grid;place-items:center;text-decoration:none;font-size:17px;
  box-shadow:0 5px 13px rgba(16,16,16,.32);
}

/* ==========================================================================
   CUSTOM CURSOR
   Built from DOM nodes, not an SVG data URI. Five declared data-URI cursors
   once drew nothing at all on an earlier build because the '#' in the SVG
   was re-encoded to %2523 and the browser silently accepted the broken image.
   A DOM cursor cannot fail that way, and it is what the reference does too.

   cursor:none is applied by JS via .js-cur, so a page with JS off or blocked
   keeps its ordinary pointer instead of losing the cursor entirely.
   ========================================================================== */
.cursor{display:none}
@media (hover:hover) and (pointer:fine){
  .js-cur,.js-cur a,.js-cur button,.js-cur .drag{cursor:none}
  .cursor{
    display:block;position:fixed;left:0;top:0;z-index:200;pointer-events:none;
    transform:translate3d(-100px,-100px,0);will-change:transform;
  }
  .cdot{
    display:block;width:15px;height:15px;border-radius:50%;
    border:1.6px solid var(--ink);margin:-7.5px 0 0 -7.5px;
    transition:width .16s,height .16s,margin .16s,background .16s,border-color .16s;
  }
  .clabel{
    position:absolute;left:15px;top:9px;white-space:nowrap;
    font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.2em;
    color:var(--ink);opacity:0;transition:opacity .16s;
  }
  .cursor.on-drag .cdot{width:38px;height:38px;margin:-19px 0 0 -19px;background:rgba(232,40,30,.14);border-color:var(--red)}
  .cursor.on-drag .clabel{opacity:1;color:var(--red);left:24px}
  .cursor.on-link .cdot{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:var(--red);border-color:var(--red)}
  .cursor.on-link .clabel{opacity:1;color:var(--red)}
  .cursor.holding .cdot{width:26px;height:26px;margin:-13px 0 0 -13px;background:var(--red);border-color:var(--red)}
}
/* Touch gets no custom cursor and no drag, which is the correct answer for a
   device with no pointer at all. */
@media (hover:none){
  .cursor{display:none!important}
  .scrollhint{display:none}
}

/* ==========================================================================
   NARROW SCREENS
   A hand-placed collage cannot reflow, so it is recomposed. The reference
   hides 59 elements at its narrow breakpoint rather than reflowing; this
   hides the pieces that cannot survive the width and moves the rest.
   ========================================================================== */
@media (max-width:860px){
  .m-hide{display:none!important}
  .m-move{
    left:var(--m-left)!important;top:var(--m-top)!important;
    width:var(--m-w)!important;--rot:var(--m-rot)!important;
  }
  .herotext{left:4%;top:5%;max-width:92%}
  .anno-machine{left:auto;right:4%;top:28%}
  .anno-price{right:4%;top:auto;bottom:5%}
  .anno-care{left:4%;bottom:3%}
  .arw{width:78px;height:auto}
  .s-hero{min-height:112vh}
  .s-work{min-height:118vh}
  .s-flash{min-height:104vh}
  .s-art{min-height:128vh}
  .s-book{min-height:176vh}
  .band-acid{top:66%}
  .sheet{top:15%;padding:30px 16px 20px;width:92vw}
  .flashlist{gap:14px}
  .cards{left:4%;right:4%;bottom:4%}
  .acard{width:calc(50% - 8px)}
  .pricecard{left:4%;top:18%;width:70vw}
  .slip{right:4%;top:46%;width:74vw}
  .hourscard{right:4%;bottom:2%;width:70vw}
  .sticker{left:auto;right:6%;bottom:30%}
  .n1{top:84%}
  .n2{left:52%;top:92%}
  .fgrid{grid-template-columns:1fr 1fr;gap:26px}
  .fbig{grid-column:1 / -1}
}
@media (max-width:520px){
  .fgrid{grid-template-columns:1fr}
  .acard{width:100%}
  .p-print{padding:7px 7px 26px}
}

@media (prefers-reduced-motion:reduce){
  .cur2{animation:none}
  .p,.cursor,.cdot,.clabel{transition:none!important}
}

@media print{
  .pv,.nav,.cursor,.totop,.scrollhint{display:none}
  body{background:var(--white)}
}