/* Nautica Gatti · scheda di bordo. A two-sided printed instruction card on a navy table.
   Palette: card stock (pale blue-grey), ink, signal yellow = the thing to look at, prohibition red = what is not allowed, green = included / allowed. */
:root {
  --navy: #0C1726; --navy2: #15263D; --hole: #0F1C2E;
  --stock: #D9E1E7; --stock2: #B9C5CF; --paper: #EEF2F5;
  --ink: #142030; --ink2: #43536A; --line: rgba(20, 32, 48, .2);
  --mid: #9DAEBC; --sea: #7D9AB0;
  --yel: #F2C230; --red: #C42A1E; --grn: #1E7A4B;
  --disp: 'Barlow Condensed', 'Arial Narrow', sans-serif; --text: 'Barlow', 'Segoe UI', sans-serif;
  --e: cubic-bezier(.16, 1, .3, 1); --e2: cubic-bezier(.25, 1, .5, 1); --ein: cubic-bezier(.7, 0, .84, 0);
  --pad: 36px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: radial-gradient(1100px 700px at 28% 8%, #1B2F4B 0%, rgba(27, 47, 75, 0) 62%) no-repeat, radial-gradient(1000px 800px at 90% 70%, #13253D 0%, rgba(19, 37, 61, 0) 62%) no-repeat, var(--navy); color: var(--stock); font: 400 16px/1.55 var(--text); }
::selection { background: var(--yel); color: var(--ink); }
a { color: inherit; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--yel); outline-offset: 3px; }
.card :focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--yel), 0 0 0 6px var(--ink); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }

/* ---------- the table ---------- */
.table { min-height: 100vh; padding: 18px clamp(16px, 4vw, 56px) 80px; }
.tabletop { max-width: 1304px; margin: 0 auto 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 600 14px/1.3 var(--disp); letter-spacing: .12em; text-transform: uppercase; color: var(--mid); }
.tt-call { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.tt-call a { color: var(--stock); text-decoration: none; border-bottom: 1px solid rgba(217, 225, 231, .35); }
.tt-call a:hover { border-color: var(--yel); color: #fff; }
.tt-call a[href^="mailto"] { text-transform: none; letter-spacing: .04em; }
.lang { display: flex; border: 1.5px solid rgba(217, 225, 231, .4); border-radius: 3px; overflow: hidden; flex: none; }
.lang button { background: none; border: 0; padding: 6px 11px 5px; font: 700 14px/1 var(--disp); letter-spacing: .14em; color: var(--mid); cursor: pointer; transition: background .3s var(--e), color .3s var(--e); }
.lang button[aria-pressed="true"] { background: var(--stock); color: var(--ink); }
.lang button:hover { color: var(--stock); } .lang button[aria-pressed="true"]:hover { color: var(--ink); }

/* ---------- the card ---------- */
.stage { max-width: 1304px; margin: 0 auto; padding-right: 64px; perspective: 2600px; }
.card { position: relative; background: var(--stock); color: var(--ink); border-radius: 14px; transform-origin: 50% 40%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .13 0 0 0 0 .19 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 2px 0 #A9B6C1, 0 44px 80px -34px rgba(0, 0, 0, .75), 0 14px 26px -14px rgba(0, 0, 0, .55); }
.js .card { animation: cardIn 1s var(--e) backwards; }
@keyframes cardIn { from { opacity: 0; transform: translateY(46px) rotate(-1.2deg); } }
.card.out { transform: rotateY(-90deg); transition: transform .34s var(--ein); }
.card.pre { transform: rotateY(90deg); transition: none; }
.card.back { transition: transform .7s var(--e); }

/* side tabs on the right edge */
.tabs { position: absolute; left: 100%; top: 132px; display: flex; flex-direction: column; gap: 8px; z-index: 1; }
.tab { writing-mode: vertical-rl; display: flex; align-items: center; gap: 12px; padding: 18px 12px 20px 10px; border: 0; border-radius: 0 10px 10px 0; background: var(--stock2); color: var(--ink2); cursor: pointer;
  font: 700 15px/1 var(--disp); letter-spacing: .16em; text-transform: uppercase; transform: translateX(-10px); transition: transform .5s var(--e), background .3s var(--e), color .3s var(--e); box-shadow: inset 6px 0 8px -6px rgba(20, 32, 48, .35); }
.tab b { writing-mode: horizontal-tb; font: 800 24px/1 var(--disp); letter-spacing: 0; }
.tab:hover { transform: translateX(-4px); color: var(--ink); }
.tab[aria-selected="true"] { background: var(--stock); color: var(--ink); transform: translateX(-2px); box-shadow: 8px 10px 18px -10px rgba(0, 0, 0, .6); padding-right: 16px; }
.tab[aria-selected="true"] b { color: var(--ink); }
.card[data-side="a"] .tab[data-side="a"] b, .card[data-side="b"] .tab[data-side="b"] b { background: var(--ink); color: var(--stock); padding: 4px 6px 3px; border-radius: 2px; }

/* top band */
.band { display: flex; align-items: center; gap: 22px; padding: 10px var(--pad) 10px; background: var(--ink); color: var(--stock); border-radius: 14px 14px 0 0; font: 700 13.5px/1 var(--disp); letter-spacing: .18em; text-transform: uppercase; }
.band-m { color: var(--mid); }
.flip { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; background: var(--yel); color: var(--ink); border: 0; border-radius: 3px; padding: 8px 12px 7px; font: 800 13.5px/1 var(--disp); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.flip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--e); }
.flip:hover svg { transform: translateX(4px); }
.card .flip:focus-visible { box-shadow: 0 0 0 3px var(--stock), 0 0 0 6px var(--yel); }

/* header of each side */
.head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 56px; padding: 30px var(--pad) 32px; border-bottom: 3px solid var(--ink); align-items: end; }
.logo { display: block; height: 40px; width: auto; margin-bottom: 26px; }
.title { margin: 0; display: flex; align-items: flex-start; gap: 18px; font: 800 clamp(70px, 10.4vw, 156px)/.8 var(--disp); letter-spacing: -.012em; text-transform: uppercase; }
.t-side { flex: none; display: grid; place-items: center; width: 46px; height: 46px; margin-top: .07em; background: var(--ink); color: var(--stock); border-radius: 3px; font-size: 30px; letter-spacing: 0; }
.lede { max-width: 52ch; margin: 22px 0 0; font-size: 17.5px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.lede b { font-weight: 700; }

.fx { width: 100%; border-collapse: collapse; }
.fx caption { text-align: left; font: 700 13.5px/1.3 var(--disp); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); padding-bottom: 10px; }
.fx tr { border-top: 2.5px solid var(--ink); }
.fx tr:last-child { border-bottom: 2.5px solid var(--ink); }
.fx th { text-align: left; font-weight: 400; padding: 0; }
.fx td { padding: 12px 6px; font-size: 15px; color: var(--ink2); vertical-align: middle; }
.fx td.fx-p { text-align: right; white-space: nowrap; color: var(--ink); }
.fx-p b { font: 800 30px/1 var(--disp); letter-spacing: -.01em; margin-right: 4px; }
.fx-b { position: relative; display: block; width: 100%; text-align: left; background: none; border: 0; padding: 14px 6px 13px 34px; cursor: pointer; font: 700 22px/1 var(--disp); letter-spacing: .02em; text-transform: uppercase; }
.fx-b::before { content: ''; position: absolute; left: 2px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border: 2.5px solid var(--ink); border-radius: 2px; background: var(--paper); transition: background .3s var(--e); }
.fx tr.on .fx-b::before { background: var(--yel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23142030' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.fx tr.on { background: rgba(242, 194, 48, .22); }
.fx-b:hover::before { background-color: #F7DD8A; }
.fx-inc th { padding: 12px 6px 12px 34px; font: 700 17px/1.1 var(--disp); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.fx-inc td { color: var(--ink); font-weight: 600; }
.fx-inc .mk { margin-right: 8px; vertical-align: -6px; }
.hrs th { padding: 13px 6px; font: 700 19px/1 var(--disp); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.hrs td { font: 700 22px/1 var(--disp); color: var(--ink); letter-spacing: .02em; white-space: nowrap; }
.hrs .fx-inc th { padding-left: 6px; }
.hrs .fx-inc td { font: 600 15px/1.3 var(--text); }
.fx-note { margin: 12px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink2); }

/* markers: yellow = to be confirmed, green tick = included / allowed, red cross = not allowed */
.tbc { display: inline-block; background: var(--yel); color: var(--ink); font: 700 12px/1 var(--disp); letter-spacing: .09em; text-transform: uppercase; padding: 4px 6px 3px; border-radius: 2px; vertical-align: 2px; white-space: nowrap; }
.mk { display: inline-block; position: relative; width: 24px; height: 24px; border-radius: 50%; flex: none; }
.mk.ok { background: var(--grn); }
.mk.ok::after { content: ''; position: absolute; left: 7px; top: 5px; width: 6px; height: 11px; border: solid var(--paper); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.mk.bad { background: var(--red); }
.mk.bad::before, .mk.bad::after { content: ''; position: absolute; left: 5px; top: 10.5px; width: 14px; height: 3px; background: var(--paper); transform: rotate(45deg); }
.mk.bad::after { transform: rotate(-45deg); }

/* ---------- the panel grid ---------- */
.deck { position: relative; padding: 36px var(--pad) 34px; transition: min-height .5s var(--e); }
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 40px; transition: opacity .45s var(--e), filter .45s var(--e); }
.deck.zoomed .grid { opacity: .2; filter: grayscale(1); pointer-events: none; }
.pn { position: relative; min-width: 0; display: flex; }
.pn.wide { grid-column: span 2; }
.js .pn { animation: pnIn .8s var(--e) backwards; animation-delay: calc(var(--i, 0) * 70ms + 350ms); }
@keyframes pnIn { from { opacity: 0; transform: translateY(18px); } }
.pn::after { content: ''; position: absolute; width: 24px; height: 24px; display: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 8.5h12V2.5l10 9.5-10 9.5v-6H1z' fill='%23142030'/%3E%3C/svg%3E") center / contain no-repeat; }
.pn.r::after { display: block; right: -32px; top: calc(50% - 30px); }
.pn.d::after { display: block; left: calc(50% - 12px); bottom: -31px; transform: rotate(90deg); }
.pn-b { position: relative; flex: 1; display: flex; flex-direction: column; width: 100%; padding: 0; text-align: left; background: var(--paper); border: 3px solid var(--ink); border-radius: 6px; cursor: pointer; overflow: hidden; transition: transform .55s var(--e), box-shadow .55s var(--e); }
.pn-b::after { content: '+'; position: absolute; right: 0; bottom: 0; width: 30px; height: 30px; padding: 7px 0 0 11px; font: 800 19px/1 var(--disp); color: var(--ink); background: linear-gradient(135deg, transparent 50%, var(--yel) 50%); transition: width .45s var(--e), height .45s var(--e), padding .45s var(--e); }
.pn-b:hover { transform: translateY(-4px); box-shadow: 0 8px 0 -2px var(--stock2); }
.pn-b:hover::after { width: 44px; height: 44px; padding: 19px 0 0 23px; }
.num { position: absolute; left: 0; top: 0; z-index: 1; width: 42px; height: 42px; display: grid; place-items: center; background: var(--ink); color: var(--paper); border-radius: 0 0 6px 0; font: 800 27px/1 var(--disp); }
.pn-b .mk { position: absolute; right: 10px; top: 10px; z-index: 1; width: 28px; height: 28px; }
.pn-b .mk.ok::after { left: 9px; top: 6px; width: 7px; height: 13px; }
.pic { display: block; width: 100%; height: auto; aspect-ratio: 200 / 140; padding: 16px 14px 4px; overflow: hidden; --sw: 3.4px; }
.wide .pic { aspect-ratio: auto; }
.cap { display: block; margin: auto 14px 0; padding-top: 10px; border-top: 2px solid var(--line); font: 700 23px/1.02 var(--disp); letter-spacing: .02em; text-transform: uppercase; }
.sub { display: block; padding: 4px 14px 16px; font: 500 14px/1.3 var(--text); color: var(--ink2); }

/* pictogram style: thick outline, flat fills */
.pic * { fill: none; stroke: var(--ink); stroke-width: var(--sw); stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pic .w { fill: var(--paper); } .pic .g { fill: var(--mid); } .pic .s { fill: var(--sea); } .pic .y { fill: var(--yel); } .pic .k { fill: var(--ink); } .pic .b { fill: var(--stock); }
.pic .n { stroke: none; }
.pic .th { stroke-width: calc(var(--sw) * .7); }
.pic .arm { stroke-width: calc(var(--sw) * 2); }
.pic .dash { stroke-dasharray: 7 7; stroke-width: calc(var(--sw) * .8); }
.pic .rz { fill: var(--red); fill-opacity: .17; }
.pic .ghost { opacity: .4; }
.pic .okc { fill: var(--grn); stroke: none; } .pic .noc { fill: var(--red); stroke: none; }
.pic .okt, .pic .not { stroke: var(--paper); stroke-width: calc(var(--sw) * .9); }
.pic .ring { stroke-width: calc(var(--sw) * 1.6); }
.pic .hose-o { stroke-width: calc(var(--sw) * 3.4); }
.pic .hose { stroke: var(--yel); stroke-width: calc(var(--sw) * 1.9); }
.pic .heat { stroke-width: calc(var(--sw) * .8); }

/* ---------- the enlarged panel ---------- */
.zoom { position: absolute; left: var(--pad); right: var(--pad); top: var(--zt, 36px); z-index: 5; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); background: var(--paper); border: 3px solid var(--ink); border-radius: 6px; box-shadow: 0 34px 60px -30px rgba(12, 23, 38, .7); transform-origin: 0 0; }
.zoom.anim { transition: transform .6s var(--e), opacity .35s var(--e2); }
.zoom .z-txt > * { transition: opacity .45s var(--e) .18s, transform .6s var(--e) .18s; }
.zoom.pre .z-txt > * { opacity: 0; transform: translateY(10px); transition: none; }
.z-pic { position: relative; display: flex; align-items: center; padding: 56px 28px 28px; border-right: 3px solid var(--ink); }
.z-pic .num { width: 64px; height: 64px; font-size: 42px; border-radius: 0 0 8px 0; }
.z-svg { width: 100%; }
.z-svg .pic { --sw: 5.2px; padding: 0; }
.z-txt { display: flex; flex-direction: column; padding: 32px 34px 26px; min-width: 0; }
.z-cap { margin: 0 0 20px; font: 800 clamp(42px, 4.6vw, 70px)/.88 var(--disp); text-transform: uppercase; letter-spacing: -.005em; }
.z-c { display: block; }
.z-sub { display: block; margin-top: 10px; font: 600 15px/1.3 var(--text); letter-spacing: 0; text-transform: none; color: var(--ink2); }
.z-body dl { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 0 20px; margin: 0; }
.z-body dt { padding: 14px 0 12px; border-top: 2px solid var(--ink); font: 700 13.5px/1.2 var(--disp); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.z-body dd { margin: 0; padding: 11px 0 12px; border-top: 2px solid var(--ink); font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.z-body dd .mk { vertical-align: -6px; margin-right: 6px; }
.z-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 24px; }
.z-prev, .z-next { width: 46px; height: 46px; display: grid; place-items: center; background: none; border: 2.5px solid var(--ink); border-radius: 3px; cursor: pointer; transition: background .3s var(--e); }
.z-prev svg, .z-next svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.z-prev svg { transform: rotate(180deg); }
.z-prev:hover, .z-next:hover { background: var(--yel); }
.z-prev:disabled, .z-next:disabled { opacity: .3; cursor: default; background: none; }
.z-pos { min-width: 52px; text-align: center; font: 700 17px/1 var(--disp); letter-spacing: .1em; }
.z-ask { margin-left: auto; background: var(--ink); color: var(--paper); border: 0; border-radius: 3px; padding: 14px 18px 13px; font: 800 16px/1 var(--disp); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .3s var(--e); }
.z-ask:hover { background: #26395A; }
.z-x { background: none; border: 0; padding: 10px 4px; font: 600 15px/1 var(--text); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* ---------- the rule strip ---------- */
.rule { display: flex; align-items: center; gap: 18px; margin: 0 var(--pad) 34px; padding: 14px 20px; background: var(--paper); border: 3px solid var(--red); border-left-width: 16px; border-radius: 4px; font: 600 16.5px/1.45 var(--text); }
.rule b { flex: none; font: 800 16px/1 var(--disp); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }

/* ---------- the coupon ---------- */
.coupon { position: relative; margin: 0; }
.perf { position: relative; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 var(--pad); font: 700 12.5px/1 var(--disp); letter-spacing: .16em; text-transform: uppercase; color: var(--ink2);
  background: linear-gradient(90deg, var(--ink) 0 9px, transparent 9px 17px) repeat-x 0 50% / 17px 2px; }
.perf span, .perf .sc { background: var(--stock); padding: 0 8px; }
.perf .sc { width: 36px; height: 24px; padding: 0 6px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
.perf::before, .perf::after { content: ''; position: absolute; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--hole); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5); }
.perf::before { left: -13px; } .perf::after { right: -13px; }
.cp-in { padding: 24px var(--pad) 28px; background: var(--paper); border-radius: 0 0 14px 14px; transition: transform .8s var(--e), opacity .5s var(--e2); }
.coupon.tearing .cp-in { transform: translate(18px, 70px) rotate(-3deg); opacity: 0; }
.cp-head { display: flex; align-items: flex-start; gap: 16px; }
.cp-head .num { position: static; flex: none; width: 50px; height: 50px; font-size: 32px; border-radius: 4px; }
.cp-head h2 { margin: 0; font: 800 46px/.88 var(--disp); text-transform: uppercase; letter-spacing: -.005em; }
.cp-head p { margin: 8px 0 0; max-width: 64ch; font-size: 15.5px; color: var(--ink2); }
.cp-f { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px 26px; margin-top: 24px; }
.f { min-width: 0; margin: 0; padding: 0; border: 0; grid-column: span 3; }
#coupon-a .f-pax { grid-column: span 2; } #coupon-a .f-note { grid-column: span 7; }
#coupon-b .f-svc { grid-column: span 6; grid-row: span 2; } #coupon-b .f-boat { grid-column: span 6; }
#coupon-b .f-day { grid-column: span 3; } #coupon-b .f-note { grid-column: span 12; }
.f > span, .f legend { display: block; padding: 0; margin-bottom: 6px; font: 700 13px/1.2 var(--disp); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.f input:not([type="radio"]):not([type="checkbox"]) { width: 100%; min-width: 0; border: 0; border-bottom: 2.5px solid var(--ink); border-radius: 0; background: transparent; padding: 6px 2px 7px; font: 500 17px/1.3 var(--text); color: var(--ink); outline: 0; transition: background .3s var(--e); }
.f input:focus { background: rgba(242, 194, 48, .3); }
.f input::placeholder { color: #5D6C7E; opacity: 1; }
.f input[type="date"] { font-family: var(--text); }
.bx { position: relative; display: inline-flex; align-items: center; gap: 9px; margin: 4px 18px 6px 0; font: 600 16px/1.25 var(--text); cursor: pointer; }
.bx input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bx span::before { content: ''; display: inline-block; flex: none; width: 20px; height: 20px; margin-right: 9px; vertical-align: -5px; border: 2.5px solid var(--ink); border-radius: 2px; background: var(--paper); transition: background .25s var(--e); }
.bx input:checked + span::before { background: var(--yel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23142030' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.bx input:focus-visible + span::before { box-shadow: 0 0 0 3px var(--yel), 0 0 0 6px var(--ink); }
.f-svc .bx { display: flex; margin-right: 0; }
.cp-act { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin: 26px 0 16px; }
.send { display: inline-flex; align-items: center; gap: 12px; background: var(--ink); color: var(--paper); border: 0; border-radius: 3px; padding: 16px 22px 15px; font: 800 19px/1 var(--disp); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .3s var(--e); }
.send svg { width: 20px; height: 20px; fill: none; stroke: var(--yel); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--e); }
.send:hover { background: #26395A; } .send:hover svg { transform: translateX(5px); }
.call { font-weight: 600; font-size: 16px; }
.cp-fine { margin: 8px 0 0; font-size: 13.5px; color: var(--ink2); }

.sent { padding: 26px var(--pad) 30px; background: var(--stock); border-radius: 0 0 14px 14px; }
.js .coupon.torn .sent { animation: pnIn .7s var(--e) backwards; }
.s-h { display: flex; align-items: center; gap: 12px; margin: 0; font: 800 40px/.9 var(--disp); text-transform: uppercase; }
.s-h .mk { width: 34px; height: 34px; } .s-h .mk::after { left: 11px; top: 6px; width: 9px; height: 17px; border-width: 0 4px 4px 0; }
.s-p { max-width: 70ch; margin: 12px 0 16px; font-size: 16px; }
.s-txt { max-width: 72ch; margin: 0 0 18px; padding: 16px 18px; background: var(--paper); border: 2px dashed var(--ink); border-radius: 4px; font: 500 15px/1.55 var(--text); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.s-b { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin: 0; }
.s-mail { display: inline-block; background: var(--ink); color: var(--paper); text-decoration: none; border-radius: 3px; padding: 14px 18px 13px; font: 800 16px/1 var(--disp); letter-spacing: .1em; text-transform: uppercase; }
.s-new { background: none; border: 0; padding: 6px 0; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

.imprint { margin: 0; padding: 14px var(--pad) 16px; border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; background: var(--paper); font-size: 13px; color: var(--ink2); }
.imprint a { color: var(--ink); }
.coupon + .imprint, .face + .imprint { }

/* ---------- the photo on each side: one small framed picture of the real craft, as printed cards carry ---------- */
.lede-row { display: flex; align-items: flex-end; gap: 26px; margin-top: 22px; }
.lede-row .lede { flex: 1 1 0; min-width: 0; margin: 0; }
.craft { flex: none; width: 198px; margin: 0; }
.craft-box { position: relative; width: 198px; height: 146px; overflow: hidden; background: var(--sea); border: 3px solid var(--ink); border-radius: 6px; }
.craft-a img { position: absolute; left: 0; top: -196px; width: 270px; max-width: none; height: 480px; }
.craft-b img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.pd { position: absolute; bottom: 0; z-index: 1; padding: 4px 7px 3px; background: var(--ink); color: var(--paper); font: 700 12px/1 var(--disp); letter-spacing: .14em; text-transform: uppercase; }
.pd-1 { left: 0; border-radius: 0 4px 0 0; } .pd-2 { left: 50%; border-radius: 0 4px 0 0; }
.craft figcaption { display: flex; gap: 8px; align-items: baseline; padding-top: 7px; font: 500 13px/1.3 var(--text); color: var(--ink2); }
.craft-k { flex: none; font: 700 12px/1 var(--disp); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.imprint .credit { display: inline-block; margin-top: 4px; }
@media (max-width: 560px) { .lede-row { flex-wrap: wrap; gap: 18px; } .lede-row .lede { flex-basis: 100%; } }

/* ---------- static review mode, reduced motion ---------- */
html.static *, html.static *::before, html.static *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; } }

/* ---------- narrower screens ---------- */
@media (max-width: 1180px) {
  .grid { gap: 30px 34px; }
  .cap { font-size: 21px; }
  .head { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .head-r { max-width: 620px; }
}
@media (max-width: 900px) {
  :root { --pad: 22px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zoom { grid-template-columns: 1fr; }
  .z-pic { border-right: 0; border-bottom: 3px solid var(--ink); padding: 52px 18% 18px; }
  .cp-f { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .f, #coupon-a .f-pax, #coupon-b .f-day { grid-column: span 3; }
  #coupon-a .f-note, #coupon-b .f-svc, #coupon-b .f-boat, #coupon-b .f-note { grid-column: span 6; grid-row: auto; }
}
@media (max-width: 760px) {
  :root { --pad: 16px; }
  .table { padding: 12px 10px 56px; }
  .tabletop { flex-direction: column-reverse; align-items: flex-start; gap: 10px; font-size: 13px; }
  .tabletop .lang { align-self: flex-end; }
  .stage { padding: 52px 0 0; }
  .tabs { left: 18px; top: -46px; flex-direction: row; gap: 6px; }
  .tab { writing-mode: horizontal-tb; padding: 10px 14px 12px; border-radius: 10px 10px 0 0; transform: translateY(8px); box-shadow: inset 0 -6px 8px -6px rgba(20, 32, 48, .35); }
  .tab:hover { transform: translateY(4px); }
  .tab[aria-selected="true"] { transform: translateY(2px); padding-right: 14px; box-shadow: none; }
  .tab b { font-size: 20px; }
  .card { border-radius: 12px; }
  .band { flex-wrap: wrap; gap: 10px; padding: 10px var(--pad); border-radius: 12px 12px 0 0; font-size: 12.5px; }
  .band-m { display: none; }
  .flip { font-size: 12.5px; padding: 8px 10px 7px; }
  .head { padding: 22px var(--pad) 24px; }
  .logo { height: 26px; margin-bottom: 18px; }
  .title { font-size: clamp(60px, 19vw, 96px); gap: 12px; }
  .t-side { width: 36px; height: 36px; font-size: 24px; }
  .lede { font-size: 16.5px; }
  .fx-b { font-size: 19px; padding-left: 30px; }
  .fx-p b { font-size: 24px; }
  .fx td { padding: 10px 4px; font-size: 14px; }
  .fx td.fx-p { white-space: normal; }
  .hrs td { font-size: 17px; } .hrs th { font-size: 16px; }
  .deck { padding: 26px var(--pad) 24px; }
  .grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .pn.wide { grid-column: auto; }
  .pn-b { display: grid; grid-template-columns: 48% minmax(0, 1fr); grid-template-rows: 1fr auto; }
  .pic, .wide .pic { grid-row: span 2; align-self: center; padding: 34px 6px 10px 8px; aspect-ratio: auto; }
  .wide .pic { padding-top: 40px; }
  .cap { margin: 0 12px 0 6px; padding-top: 14px; border-top: 0; align-self: end; font-size: 21px; }
  .sub { padding: 4px 12px 16px 6px; align-self: start; }
  .pn-b .mk { top: auto; bottom: 10px; right: auto; left: 10px; }
  .zoom { left: 8px; right: 8px; }
  .z-pic { padding: 52px 10px 14px; }
  .z-txt { padding: 20px 16px 18px; }
  .z-cap { font-size: 44px; }
  .z-body dl { grid-template-columns: minmax(0, 1fr); }
  .z-body dt { padding: 12px 0 2px; }
  .z-body dd { border-top: 0; padding-top: 2px; font-size: 16px; }
  .z-ask { margin-left: 0; order: 5; width: 100%; }
  .rule { flex-direction: column; align-items: flex-start; gap: 6px; border-left-width: 10px; font-size: 15.5px; }
  .cp-head h2 { font-size: 36px; }
  .cp-head .num { width: 42px; height: 42px; font-size: 27px; }
  .cp-f { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .f, #coupon-a .f-pax, #coupon-a .f-note, #coupon-b .f-svc, #coupon-b .f-boat, #coupon-b .f-day, #coupon-b .f-note { grid-column: auto; }
  .send { width: 100%; justify-content: center; }
  .s-h { font-size: 32px; }
}

/* ---------- legal pages (privacy, terms, cookie, impressum) ---------- */
.docbody { padding: 18px 10px 0; background: var(--navy); }
.dochead { max-width: 900px; margin: 0 auto; padding: 10px 0 16px; }
.dochead img { height: 30px; width: auto; display: block; }
.doc { max-width: 900px; margin: 0 auto 48px; padding: 44px clamp(18px, 5vw, 56px) 52px; background: var(--stock); color: var(--ink); border-radius: 14px; box-shadow: 0 44px 80px -34px rgba(0, 0, 0, .75); font-size: 16px; line-height: 1.6; overflow-wrap: break-word; }
.doc h1 { margin: 18px 0 14px; font: 800 clamp(40px, 7vw, 64px)/.92 var(--disp); text-transform: uppercase; }
.doc h2 { margin: 34px 0 10px; padding-top: 12px; border-top: 2.5px solid var(--ink); font: 700 25px/1.1 var(--disp); letter-spacing: .02em; text-transform: uppercase; }
.doc h3 { margin: 22px 0 8px; font: 700 19px/1.2 var(--disp); text-transform: uppercase; letter-spacing: .04em; }
.doc a { color: var(--ink); }
.doc table { width: 100%; border-collapse: collapse; margin: 12px 0 18px; font-size: 14.5px; background: var(--paper); }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 9px 10px; border: 1.5px solid var(--line); }
.doc th { font: 700 14px/1.2 var(--disp); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.doc code { font-size: .92em; background: var(--paper); padding: 1px 4px; border-radius: 2px; }
.doc .ck-page button { border-radius: 3px; border: 2.5px solid var(--ink); }

/* == legal == cookie banner + seller block (generated by sites/_legal/gen.py; the banner look comes from _legal/cookie-styles.css) */
.ck { position: fixed; left: 16px; bottom: 16px; z-index: 9999; max-width: 400px; font-family: inherit; font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; text-align: left; }
.ck, .ck * { box-sizing: border-box; } .ck .ck-k { display: block; } .ck .ck-t, .ck .ck-p { margin: 0; } .ck .b { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.ck button, .ck a.more { cursor: pointer; text-decoration: none; line-height: 1.2; margin: 0; }
/* banner: nautica-gatti */
.ck { --ck-bottom: 0px; left: 28px; bottom: 0; width: 480px; max-width: none; padding: 20px 22px 18px 152px; color: #142030; font-family: 'Barlow', sans-serif; border: 3px solid #142030; border-bottom: 0; border-radius: 6px 6px 0 0; box-shadow: 0 -16px 44px -18px rgba(0, 0, 0, .7);
  background: #EEF2F5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath d='M22 36h56q10 0 10 10v56q0 12-12 12H24q-12 0-12-12V46q0-10 10-10z' fill='%23EEF2F5' stroke='%23142030' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M26 26h48v10H26z' fill='%23B9C5CF' stroke='%23142030' stroke-width='5' stroke-linejoin='round'/%3E%3Crect x='16' y='6' width='68' height='20' rx='4' fill='%23142030'/%3E%3Cpath d='M30 12v8M42 12v8M54 12v8M66 12v8' stroke='%23EEF2F5' stroke-width='3' stroke-linecap='round'/%3E%3Crect x='22' y='58' width='56' height='32' rx='2' fill='%23F2C230' stroke='%23142030' stroke-width='4'/%3E%3Cpath d='M32 70h36M32 79h24' stroke='%23142030' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") 26px 54px / 100px auto no-repeat; }
.ck::before { content: '0'; position: absolute; left: 0; top: 0; width: 42px; height: 42px; display: grid; place-items: center; background: #142030; color: #EEF2F5; border-radius: 0 0 6px 0; font: 800 27px/1 'Barlow Condensed', sans-serif; }
.ck::after { content: ''; position: absolute; left: 140px; top: 18px; bottom: 18px; width: 2px; background: rgba(20, 32, 48, .2); }
.ck .ck-k { margin-bottom: 6px; font: 700 13px/1 'Barlow Condensed', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #43536A; }
.ck .ck-t b { display: block; margin-bottom: 8px; font: 800 27px/.95 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.ck .ck-p { font-size: 14px; line-height: 1.45; color: #142030; }
.ck .b { gap: 10px 12px; margin-top: 14px; }
.ck button { display: inline-flex; align-items: center; gap: 9px; border: 0; border-radius: 3px; padding: 7px 13px 7px 7px; color: #FFFFFF; font: 800 15px/1 'Barlow Condensed', sans-serif; letter-spacing: .1em; text-transform: uppercase; transition: filter .3s cubic-bezier(.16, 1, .3, 1); }
.ck button::before { content: ''; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #EEF2F5 center / 14px no-repeat; }
.ck .ok { background: #1E7A4B; }
.ck .ok::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3 3 7-7.5' fill='none' stroke='%231E7A4B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ck .no { background: #C42A1E; }
.ck .no::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 3l8 8M11 3l-8 8' fill='none' stroke='%23C42A1E' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ck button:hover { filter: brightness(1.12); }
.ck button:focus-visible, .ck .more:focus-visible { outline: 3px solid #F2C230; outline-offset: 2px; }
.ck .more { margin-left: 2px; font: 600 14px/1.2 'Barlow', sans-serif; color: #142030; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .ck { padding: 54px 16px 16px; background-position: right 16px top 10px; background-size: 44px auto; } .ck::after { display: none; } .ck .ck-t b { font-size: 24px; } }
/* seller block: the foot of the table under the card, light ink on the navy table, labels in the card's condensed caps */
footer.seller { padding: 30px clamp(16px, 4vw, 56px) 44px; border-top: 0; background: transparent; color: #D9E1E7; font-family: 'Barlow', sans-serif; font-size: 13px; }
footer.seller .seller-in { max-width: 1304px; padding-right: 64px; padding-top: 22px; border-top: 1px solid rgba(217, 225, 231, .22); }
footer.seller b { opacity: 1; color: #9DAEBC; font: 700 12.5px/1.2 'Barlow Condensed', sans-serif; letter-spacing: .16em; }
footer.seller strong { font: 700 19px/1.2 'Barlow Condensed', sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #EEF2F5; }
footer.seller a { color: #EEF2F5; text-underline-offset: 3px; }
body:has(> .ck) footer.seller { padding-bottom: 280px; }
@media (max-width: 760px) { footer.seller .seller-in { padding-right: 0; } body:has(> .ck) footer.seller { padding-bottom: 330px; } }

@media (max-width: 600px) { .ck { left: 10px; right: 10px; bottom: var(--ck-bottom, 10px); width: auto; max-width: none; transform: none; } }
.seller { font-size: 12.5px; line-height: 1.6; color: inherit; padding: 22px 24px 26px; border-top: 1px solid rgba(128,128,128,.35); letter-spacing: 0; text-transform: none; font-family: inherit; }
.seller-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }
.seller b { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: 4px; font-weight: 700; }
.seller a { color: inherit; } .seller address { font-style: normal; } .seller strong { font-weight: 700; }
.seller.panel { display: none; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9998; background: #fff; color: #111; border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); max-width: 940px; margin: 0 auto; border-top: 0; padding: 24px 26px 22px; }
.seller.panel:target { display: block; }
.seller .x { position: absolute; top: 6px; right: 12px; text-decoration: none; font-size: 22px; line-height: 1; padding: 6px 8px; }
.ck-page .st { padding: 10px 14px; border: 1px solid rgba(128,128,128,.4); border-radius: 8px; margin: 10px 0 14px; font-weight: 700; } .ck-page .b { display: flex; gap: 8px; flex-wrap: wrap; } .ck-page button { font: inherit; font-weight: 700; padding: 9px 16px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
@media (max-width: 760px) { table.lgl-t, table.lgl-t tbody, table.lgl-t tr, table.lgl-t td { display: block; width: auto; } table.lgl-t thead { display: none; } table.lgl-t tr { padding: 10px 0; border-bottom: 1px solid rgba(128,128,128,.35); } table.lgl-t td { border: 0 !important; padding: 2px 0 !important; overflow-wrap: anywhere; } table.lgl-t td::before { content: attr(data-l) ": "; font-weight: 700; } }
table.lgl-t code { overflow-wrap: anywhere; }
.lead-note.lead-note { font-size: 12px; line-height: 1.5; margin: 0; letter-spacing: 0; text-transform: none; font-weight: 400; font-style: normal; text-align: left; max-width: 62ch; } .lead-note.lead-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 700px) { .seller-in { grid-template-columns: 1fr; } .seller.panel { left: 8px; right: 8px; bottom: 8px; max-height: 80dvh; overflow: auto; } }