/* Dama Yachting — a desktop moored at Porto Badino.
   Lagoon dither wallpaper, off-white windows with one-pixel ink borders and hard shadows, one sunset orange for the window in front. */
:root {
  --ink: #111417;
  --ink2: #3A4246;
  --mute: #566064;
  --paper: #F6F7F2;
  --paper2: #E4E8E3;
  --paper3: #CDD4CF;
  --sky1: #B4E1DC;
  --sky2: #7FCBC9;
  --sea1: #3A9EA9;
  --sea2: #1F7486;
  --sea3: #0E4A59;
  --deep: #0A2B33;
  --sun: #FF6A2C;
  --sun-d: #B8400F;
  --disp: 'Pixelify Sans', 'Courier New', monospace;
  --text: 'Atkinson Hyperlegible', 'Segoe UI', sans-serif;
  --bar: 26px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --snap: cubic-bezier(0.87, 0, 0.13, 1);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--sea2); color: var(--ink); font: 16px/1.55 var(--text); -webkit-font-smoothing: antialiased; overflow: hidden; }
::selection { background: var(--sun); color: var(--ink); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 4px var(--paper); }

/* ---------- wallpaper ---------- */
#wall { position: fixed; inset: 0; width: 100vw; height: 100vh; image-rendering: pixelated; image-rendering: crisp-edges; z-index: 0; display: block; }
.wall-name { position: absolute; left: clamp(20px, 3vw, 48px); bottom: 44px; z-index: 1; pointer-events: none; user-select: none; line-height: .82; }
.wall-name span { display: block; font: 700 clamp(64px, 10.4vw, 170px)/.86 var(--disp); letter-spacing: -.02em; color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='2' height='2' fill='%23B4E1DC'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23B4E1DC'/%3E%3Crect x='2' width='2' height='2' fill='%237FCBC9' fill-opacity='.55'/%3E%3C/svg%3E") 0 0 / 4px 4px;
  -webkit-background-clip: text; background-clip: text; opacity: .62; }
.wall-name small { display: block; margin: 14px 0 0 6px; font: 700 14px/1 var(--text); letter-spacing: .3em; text-transform: uppercase; color: var(--sky1); opacity: .9; }

/* ---------- menu bar ---------- */
.mbar { position: fixed; top: 0; left: 0; right: 0; height: var(--bar); z-index: 5000; display: flex; justify-content: space-between; align-items: stretch; background: var(--paper); border-bottom: 1px solid var(--ink); font: 700 15px/1 var(--text); }
.mb-l, .mb-r { display: flex; align-items: stretch; }
.mb-brand { display: flex; align-items: center; padding: 0 14px 0 12px; text-decoration: none; }
.mb-brand img { height: 20px; width: auto; display: block; }
.mb-name { margin-left: 8px; font: 700 15px/1 var(--text); white-space: nowrap; }
.mb-m { position: relative; display: flex; }
.mb-b { display: flex; align-items: center; padding: 0 12px; border: 0; background: none; cursor: pointer; text-decoration: none; font: inherit; }
.mb-b:hover, .mb-b[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
.menu { position: absolute; top: calc(var(--bar) - 1px); left: 0; min-width: 230px; padding: 4px 0; background: var(--paper); border: 1px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); display: flex; flex-direction: column; }
.menu[hidden] { display: none; }
.menu > button, .menu > a, .menu-list > button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 18px 6px 26px; border: 0; background: none; text-align: left; font: 700 15px/1.2 var(--text); color: var(--ink); text-decoration: none; cursor: pointer; position: relative; }
.menu > button:hover, .menu > a:hover, .menu-list > button:hover, .menu button:focus-visible, .menu a:focus-visible { background: var(--ink); color: var(--paper); outline: 0; box-shadow: none; }
.menu-list > button.on::before { content: ''; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -4px; background: currentColor; }
.menu hr { border: 0; margin: 4px 0; height: 1px; overflow: visible; background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 3px); }
.mb-call { font-weight: 600; }
.lang { display: flex; align-items: center; gap: 0; padding: 0 10px; }
.lang button { border: 1px solid var(--ink); background: var(--paper); padding: 2px 7px 2px; font: 700 13px/1.1 var(--text); cursor: pointer; }
.lang button + button { border-left: 0; }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.clock { display: flex; align-items: center; padding: 0 14px 0 6px; font: 700 15px/1 var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- desktop ---------- */
.desk { position: fixed; top: var(--bar); left: 0; right: 0; bottom: 0; z-index: 1; overflow: hidden; }
.desk-legal { position: absolute; left: clamp(20px, 3vw, 48px); bottom: 12px; z-index: 2; margin: 0; padding: 3px 8px; font: 700 13px/1.45 var(--text); color: var(--paper); background: var(--deep); max-width: calc(100% - 180px); }
.desk-legal a { color: var(--paper); text-underline-offset: 2px; }

/* icons: one column on the right, the bottle at the bottom like a wastebasket that keeps things */
.icons { list-style: none; margin: 0; padding: 0; position: absolute; top: 14px; right: 14px; bottom: 118px; z-index: 3; display: grid; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, 88px); direction: rtl; gap: 0 6px; pointer-events: none; }
.icons li { direction: ltr; pointer-events: auto; }
.ico { width: 96px; height: 86px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px; padding: 4px 2px; border: 0; background: none; cursor: pointer; position: relative; touch-action: none; }
.ico .pix { width: 48px; height: 48px; display: block; }
.ico .pix svg { width: 100%; height: 100%; display: block; }
.ico .lbl { font: 700 13px/1.2 var(--text); padding: 1px 5px 2px; background: var(--paper); color: var(--ink); border: 1px solid transparent; white-space: nowrap; }
.ico:hover .lbl { border-color: var(--ink); }
.ico.sel .lbl, .ico:active .lbl { background: var(--ink); color: var(--paper); }
.ico.sel .pix { filter: brightness(.55) contrast(1.4); }
.ico:focus-visible { outline: 0; box-shadow: none; } .ico:focus-visible .lbl { outline: 2px solid var(--paper); outline-offset: 1px; background: var(--ink); color: var(--paper); }
.ico-req { position: fixed; right: 14px; bottom: 14px; }
.ico-req .ico { width: 108px; height: 98px; }
.ico-req .pix { width: 60px; height: 60px; }
.ico-req.hot .lbl { background: var(--sun); color: var(--ink); border-color: var(--ink); }
.ico-req.hot .pix { transform: translateY(-3px) rotate(-6deg); }
.ico-req .pix { transition: transform .35s var(--ease); }
.badge { position: absolute; top: 0; right: 18px; min-width: 22px; height: 22px; padding: 0 5px; display: grid; place-items: center; background: var(--sun); color: var(--ink); border: 1px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font: 700 13px/1 var(--text); }
.badge[hidden] { display: none; }
.badge.bump { animation: bump .5s var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.45); } 100% { transform: scale(1); } }
.ghost { position: fixed; z-index: 8000; width: 48px; height: 48px; pointer-events: none; opacity: .8; outline: 1px dotted var(--ink); outline-offset: 3px; }
.ghost svg { width: 100%; height: 100%; display: block; }
.zoomrect { position: fixed; z-index: 7000; border: 1px solid var(--ink); pointer-events: none; outline: 1px solid var(--paper); }

/* ---------- windows ---------- */
.win { position: absolute; z-index: 10; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--deep); min-width: 300px; min-height: 160px; max-width: calc(100vw - 16px); }
.win[hidden] { display: none; }
.bar { position: relative; flex: none; height: 25px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--ink); background: var(--paper); cursor: grab; touch-action: none; user-select: none; }
.bar:active { cursor: grabbing; }
.ttl { margin: 0; position: relative; z-index: 1; max-width: calc(100% - 70px); font: 600 18px/1 var(--disp); letter-spacing: .01em; color: var(--mute); }
.ttl span { display: block; padding: 2px 9px 3px; background: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.close { position: absolute; z-index: 2; left: 9px; top: 50%; width: 15px; height: 15px; margin-top: -8px; padding: 0; border: 1px solid var(--ink); background: var(--paper); cursor: pointer; visibility: hidden; }
.close:hover::after, .close:active::after { content: ''; position: absolute; inset: 2px; background:
  linear-gradient(45deg, transparent 43%, var(--ink) 43% 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, var(--ink) 43% 57%, transparent 57%); }
.win.front .bar { background: var(--sun); }
.win.front .bar::before { content: ''; position: absolute; left: 4px; right: 4px; top: 5px; bottom: 5px; background: repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 3px); opacity: .9; }
.win.front .ttl { color: var(--ink); } .win.front .ttl span { background: var(--sun); }
.win.front .close { visibility: visible; background: var(--sun); box-shadow: 0 0 0 2px var(--sun); }
.strip { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 14px; border-bottom: 1px solid var(--ink); background: var(--paper2); font: 700 13px/1.3 var(--text); color: var(--ink2); }
.strip > :first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.body { flex: 1; min-height: 0; overflow: auto; padding: 26px 30px 30px; scrollbar-width: auto; scrollbar-color: var(--ink) var(--paper2); }
.body::-webkit-scrollbar { width: 16px; height: 16px; }
.body::-webkit-scrollbar-track { border-left: 1px solid var(--ink); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='1' height='1' fill='%23B7BFBA'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23B7BFBA'/%3E%3C/svg%3E") var(--paper); }
.body::-webkit-scrollbar-thumb { background: var(--paper); border: 1px solid var(--ink); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--paper3); }
.grow { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; touch-action: none; background:
  linear-gradient(var(--ink), var(--ink)) 3px 3px / 7px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) 3px 3px / 1px 7px no-repeat,
  linear-gradient(var(--ink), var(--ink)) 6px 6px / 7px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) 6px 6px / 1px 7px no-repeat, var(--paper); border-left: 1px solid var(--ink); border-top: 1px solid var(--ink); }
.win:not(.front) .grow { opacity: .35; }

/* markers */
.tbc, .ind { display: inline-block; vertical-align: .15em; margin-left: 4px; padding: 2px 6px 2px; border: 1px dashed currentColor; font: 700 11px/1.1 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.ind { border-style: dotted; }
.strip .tbc { margin: 0; flex: none; color: var(--ink2); }
.mute { color: var(--mute); font-size: 14px; }

/* buttons: square, ink-bordered; the default one carries the thick ring */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 16px; border: 1px solid var(--ink); border-radius: 3px; background: var(--paper); color: var(--ink); font: 700 15px/1.1 var(--text); text-decoration: none; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); transition: transform .12s var(--ease), box-shadow .12s var(--ease); }
.btn:hover { background: var(--paper2); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); background: var(--ink); color: var(--paper); }
.btn.def { outline: 2px solid var(--ink); outline-offset: 2px; margin: 0 4px 0 3px; }
.btn.def:focus-visible { box-shadow: 2px 2px 0 var(--ink), 0 0 0 7px var(--sky1); }
.btn.added { background: var(--ink); color: var(--paper); }
.lnk { border: 0; padding: 0; background: none; font: 700 1em/1.3 var(--text); color: var(--sea3); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
.lnk:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 12px; margin-top: 24px; }
.hint { font: 700 13px/1.3 var(--text); color: var(--mute); }

/* ---------- documents (.txt) ---------- */
.txt .body { background:
  linear-gradient(var(--paper), var(--paper)) padding-box; }
.dk { margin: 0 0 6px; font: 700 13px/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.dh { margin: 0; font: 600 27px/1.12 var(--disp); letter-spacing: -.01em; max-width: 20ch; text-wrap: balance; }
.price { margin: 18px 0 22px; padding: 10px 0 14px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font: 700 60px/1 var(--text); letter-spacing: -.035em; font-variant-numeric: lining-nums; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.price .pf { font: 600 24px/1 var(--disp); letter-spacing: 0; color: var(--ink2); }
.price .tbc { align-self: center; letter-spacing: .06em; }
.price-s { font-size: 30px; letter-spacing: -.01em; line-height: 1.1; }
.facts { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 0; margin: 0; }
.facts dt, .facts dd { padding: 9px 0; border-bottom: 1px dotted var(--paper3); margin: 0; }
.facts dt { font: 700 12.5px/1.6 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); padding-right: 14px; padding-top: 11px; }
.facts dd { font-size: 16px; line-height: 1.5; max-width: 52ch; }

/* ---------- Leggimi ---------- */
.readme .body { padding: 30px 34px 34px; }
.big { margin: 0 0 18px; font: 700 52px/.98 var(--disp); letter-spacing: -.03em; }
.lede { margin: 0 0 22px; font-size: 17px; line-height: 1.55; max-width: 52ch; }
.rd-h { margin: 0 0 8px; font: 700 13px/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.steps { margin: 0 0 20px; padding: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding: 8px 0 8px 40px; border-bottom: 1px dotted var(--paper3); max-width: 56ch; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 7px; width: 26px; height: 26px; display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 700 15px/1 var(--text); }
.rd-note { margin: 0 0 14px; max-width: 56ch; color: var(--ink2); }
.compliance { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--ink); background: var(--paper2); box-shadow: 3px 3px 0 var(--paper3); max-width: 56ch; font-size: 15px; }
.rd-id { margin: 0; font: 700 13.5px/1.5 var(--text); color: var(--mute); }

/* ---------- Feste a bordo ---------- */
.seg { display: inline-flex; border: 1px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); margin-bottom: 18px; max-width: 100%; }
.seg button, .tabs button { border: 0; background: var(--paper); padding: 7px 14px; font: 700 15px/1.1 var(--text); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.party[data-v="celibato"] .v-nub, .party[data-v="nubilato"] .v-cel { display: none; }

/* ---------- Compravendita ---------- */
.cv-intro { margin: 0 0 20px; max-width: 56ch; }
.tabs { display: flex; gap: 0; padding-left: 10px; border-bottom: 1px solid var(--ink); }
.tabs button { position: relative; top: 1px; border: 1px solid var(--ink); border-bottom: 0; margin-right: -1px; padding: 8px 22px 7px; background: var(--paper2); color: var(--mute); }
.tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); padding-bottom: 8px; z-index: 1; }
.cv { border: 1px solid var(--ink); border-top: 0; padding: 18px 18px 20px; background: var(--paper); }
.trade[data-tab="cerco"] .cv-vendo, .trade[data-tab="vendo"] .cv-cerco { display: none; }
.cv-say { margin: 0 0 14px; font-weight: 700; max-width: 52ch; }
.cv-ok { font: 700 13px/1.3 var(--text); color: var(--sea3); }

/* ---------- fields ---------- */
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin-bottom: 12px; }
.row3 { display: grid; grid-template-columns: 0.7fr 0.7fr 1.2fr; gap: 12px 14px; margin-bottom: 12px; }
.row3 > * { min-width: 0; }
label > span:first-child, legend { display: block; margin-bottom: 4px; font: 700 12.5px/1.2 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
label.wide { display: block; margin-bottom: 12px; }
input[type="text"], input[type="tel"], select, textarea { width: 100%; min-height: 38px; padding: 7px 9px; border: 1px solid var(--ink); border-radius: 0; background: #FDFDFB; box-shadow: inset 2px 2px 0 var(--paper3); font: 16px/1.35 var(--text); color: var(--ink); }
textarea { resize: vertical; min-height: 76px; }
select { appearance: none; padding-right: 30px; background: #FDFDFB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h10v2H0zM2 2h6v2H2zM4 4h2v2H4z' fill='%23111417'/%3E%3C/svg%3E") no-repeat right 10px center / 10px 6px; }
input::placeholder, textarea::placeholder { color: #6C7579; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--sea2); outline-offset: 1px; box-shadow: inset 2px 2px 0 var(--paper3); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.radios label, .also label { display: inline-flex; align-items: center; gap: 7px; margin: 4px 14px 4px 0; font-size: 15px; cursor: pointer; }
input[type="radio"], input[type="checkbox"] { appearance: none; flex: none; width: 16px; height: 16px; margin: 0; border: 1px solid var(--ink); background: #FDFDFB; display: grid; place-items: center; cursor: pointer; }
input[type="radio"] { border-radius: 50%; }
input[type="radio"]:checked::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
input[type="checkbox"]:checked { background: #FDFDFB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h2v2H0zM8 0h2v2H8zM2 2h2v2H2zM6 2h2v2H6zM4 4h2v2H4zM2 6h2v2H2zM6 6h2v2H6zM0 8h2v2H0zM8 8h2v2H8z' fill='%23111417'/%3E%3C/svg%3E") no-repeat center / 10px 10px; }

/* ---------- Richiesta ---------- */
.req .strip > :last-child { text-align: right; }
.rq-h { margin: 0 0 10px; font: 700 13px/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.items { list-style: none; margin: 0 0 18px; padding: 0; border-top: 1px solid var(--ink); }
.items:empty { display: none; }
.items li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ink); animation: drop .45s var(--ease) both; }
.items .pix { width: 32px; height: 32px; }
.items .pix svg { width: 100%; height: 100%; display: block; }
.items b { display: block; font: 700 17px/1.2 var(--text); }
.items small { display: block; margin-top: 3px; font-size: 14px; color: var(--ink2); line-height: 1.35; }
.items small .tbc { vertical-align: 0; }
.items .rm { border: 1px solid var(--ink); background: var(--paper); padding: 4px 9px; font: 700 13px/1 var(--text); cursor: pointer; }
.items .rm:hover { background: var(--ink); color: var(--paper); }
@keyframes drop { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.empty { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; margin: 0 0 18px; border: 1px dashed var(--ink2); }
.empty .pix { width: 48px; height: 48px; } .empty .pix svg { width: 100%; height: 100%; display: block; }
.empty p { margin: 0; font-size: 15px; color: var(--ink2); }
.empty[hidden] { display: none; }
.also { margin: 0 0 16px; }
.preview { margin: 4px 0 6px; }
.preview summary { cursor: pointer; font: 700 13.5px/1.3 var(--text); color: var(--ink2); }
.preview pre { margin: 8px 0 0; padding: 12px; border: 1px solid var(--ink); background: var(--paper2); font: 13.5px/1.45 var(--text); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto; }
.err { margin: 12px 0 0; padding: 8px 12px 8px 36px; border: 1px solid var(--ink); background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath d='M7 1h2v2h1v2h1v2h1v2h1v2h1v2h1v2H1v-2h1v-2h1V9h1V7h1V5h1V3h1z' fill='%23111417'/%3E%3Cpath d='M7 5h2v5H7zM7 11h2v2H7z' fill='%23FF6A2C'/%3E%3C/svg%3E") no-repeat 10px center / 16px 16px; font: 700 14px/1.35 var(--text); }
.err[hidden] { display: none; }
.send { margin-top: 18px; margin-bottom: 12px; }
.req .lead-note { color: var(--ink2); }

/* ---------- Porto Badino (an info window) ---------- */
.info-top { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--ink); }
.big-pix { width: 64px; height: 64px; display: block; } .big-pix svg { width: 100%; height: 100%; display: block; }
.info-h { margin: 0; font: 700 36px/1 var(--disp); letter-spacing: -.02em; }
.info-s { margin: 6px 0 0; font-size: 15px; color: var(--ink2); }
.props { display: grid; grid-template-columns: 9em minmax(0, 1fr); margin: 0; }
.props dt, .props dd { margin: 0; padding: 9px 0; border-bottom: 1px dotted var(--paper3); }
.props dt { font: 700 12.5px/1.6 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); text-align: right; padding-right: 16px; padding-top: 11px; }
.props a { text-underline-offset: 3px; }

/* ---------- alert ---------- */
.alert { width: 470px; min-height: 0; }
.alert .body { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 18px; padding: 22px 22px 18px; overflow: visible; }
.al-ico { width: 48px; height: 48px; } .al-ico svg { width: 100%; height: 100%; display: block; }
.al-1 { margin: 0 0 6px; font: 600 21px/1.2 var(--disp); }
.al-2 { margin: 0; font-size: 15px; color: var(--ink2); }
.al-b { grid-column: 1 / -1; justify-content: flex-end; margin-top: 16px; }

/* ---------- legal pages: one long document window on the lagoon ---------- */
body.docbody { overflow: auto; height: auto; min-height: 100%; background: var(--sea2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%231F7486'/%3E%3Crect width='1' height='1' fill='%233A9EA9'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%233A9EA9'/%3E%3C/svg%3E") 0 0 / 4px 4px; padding: 0 0 48px; }
.dochead { position: sticky; top: 0; z-index: 50; height: 42px; display: flex; align-items: center; padding: 0 14px; background: var(--paper); border-bottom: 1px solid var(--ink); }
.dochead img { height: 30px; width: auto; display: block; }
.docwin { position: relative; max-width: 900px; margin: 36px auto 0; background: var(--paper); border: 1px solid var(--ink); box-shadow: 5px 5px 0 var(--deep); }
.docbar { position: relative; height: 25px; border-bottom: 1px solid var(--ink); background: var(--sun); }
.docbar::before { content: ''; position: absolute; left: 4px; right: 4px; top: 5px; bottom: 5px; background: repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 3px); opacity: .9; }
.docbar .close { visibility: visible; background: var(--sun); box-shadow: 0 0 0 2px var(--sun); display: block; }
.doc { padding: 30px 40px 40px; font-size: 16px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.doc > * { max-width: 72ch; }
.doc h1 { margin: 18px 0 12px; font: 700 44px/1 var(--disp); letter-spacing: -.02em; max-width: none; }
.doc h2 { margin: 30px 0 8px; padding-top: 12px; border-top: 1px solid var(--ink); font: 600 21px/1.2 var(--disp); }
.doc h3 { margin: 20px 0 6px; font: 700 18px/1.25 var(--text); }
.doc a { color: var(--sea3); text-underline-offset: 2px; }
.doc table { max-width: none; width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 12px 0; }
.doc th { text-align: left; font: 700 12.5px/1.3 var(--text); letter-spacing: .06em; text-transform: uppercase; background: var(--paper2); border-bottom: 1px solid var(--ink); padding: 8px; }
.doc td { padding: 8px; border-bottom: 1px dotted var(--paper3); vertical-align: top; }
.doc code { font-size: .92em; background: var(--paper2); padding: 0 4px; }
.doc .ck-page .st { border: 1px solid var(--ink); border-radius: 0; background: var(--paper2); }
.doc .ck-page button { border-radius: 3px; border: 1px solid var(--ink); background: var(--paper); box-shadow: 2px 2px 0 var(--ink); font: 700 15px/1.1 var(--text); padding: 8px 16px; }
.doc .ck-page button:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 760px) { .docwin { margin: 16px 8px 0; } .doc { padding: 20px 18px 28px; } .doc h1 { font-size: 34px; } }

/* ---------- motion ---------- */
.win.opening { animation: winin .32s var(--ease) both; }
@keyframes winin { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
html.js .icons li { animation: icoin .5s var(--ease) both; }
html.js .icons li:nth-child(1) { animation-delay: .05s } html.js .icons li:nth-child(2) { animation-delay: .1s } html.js .icons li:nth-child(3) { animation-delay: .15s } html.js .icons li:nth-child(4) { animation-delay: .2s }
html.js .icons li:nth-child(5) { animation-delay: .25s } html.js .icons li:nth-child(6) { animation-delay: .3s } html.js .icons li:nth-child(7) { animation-delay: .35s } html.js .icons li:nth-child(8) { animation-delay: .5s }
@keyframes icoin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html.static *, html.static *::before, html.static *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- small heights ---------- */
@media (max-height: 760px) and (min-width: 761px) {
  .icons { grid-template-rows: repeat(auto-fill, 76px); } .ico { height: 74px; gap: 3px; } .ico .pix { width: 40px; height: 40px; }
}

/* ---------- phone: the desktop becomes a stack ---------- */
@media (max-width: 760px) {
  body { overflow: auto; overflow-x: hidden; height: auto; }
  html, body { height: auto; }
  .mbar { font-size: 14px; }
  .mb-brand { padding: 0 8px 0 10px; } .mb-brand img { height: 17px; }
  .mb-b { padding: 0 8px; }
  .mb-call { display: none; }
  .clock .cd { display: none; }
  .lang { padding: 0 6px; }
  .clock { padding: 0 10px 0 4px; }
  .menu { position: fixed; left: 8px; right: 8px; min-width: 0; }
  .desk { position: relative; top: 0; padding: calc(var(--bar) + 12px) 8px 16px; overflow: visible; min-height: 100vh; display: flex; flex-direction: column; }
  .wall-name { position: relative; left: auto; bottom: auto; order: 9; margin: 22px 4px 8px; }
  .wall-name span { font-size: 17vw; }
  .wall-name small { font-size: 12px; margin-top: 10px; }
  .icons { position: relative; inset: auto; order: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row; direction: ltr; gap: 4px 0; margin-bottom: 12px; }
  .ico, .ico-req .ico { width: 100%; height: 76px; gap: 3px; }
  .ico .pix, .ico-req .pix { width: 40px; height: 40px; }
  .ico .lbl { font-size: 11.5px; padding: 1px 3px 2px; white-space: normal; text-align: center; max-width: 100%; }
  .ico-req { position: static; }
  .badge { right: calc(50% - 32px); }
  .win { position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; max-width: none; min-width: 0; order: 2; box-shadow: 3px 3px 0 var(--deep); margin-right: 3px; }
  .win:not(.front) { display: none; }
  .win .body { overflow: visible; padding: 20px 18px 22px; }
  .bar { cursor: default; }
  .grow { display: none; }
  .alert { width: auto; }
  .big { font-size: 40px; }
  .price { font-size: 48px; }
  .price-s { font-size: 26px; }
  .dh { font-size: 24px; }
  .facts, .props { grid-template-columns: minmax(0, 1fr); }
  .facts dt, .props dt { border-bottom: 0; padding-bottom: 0; text-align: left; }
  .row2, .row3 { grid-template-columns: minmax(0, 1fr); }
  .strip { padding: 5px 12px; font-size: 12px; }
  .desk-legal { position: relative; left: auto; bottom: auto; order: 10; max-width: none; margin: 8px 4px 0; }
  .ico-req.hot .pix { transform: none; }
  .hint { display: none; }
  .req .strip { flex-direction: column; align-items: flex-start; gap: 2px; } .req .strip > :last-child { text-align: left; }
}

/* == 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: dama-yachting */
.ck { left: auto; right: 140px; bottom: 22px; width: 440px; max-width: calc(100vw - 160px); padding: 0 0 18px; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); border-radius: 0; box-shadow: 4px 4px 0 var(--deep); font-family: var(--text); animation: ckin .35s var(--ease) both; }
.ck::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 25px; border-bottom: 1px solid var(--ink); background: repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 3px) 4px 5px / calc(100% - 8px) 15px no-repeat, var(--sun); }
.ck::after { content: ''; position: absolute; left: 20px; top: 46px; width: 44px; height: 44px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='7' y='1' width='2' height='1' fill='%23111417'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%23111417'/%3E%3Crect x='7' y='2' width='2' height='1' fill='%23FF6A2C'/%3E%3Crect x='9' y='2' width='1' height='1' fill='%23111417'/%3E%3Crect x='5' y='3' width='1' height='1' fill='%23111417'/%3E%3Crect x='6' y='3' width='4' height='1' fill='%23FF6A2C'/%3E%3Crect x='10' y='3' width='1' height='1' fill='%23111417'/%3E%3Crect x='5' y='4' width='1' height='1' fill='%23111417'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%23FF6A2C'/%3E%3Crect x='7' y='4' width='2' height='1' fill='%23111417'/%3E%3Crect x='9' y='4' width='1' height='1' fill='%23FF6A2C'/%3E%3Crect x='10' y='4' width='1' height='1' fill='%23111417'/%3E%3Crect x='4' y='5' width='1' height='1' fill='%23111417'/%3E%3Crect x='5' y='5' width='2' height='1' fill='%23FF6A2C'/%3E%3Crect x='7' y='5' width='2' height='1' fill='%23111417'/%3E%3Crect x='9' y='5' width='2' height='1' fill='%23FF6A2C'/%3E%3Crect x='11' y='5' width='1' height='1' fill='%23111417'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%23111417'/%3E%3Crect x='5' y='6' width='2' height='1' fill='%23FF6A2C'/%3E%3Crect x='7' y='6' width='2' height='1' fill='%23111417'/%3E%3Crect x='9' y='6' width='2' height='1' fill='%23FF6A2C'/%3E%3Crect x='11' y='6' width='1' height='1' fill='%23111417'/%3E%3Crect x='3' y='7' width='1' height='1' fill='%23111417'/%3E%3Crect x='4' y='7' width='3' height='1' fill='%23FF6A2C'/%3E%3Crect x='7' y='7' width='2' height='1' fill='%23111417'/%3E%3Crect x='9' y='7' width='3' height='1' fill='%23FF6A2C'/%3E%3Crect x='12' y='7' width='1' height='1' fill='%23111417'/%3E%3Crect x='3' y='8' width='1' height='1' fill='%23111417'/%3E%3Crect x='4' y='8' width='3' height='1' fill='%23FF6A2C'/%3E%3Crect x='7' y='8' width='2' height='1' fill='%23111417'/%3E%3Crect x='9' y='8' width='3' height='1' fill='%23FF6A2C'/%3E%3Crect x='12' y='8' width='1' height='1' fill='%23111417'/%3E%3Crect x='2' y='9' width='1' height='1' fill='%23111417'/%3E%3Crect x='3' y='9' width='4' height='1' fill='%23FF6A2C'/%3E%3Crect x='7' y='9' width='2' height='1' fill='%23111417'/%3E%3Crect x='9' y='9' width='4' height='1' fill='%23FF6A2C'/%3E%3Crect x='13' y='9' width='1' height='1' fill='%23111417'/%3E%3Crect x='2' y='10' width='1' height='1' fill='%23111417'/%3E%3Crect x='3' y='10' width='10' height='1' fill='%23FF6A2C'/%3E%3Crect x='13' y='10' width='1' height='1' fill='%23111417'/%3E%3Crect x='1' y='11' width='1' height='1' fill='%23111417'/%3E%3Crect x='2' y='11' width='5' height='1' fill='%23FF6A2C'/%3E%3Crect x='7' y='11' width='2' height='1' fill='%23111417'/%3E%3Crect x='9' y='11' width='5' height='1' fill='%23FF6A2C'/%3E%3Crect x='14' y='11' width='1' height='1' fill='%23111417'/%3E%3Crect x='1' y='12' width='1' height='1' fill='%23111417'/%3E%3Crect x='2' y='12' width='5' height='1' fill='%23FF6A2C'/%3E%3Crect x='7' y='12' width='2' height='1' fill='%23111417'/%3E%3Crect x='9' y='12' width='5' height='1' fill='%23FF6A2C'/%3E%3Crect x='14' y='12' width='1' height='1' fill='%23111417'/%3E%3Crect x='0' y='13' width='1' height='1' fill='%23111417'/%3E%3Crect x='1' y='13' width='14' height='1' fill='%23FF6A2C'/%3E%3Crect x='15' y='13' width='1' height='1' fill='%23111417'/%3E%3Crect x='0' y='14' width='16' height='1' fill='%23111417'/%3E%3C/svg%3E") center / 44px 44px no-repeat; image-rendering: pixelated; }
.ck .ck-k { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); z-index: 1; padding: 2px 9px 3px; background: var(--sun); color: var(--ink); font: 600 18px/1 var(--disp); white-space: nowrap; }
.ck .ck-t { padding: 44px 22px 0 84px; } .ck .ck-t b { display: block; font: 600 20px/1.2 var(--disp); color: var(--ink); }
.ck .ck-p { padding: 6px 22px 0 84px; font-size: 13.5px; line-height: 1.45; color: var(--ink2); }
.ck .b { margin: 16px 20px 0 84px; gap: 10px 12px; justify-content: flex-end; }
.ck button { min-height: 32px; padding: 5px 14px; border: 1px solid var(--ink); border-radius: 3px; background: var(--paper); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); font: 700 15px/1.1 var(--text); }
.ck button:hover { background: var(--paper2); } .ck button:active { transform: translate(2px, 2px); box-shadow: none; background: var(--ink); color: var(--paper); }
.ck .ok { order: 3; outline: 2px solid var(--ink); outline-offset: 2px; margin-left: 4px; } .ck .no { order: 2; }
.ck .more { order: 1; margin-right: auto; font: 700 13.5px/1.2 var(--text); color: var(--sea3); text-decoration: underline; text-underline-offset: 3px; }
@keyframes ckin { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
html.static .ck { animation: none; }
@media (max-width: 760px) { .ck { max-width: none; } .ck::after { left: 14px; width: 36px; height: 36px; background-size: 36px 36px; } .ck .ck-t, .ck .ck-p { padding-left: 64px; padding-right: 16px; } .ck .b { margin: 14px 14px 0 14px; } }
.docbody .ck { right: 20px; max-width: calc(100vw - 40px); }
/* seller block: in panel mode it is one more window of the desktop, opened from File > Titolare */
footer.seller.panel { background: var(--paper); color: var(--ink); border: 1px solid var(--ink); border-radius: 0; box-shadow: 5px 5px 0 var(--deep); padding: 46px 28px 24px; max-width: 900px; font-family: var(--text); font-size: 13.5px; z-index: 9990; }
footer.seller.panel::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 25px; border-bottom: 1px solid var(--ink); background: repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 3px) 30px 5px / calc(100% - 34px) 15px no-repeat, var(--sun); }
footer.seller.panel::after { content: 'Titolare del sito'; position: absolute; top: 2px; left: 50%; transform: translateX(-50%); padding: 2px 9px 3px; background: var(--sun); color: var(--ink); font: 600 18px/1 var(--disp); white-space: nowrap; }
html[lang="en"] footer.seller.panel::after { content: 'Seller'; }
footer.seller.panel .x { z-index: 2; top: 5px; left: 9px; right: auto; width: 15px; height: 15px; padding: 0; border: 1px solid var(--ink); background: var(--sun); box-shadow: 0 0 0 2px var(--sun); font-size: 0; line-height: 0; color: transparent; overflow: hidden; }
footer.seller.panel .x:hover { background: linear-gradient(45deg, transparent 43%, var(--ink) 43% 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, var(--ink) 43% 57%, transparent 57%), var(--sun); }
footer.seller b { opacity: 1; font: 700 12px/1.3 var(--text); letter-spacing: .1em; color: var(--mute); margin-bottom: 6px; }
footer.seller strong { font: 700 17px/1.2 var(--text); } footer.seller a { color: var(--sea3); text-underline-offset: 2px; }

@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; } }