/*
 * The Skiathos Guide — the business owners' half of the site.
 *
 * Scoped entirely under body.biz so nothing here can reach a visitor page.
 * Same six colours and same three faces as the rest of the site. The mood is
 * deliberately different: warm sand instead of photographs, a tighter measure,
 * more words per screen, and almost no motion. A visitor is being persuaded.
 * An owner is trying to get something done before service.
 *
 * Surfaces are declared as local tokens because the shared dark-mode blocks
 * remap --bg and --text but leave --sandy and --wash at their light values.
 * Declaring our own means this area survives the toggle without touching
 * style.css, which belongs to someone else.
 */

body.biz {
  --biz-ground:  color-mix(in srgb, var(--sandy) 46%, var(--wash));
  --biz-panel:   #fffdf8;
  --biz-band:    color-mix(in srgb, var(--sandy) 82%, var(--wash));
  --biz-ink:     var(--deep);
  --biz-soft:    #4d6b73;
  --biz-line:    color-mix(in srgb, var(--deep) 15%, transparent);
  --biz-quiet:   color-mix(in srgb, var(--sandy) 30%, var(--wash));

  background: var(--biz-ground);
  color: var(--biz-ink);
  font-size: 16.5px;
  line-height: 1.62;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.biz {
    --biz-ground: #07222a;
    --biz-panel:  #0c2f39;
    --biz-band:   #0a2932;
    --biz-ink:    #eef4f2;
    --biz-soft:   #9fbcbd;
    --biz-line:   #16404a;
    --biz-quiet:  #092630;
  }
}
:root[data-theme="dark"] body.biz {
  --biz-ground: #07222a;
  --biz-panel:  #0c2f39;
  --biz-band:   #0a2932;
  --biz-ink:    #eef4f2;
  --biz-soft:   #9fbcbd;
  --biz-line:   #16404a;
  --biz-quiet:  #092630;
}

/* ------------------------------------------------------ page rhythm
   Tighter than the visitor side. The alternating tint the visitor pages use
   is switched off and replaced with two named surfaces, so the order of the
   sections in the HTML can change without the colours shuffling. */

body.biz section {
  padding: 58px 0;
  background: transparent;
  scroll-margin-top: 76px;
}
body.biz section.bizband { background: var(--biz-band); }
body.biz section.bizquiet { background: var(--biz-quiet); }

body.biz .wrap { max-width: 1080px; }

body.biz .section-head { margin-bottom: 24px; max-width: 68ch; }
body.biz .section-head h2 {
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--biz-ink);
  margin: 0 0 10px;
}
body.biz .section-head > p {
  color: var(--biz-soft);
  font-size: .97rem;
  margin: 0;
  max-width: 66ch;
}

/* No blanket rule for `p` or `a` here on purpose. Body text inherits
   --biz-ink from body.biz already, and the shared `a` colour is --aegean,
   which the site's own dark blocks remap to the shallow blue. A blanket rule
   would beat every component below it on specificity and would also reach
   into the shared footer and paint its links the colour of its background. */

/* ------------------------------------------------ the heading block
   No photograph. A calm sand panel and the numbers, nothing moving. */

.bizhead {
  background: var(--biz-band);
  border-bottom: 1px solid var(--biz-line);
  padding: 62px 0 46px;
}
.bizhead .kicker {
  color: var(--bougie);
  margin: 0 0 16px;
  opacity: 1;
}
.bizhead h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 4.6vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  color: var(--biz-ink);
  margin: 0 0 18px;
  max-width: 20ch;
}
.bizhead .stand {
  font-size: 1.12rem;
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 0 12px;
}
.bizhead .stand-2 {
  color: var(--biz-soft);
  max-width: 62ch;
  margin: 0;
  font-size: .99rem;
}

/* The facts row. Mono, because these are measurements. */
.bizfacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 1px;
  margin: 34px 0 20px;
  background: var(--biz-line);
  border: 1px solid var(--biz-line);
  border-radius: 16px;
  overflow: hidden;
}
.bizfacts div {
  background: var(--biz-band);
  padding: 18px 18px 16px;
}
.bizfacts b {
  display: block;
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--biz-ink);
  letter-spacing: -.03em;
  margin-bottom: 4px;
}
.bizfacts span {
  font-size: .82rem;
  color: var(--biz-soft);
  line-height: 1.4;
  display: block;
}

.dateline {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--biz-soft);
  margin: 0;
}

/* ------------------------------------------------------------- prose */

body.biz .lede {
  font-size: 1.04rem;
  max-width: 66ch;
}
body.biz .cols2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 28px 44px;
  margin-top: 8px;
}
body.biz .cols2 h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--biz-ink);
  margin: 0 0 6px;
}
body.biz .cols2 p {
  margin: 0;
  color: var(--biz-soft);
  font-size: .96rem;
  max-width: 52ch;
}

/* A stated limit, an admission, a piece of small print. */
.caveat {
  border-left: 2px solid var(--bougie);
  padding: 2px 0 2px 16px;
  margin: 28px 0 0;
  font-size: .9rem;
  color: var(--biz-soft);
  max-width: 68ch;
}

/* ------------------------------------------------------- guide cards */

.bizcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 16px;
}
.bizcard {
  display: block;
  background: var(--biz-panel);
  border: 1px solid var(--biz-line);
  border-radius: 18px;
  padding: 22px 22px 20px;
  text-decoration: none;
}
a.bizcard {
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
a.bizcard:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--deep) 38%, transparent);
}
a.bizcard:focus-visible { outline: 2px solid var(--bougie); outline-offset: 3px; }

.bizcard h3 {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--biz-ink);
  margin: 0 0 8px;
  line-height: 1.22;
}
.bizcard p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--biz-soft);
}
.bizcard .tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  margin-bottom: 12px;
  border: 1px solid var(--biz-line);
  color: var(--biz-soft);
}
a.bizcard .tag {
  border-color: transparent;
  background: var(--deep);
  color: var(--wash);
}

/* Not written yet. It says so, and it is not a link, so nothing dead-ends. */
.bizcard.soon { background: transparent; border-style: dashed; }
.bizcard.soon h3 { color: var(--biz-soft); }

/* -------------------------------------------------- the season table */

body.biz .tablewrap { overflow-x: auto; }
.biztable {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  min-width: 620px;
}
.biztable th,
.biztable td {
  text-align: left;
  padding: 9px 14px;
  border-bottom: 1px solid var(--biz-line);
}
.biztable thead th {
  font-family: var(--font-mono);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--biz-soft);
  border-bottom: 2px solid var(--biz-ink);
  font-weight: 500;
}
.biztable tbody th {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--biz-ink);
  white-space: nowrap;
}
.biztable td.num {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-size: .82rem;
  color: var(--biz-ink);
  white-space: nowrap;
}
.biztable td { color: var(--biz-soft); }
.biztable tbody tr.peak th,
.biztable tbody tr.peak td.num { color: var(--bougie); }

/* The bus timetable is the season's clock. Mono, four lines, no decoration. */
.clock {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  max-width: 72ch;
}
.clock li {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 6px 22px;
  padding: 12px 0;
  border-top: 1px solid var(--biz-line);
  font-size: .94rem;
  color: var(--biz-soft);
}
.clock li:last-child { border-bottom: 1px solid var(--biz-line); }
.clock b {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--biz-ink);
  font-weight: 500;
  padding-top: 2px;
}

/* ------------------------------------------------------- checklists */

.checklist {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  max-width: 78ch;
}
.checklist li {
  counter-increment: step;
  position: relative;
  padding: 18px 96px 18px 52px;
  border-top: 1px solid var(--biz-line);
}
.checklist li:last-child { border-bottom: 1px solid var(--biz-line); }
.checklist li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 20px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--deep);
  color: var(--wash);
  font-family: var(--font-mono);
  font-size: .74rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.checklist h3 {
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--biz-ink);
  margin: 0 0 4px;
}
.checklist p {
  margin: 0;
  font-size: .93rem;
  color: var(--biz-soft);
  max-width: 62ch;
}
.checklist .t {
  position: absolute;
  right: 0;
  top: 20px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--biz-soft);
}

/* ---------------------------------------------------------- contact
   There is no server behind this site, so there is no form. A message is the
   whole mechanism and the page says so. */

.bizcontact {
  background: var(--deep);
  color: var(--wash);
  border-radius: 20px;
  padding: 40px 38px 34px;
}
.bizcontact h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: #fff;
  margin: 0 0 12px;
}
body.biz .bizcontact p {
  color: rgba(255, 255, 255, .84);
  max-width: 62ch;
  font-size: .98rem;
}
body.biz .bizcontact p.small {
  color: rgba(255, 255, 255, .6);
  font-size: .86rem;
  margin-bottom: 0;
}
.contactrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 24px 0 22px;
}
.msgbtn {
  display: inline-flex;
  align-items: center;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--bougie);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform .3s var(--ease);
}
.msgbtn:hover { transform: translateY(-2px); }
.msgbtn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.contactrow .num {
  font-family: var(--font-mono);
  font-size: .84rem;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .78);
}
body.biz .bizcontact a { color: var(--shallow); }
body.biz .bizcontact a.msgbtn { color: #fff; }

/* --------------------------------------------------------- the small print */

.plainlist { margin: 0; padding-left: 20px; max-width: 68ch; }
.plainlist li { margin-bottom: 8px; color: var(--biz-soft); font-size: .95rem; }
.plainlist li b { color: var(--biz-ink); font-weight: 600; }

/* ------------------------------------------------------------- motion
   An owner is here to work. The reveal stays, because it stops a long page
   arriving as one slab, but it is short and it barely travels. */

body.biz .rv {
  transform: translateY(6px);
  transition-duration: .3s;
}
body.biz .coastrail { display: none; }
body.biz .card:hover { transform: none; }

@media (max-width: 720px) {
  .bizhead { padding: 42px 0 34px; }
  .bizcontact { padding: 30px 22px 26px; }
  .clock li { grid-template-columns: 1fr; }
  .checklist li { padding: 18px 0 18px 44px; }
  .checklist .t { position: static; display: block; margin-top: 6px; }
}

/* The hub's guide cards and bullet list. */
.bizcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.bizcard {
  display: block; text-decoration: none; color: inherit;
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 24px 22px;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.bizcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--shallow); }
.bizcard .tag {
  display: inline-block; font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--bougie); margin-bottom: 12px;
}
.bizcard h3 { margin: 0 0 8px; font-size: 1.3rem; font-weight: 600; }
.bizcard p { margin: 0 0 14px; color: var(--text-soft); font-size: .95rem; }
.bizcard .go { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pine); }
.bizcard.soon { opacity: .6; }

.bizbullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 74ch; }
.bizbullets li { padding-left: 26px; position: relative; color: var(--text-soft); }
.bizbullets li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--shallow);
}
.bizbullets strong { color: var(--text); font-weight: 600; }