/* Magik: photography.
 *
 * Two ideas hold this together.
 *
 * 1. Every photograph sits in a frame that owns the aspect ratio, so the
 *    grid never shifts while images load and nothing ever letterboxes.
 * 2. Where a photograph does not exist yet, the same frame renders a
 *    tinted plate built from the brand gradient with the product icon at
 *    large size. It reads as a deliberate treatment rather than a
 *    missing asset, and swapping in a real photo is one attribute.
 *
 * Motion is restrained on purpose: a soft rise on entry, a slow 1.04
 * scale on hover, and a few pixels of parallax on the big bands. All of
 * it stops under prefers-reduced-motion.
 */

/* ---------- frames ---------- */
.ph{
  position:relative; overflow:hidden; display:block;
  background:color-mix(in srgb, var(--tint2) 60%, var(--bg));
}
.ph img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
}
/* a photo that truly could not be fetched hides, revealing the plate.
   Nothing else ever sets opacity on a photograph. */
.ph.is-failed img{opacity:0}
.ph-16x10{aspect-ratio:16/10}
.ph-21x9 {aspect-ratio:21/9}
.ph-4x3  {aspect-ratio:4/3}
.ph-4x5  {aspect-ratio:4/5}
.ph-1x1  {aspect-ratio:1/1}

/* A soft ink wash at the foot of a photo so overlaid text stays legible
   without dimming the whole picture. */
.ph-shade::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,
    color-mix(in srgb, var(--ink) 62%, transparent) 0%,
    color-mix(in srgb, var(--ink) 18%, transparent) 34%,
    transparent 62%);
}
.ph-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:22px 24px; color:#fff;
}
.ph-cap b{
  display:block; font-family:"Bricolage Grotesque",sans-serif;
  font-variation-settings:"wdth" 86; font-weight:700; letter-spacing:-.015em;
  font-size:clamp(19px,2.2vw,26px); line-height:1.1;
}
.ph-cap i{font-style:normal; font-size:14px; opacity:.86; display:block; margin-top:4px}

/* Slow scale on hover, for anything interactive that holds a photo. */
a:hover > .ph img,
.boat:hover .ph img,
.quad-tile:hover .ph img,
.amen-tile:hover .ph img{transform:scale(1.045)}

/* ---------- the tinted plate, used when no photograph exists ---------- */
.plate{
  position:relative; display:grid; place-items:center; overflow:hidden;
  background:
    radial-gradient(80% 120% at 18% 12%, color-mix(in srgb, var(--su) 42%, transparent), transparent 66%),
    radial-gradient(90% 130% at 86% 30%, color-mix(in srgb, var(--ac) 38%, transparent), transparent 68%),
    color-mix(in srgb, var(--tint) 74%, var(--surface));
}
/* the same moving-water tooth the buttons carry, so plates belong to the
   family rather than looking like empty boxes */
.plate::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--wtex); background-size:180% 180%;
  opacity:.30; mix-blend-mode:overlay;
  animation:btndrift 14s ease-in-out infinite alternate;
}
.plate .ic{
  width:38%; height:38%; max-width:78px; max-height:78px;
  color:color-mix(in srgb, var(--ink) 46%, transparent);
  position:relative; z-index:1; stroke-width:1.2;
}
.plate.sm .ic{max-width:34px; max-height:34px}

/* ---------- editorial band on the home page ---------- */
.band{display:grid; gap:16px; grid-template-columns:repeat(4,minmax(0,1fr))}
.band-wide{grid-column:span 2}
.band-tall{grid-row:span 2}
.band figure{margin:0; display:flex; position:relative; border-radius:var(--r-card);
  overflow:hidden; box-shadow:var(--elev); border:var(--cardbd)}
/* The row is as tall as the widest cell, so inside a band the frame
   fills the cell rather than keeping its own ratio and leaving a gap. */
.band figure > .ph{flex:1; min-width:0; aspect-ratio:auto; border-radius:inherit}

.band-hero{
  position:relative; border-radius:var(--r-card); overflow:hidden;
  box-shadow:var(--elev); border:var(--cardbd); margin-bottom:16px;
}
.band-hero .ph-cap{padding:clamp(22px,3vw,38px) clamp(24px,3.4vw,42px)}

/* A few pixels of drift as the band scrolls past. Transform only. */
.parallax{will-change:transform}

/* ---------- amenity product cards ---------- */
.amen{position:relative}
.amen .amen-art{
  width:56px; height:56px; border-radius:16px; overflow:hidden; flex:none;
  box-shadow:0 1px 2px -1px rgba(var(--sh),.2);
}
.amen .amen-art .plate .ic{max-width:26px; max-height:26px}
.amen.on .amen-art{box-shadow:0 0 0 2px var(--su)}

.amen-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px}
.amen-card{
  border-radius:var(--r-card); overflow:hidden; position:relative;
  background:var(--cardbg); border:var(--cardbd); box-shadow:var(--elev);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  display:grid; grid-template-rows:auto 1fr;
}
.amen-card .ph,.amen-card .plate{aspect-ratio:4/3}
.amen-card-body{padding:14px 16px 16px; display:grid; gap:3px; align-content:start}
.amen-card-body b{font-size:15px; font-weight:550}
.amen-card-body i{font-style:normal; font-size:12.5px; color:var(--muted); line-height:1.4}
.amen-card-price{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:8px;
}
.amen-card-price b{font-size:17px; font-weight:600}
.amen-card-price em{font-style:normal; font-size:11.5px; color:var(--muted)}

/* group headers carry a photograph when one exists */
.group-head{
  display:flex; align-items:center; gap:14px; margin:34px 0 12px;
}
.group-head:first-child{margin-top:0}
.group-head .ph,.group-head .plate{
  width:52px; height:52px; border-radius:14px; flex:none; overflow:hidden;
}
.group-head h2,.group-head h3{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  font-family:"Lexend",sans-serif; font-weight:600; color:var(--muted); margin:0;
}

/* ---------- the boat's photographs ----------
   FIVE FRAMES, ONE LARGE. The set that came before this was a single
   21:9 letterbox you walked with arrows, and a letterbox is the wrong
   shape for the job: it showed one photograph at a time, of a boat
   somebody is deciding whether to spend a day on, and the twelve behind
   it were a click each. The other way round — thirteen equal tiles — is a
   contact sheet, and nobody looks past the third row of one.

   So: one photograph large enough to be looked at, four beside it that
   say there is more, and the count on the button. The remaining frames
   are in the document and not on the page, because the lightbox walks
   every .gal-tile inside [data-gallery] — which makes "show all
   photographs" the first frame opened rather than a second gallery built
   somewhere else and kept in step with this one. */
.gal-mosaic{
  display:grid; gap:8px; margin:16px 0 34px;
  grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr;
  aspect-ratio:2/1; position:relative;
  border-radius:var(--r-card); overflow:hidden; box-shadow:var(--elev);
}
.gal-mosaic > .gal-tile:first-child,
.gal-mosaic.one > .ph{grid-row:span 2; border-radius:0}
.gal-mosaic .ph{width:100%; height:100%; border-radius:0}
.gal-mosaic .is-extra{display:none}
/* Fewer than five photographs is not a broken mosaic, it is a different
   one: the frames that exist share the row rather than leaving holes. */
.gal-mosaic.thin{grid-template-columns:repeat(auto-fit,minmax(0,1fr)); grid-template-rows:1fr}
.gal-mosaic.thin > .gal-tile:first-child{grid-row:auto}
.gal-mosaic.one{grid-template-columns:1fr; grid-template-rows:1fr}

.gal-tile{           /* .ph draws the frame; this only makes it a control */
  padding:0; border:0; background:none; cursor:zoom-in; width:100%;
  font:inherit; color:inherit; overflow:hidden;
}
.gal-tile:hover img{transform:scale(1.045)}
.gal-tile:focus-visible{outline:3px solid var(--ink); outline-offset:-3px; z-index:2}

/* The way into the rest of them, on the photograph rather than under it. */
.gal-all{
  position:absolute; right:14px; bottom:14px; z-index:3;
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:9px 16px; border-radius:var(--r-btn);
  border:1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  background:var(--surface); color:var(--ink);
  font-family:"Lexend",sans-serif; font-size:13.5px; font-weight:550;
  box-shadow:0 1px 3px -1px rgba(var(--sh),.3), 0 10px 22px -12px rgba(var(--sh),.8);
  transition:transform .18s ease, background .18s ease;
}
.gal-all:hover{transform:translateY(-2px); background:#fff}
.gal-all:focus-visible{outline:2.5px solid var(--ink); outline-offset:3px}
.gal-all .ic{width:15px; height:15px}

@media (max-width:760px){
  /* On a phone the four small frames are postage stamps. One picture,
     the button, and the rest in the lightbox. */
  .gal-mosaic{grid-template-columns:1fr; grid-template-rows:1fr; aspect-ratio:4/3}
  .gal-mosaic > .gal-tile{display:none}
  .gal-mosaic > .gal-tile:first-child{display:block; grid-row:auto}
}

/* ---------- one photograph, opened ----------
   Over everything, including the sticky header, with the page held still
   behind it. The frame is capped by the viewport rather than by a width, so
   a portrait photograph is as tall as the screen and a landscape one is as
   wide, and neither is ever cropped a second time. */
.lb{
  position:fixed; inset:0; z-index:200;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:clamp(6px,2vw,20px); padding:clamp(14px,4vw,44px);
  background:rgba(12,9,8,.9);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.lb[hidden]{display:none}
html.lb-open,html.lb-open body{overflow:hidden}
.lb-fig{margin:0; display:grid; justify-items:center; gap:12px; min-width:0}
.lb-fig img{
  max-width:100%; max-height:78vh; width:auto; height:auto;
  border-radius:var(--r-img); box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
  background:rgba(255,255,255,.06);
}
.lb-cap{
  margin:0; color:rgba(255,255,255,.86); font-size:14px; text-align:center;
  max-width:60ch;
}
.lb-cap[hidden]{display:none}
.lb-x,.lb-nav{
  display:grid; place-items:center; cursor:pointer; color:#fff;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.1);
  border-radius:999px; width:46px; height:46px; flex:none;
  transition:background .2s ease, transform .2s ease;
}
.lb-x:hover,.lb-nav:hover{background:rgba(255,255,255,.2)}
.lb-x:focus-visible,.lb-nav:focus-visible{outline:2.5px solid #fff; outline-offset:3px}
.lb-nav[hidden]{visibility:hidden; display:grid}
.lb-x{position:absolute; top:clamp(12px,2.4vw,26px); right:clamp(12px,2.4vw,26px); z-index:1}
.lb .ic{width:20px; height:20px}
.lb .ic.flip{transform:rotate(180deg)}

@media (max-width:560px){
  .gal-all{right:10px; bottom:10px; padding:8px 13px; font-size:12.5px}
  .lb-fig img{max-height:66vh}
  .lb-x,.lb-nav{width:40px; height:40px}
}

/* ---------- portraits ---------- */
.crew-card img,.live-foot img,.who-face,.owner-face{background:var(--tint2)}

/* ---------- entry motion ---------- */
.ph-rise{opacity:0; transform:translateY(22px) scale(.985)}
.ph-rise.in{
  opacity:1; transform:none;
  transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion:reduce){
  .ph img{transition:none}
  a:hover > .ph img,.boat:hover .ph img,
  .quad-tile:hover .ph img,.amen-tile:hover .ph img,
  .gal-tile:hover img{transform:none}
  .gal-all:hover{transform:none}
  .plate::before{animation:none}
  .ph-rise{opacity:1; transform:none}
  .parallax{transform:none !important}
}

@media (max-width:980px){
  .band{grid-template-columns:repeat(2,minmax(0,1fr))}
  .band-tall{grid-row:auto}
}
@media (max-width:560px){
  .band{grid-template-columns:1fr}
  .band-wide{grid-column:auto}
}

/* What every charter already includes, as one quiet strip above the shop. */
.incl-strip{display:grid; gap:14px; margin-bottom:34px}
.incl-strip > b{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.incl-strip .ticks{
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); display:grid; gap:12px 26px;
}
.incl-strip .ticks li{font-size:14px}

/* ---------- a paper, opened ----------
   A boat's DIMAR permit or a skipper's licence, over the page. The same
   material as the photograph lightbox because it is the same gesture —
   look at the thing, then get back to what you were doing — but it is a
   sheet rather than a bare frame: a document has a name, and it has a
   download for the one person in fifty who wants to keep a copy. */
.docview{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center; padding:clamp(12px,3vw,40px);
  background:rgba(12,9,8,.9);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.docview[hidden]{display:none}
.docview-sheet{
  width:min(940px,100%); height:min(88vh,100%);
  display:grid; grid-template-rows:auto minmax(0,1fr);
  border-radius:var(--r-card); overflow:hidden;
  background:var(--surface); box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
}
.docview-bar{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px 12px 20px;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.docview-name{
  flex:1; min-width:0; font-size:15.5px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.docview-get{flex:none; white-space:nowrap}
.docview-get .ic{width:15px; height:15px; margin-right:6px; color:inherit}
.docview-x{
  flex:none; width:38px; height:38px; display:grid; place-items:center;
  border:none; border-radius:50%; cursor:pointer; padding:0;
  background:color-mix(in srgb, var(--ink) 7%, transparent); color:var(--ink);
  transition:background .16s;
}
.docview-x:hover{background:color-mix(in srgb, var(--ink) 14%, transparent)}
.docview-x:focus-visible{outline:2.5px solid var(--ink); outline-offset:2px}
.docview-x .ic{width:18px; height:18px}
/* The browser draws the PDF itself. The tint behind it is what a page of
   paper sits on, so a document with margins does not float on nothing. */
.docview-body{background:var(--tint3); display:grid; min-height:0}
.docview-body iframe{width:100%; height:100%; border:0; display:block}
.docview-body img{
  width:100%; height:100%; object-fit:contain; display:block; padding:14px;
}

@media (max-width:560px){
  .docview{padding:0}
  .docview-sheet{width:100%; height:100%; border-radius:0}
  .docview-bar{padding:10px 10px 10px 16px}
  .docview-get{display:none}   /* the browser's own viewer offers it */
}


/* See WHAT A FINGER CAN ACTUALLY HIT at the foot of magik.css. The way
   into the full gallery is a 34px button lying over a photograph, which
   is the one press on the boat page a thumb is most likely to make. */
@media (hover:none) and (pointer:coarse){
  .gal-all{min-height:44px}
}