/* Michelina Designs — survey theme.
   Matched against michelinadesigns.com on 2026-08-02, values read from the
   live page rather than eyeballed:

     masthead      #1F1F1F, white nav text, ACTIVE item = white pill/black text
     page          white, near-black body copy
     accent / CTA  #357E8D, white text, 4px radius, Roboto 700 16px,
                   SENTENCE CASE and no extra letter-spacing
     body type     Roboto
     display type  Raleway 700

   The first pass of this file assumed a dark site. It is not: the dark is a
   masthead band over a light, photography-forward body. Everything below is
   built on that. */

:root {
  --ink:       #1F1F1F;   /* masthead + headings */
  --body-fg:   #333333;
  --muted:     #767676;   /* passes 4.5:1 on white */
  --hairline:  #E2E2E2;
  --paper:     #FFFFFF;
  --paper-2:   #F4F4F4;
  --teal:      #357E8D;
  --teal-dark: #2C6A77;
  --teal-tint: #EAF1F3;

  --head: "Raleway", "Segoe UI", system-ui, sans-serif;
  --body: "Roboto", Arial, Helvetica, sans-serif;

  --gut: clamp(18px, 4.5vw, 56px);
  --shadow: 0 1px 2px rgba(31,31,31,.05), 0 10px 30px rgba(31,31,31,.07);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--body-fg);
  font: 400 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--teal); }

h1, h2, h3 {
  font-family: var(--head); font-weight: 700; color: var(--ink);
  line-height: 1.18; margin: 0 0 .5em;
}
h1 { font-size: clamp(28px, 4.4vw, 46px); }
h2 { font-size: clamp(21px, 2.6vw, 30px); }
h3 { font-size: 18px; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 var(--gut); }
.muted { color: var(--muted); }
.lede { font-size: 17px; color: var(--body-fg); max-width: 66ch; }

/* A max-width block inside a centred parent still sits flush LEFT unless it is
   given auto side margins: the TEXT centres within the block, but the block
   itself never moves. That is what made the hero paragraph read as off-centre
   against the headline above it. Scoped to the centred contexts - on the admin
   pages the same class sits under a left-aligned heading, where auto margins
   would push it out of line instead. */
.hero .lede, .result-head .lede { margin-left: auto; margin-right: auto; }

/* Let the browser even out the line lengths rather than breaking wherever the
   width happens to run out. 'balance' suits short headings, 'pretty' longer
   copy. Both are ignored by browsers that lack them, so nothing regresses. */
h1, h2, .hero h1 { text-wrap: balance; }
.lede, .step p, .style-card p { text-wrap: pretty; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

.eyebrow {
  font-family: var(--head); font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--teal);
  margin: 0 0 14px;
}

/* ---------- masthead ---------- */
/* The dark band stays full-bleed, but its CONTENTS align to the same 1140px
   column as the body. Without this the logo sat hard against the viewport edge
   while the page content was centred far inside it, so nothing on the page
   shared a vertical edge - very obvious on a wide monitor. */
.masthead { background: var(--ink); color: #fff; }
.masthead-top, .masthead-nav, footer.site > * {
  max-width: 1140px; margin-inline: auto;
}
.masthead-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 16px var(--gut) 12px; flex-wrap: wrap;
}
.lockup { text-decoration: none; color: #fff; display: inline-block; }
.lockup .name {
  font-family: var(--head); font-weight: 400; font-size: clamp(15px, 2.1vw, 22px);
  letter-spacing: .26em; text-transform: uppercase; white-space: nowrap;
}
.lockup .rule { height: 1px; background: rgba(255,255,255,.55); margin: 6px 0 5px; }
.lockup .sub {
  font-family: var(--head); font-size: 8.5px; letter-spacing: .28em;
  text-transform: uppercase; color: rgba(255,255,255,.72); text-align: center;
}
.masthead-contact { text-align: right; font-size: 13px; line-height: 1.5; }
.masthead-contact a { color: #fff; }
.masthead-contact .who { color: rgba(255,255,255,.8); font-weight: 700; }

.masthead-nav {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  /* Left gutter is short by the link's own 14px padding. The nav links have no
     background, so the eye aligns to their TEXT, not their box - and the box
     sitting on the spine left the text visibly indented against the wordmark
     above and the footer below. The right side is NOT adjusted: the CTA there
     is a filled button, whose background IS its visual edge, so its box is
     what should meet the spine. */
  padding: 0 var(--gut) 10px calc(var(--gut) - 14px);
}
.masthead-nav a {
  color: #fff; text-decoration: none; font-size: 15px; font-weight: 500;
  padding: 7px 14px; border-radius: 3px;
}
.masthead-nav a:hover { background: rgba(255,255,255,.12); }
/* The site marks the current page with a white pill and black text. */
.masthead-nav a.here { background: #fff; color: #000; }
.masthead-nav .spacer { flex: 1; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--body); font-weight: 700; font-size: 16px;
  padding: 11px 20px; border-radius: 4px; border: 1px solid var(--teal);
  background: var(--teal); color: #fff; text-decoration: none; cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.btn:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
.btn.ghost { background: #fff; color: var(--ink); border-color: #C9C9C9; }
.btn.ghost:hover { background: var(--paper-2); border-color: #A9A9A9; }
.btn.on-dark { border-color: var(--teal); }
.btn.sm { font-size: 13px; padding: 7px 13px; }

/* ---------- landing ---------- */
.hero { padding: clamp(38px, 6vw, 76px) 0 clamp(28px, 4vw, 46px); text-align: center; }
.hero h1 { margin-bottom: 14px; }
/* Narrower than the default 66ch. Centred copy needs a shorter measure or the
   rag gets ugly, and on a 1840px screen 66ch is a very long line to track. */
.hero .lede { max-width: 54ch; }
.hero .rule { width: 60px; height: 2px; background: var(--teal); margin: 20px auto 22px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.hero-note { margin-top: 18px; font-size: 13px; color: var(--muted); }

/* Three photo cards with an overlaid underlined label - the site's own motif. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; padding-bottom: 60px; }
.tile { position: relative; overflow: hidden; background: var(--paper-2); }
.tile img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .5s ease; }
.tile:hover img { transform: scale(1.035); }
.tile figcaption {
  position: absolute; inset: auto 0 0 0; padding: 16px 12px 20px;
  background: linear-gradient(transparent, rgba(0,0,0,.6));
  color: #fff; text-align: center;
  font-family: var(--head); font-weight: 700; font-size: 15px;
  letter-spacing: .12em; text-transform: uppercase;
}
.tile figcaption span { border-bottom: 2px solid #fff; padding-bottom: 3px; }
.tile-blank { display: grid; place-items: center; aspect-ratio: 4/3; color: var(--muted); font-size: 13px; }

/* Constrained and gutter-padded exactly like .wrap. Without this the steps ran
   the full width of the viewport with no side padding, so on a wide screen
   their text sat hard against the edge while the hero above was centred in
   1140px - the two blocks visibly failed to line up. */
.steps {
  max-width: 1140px; margin: 0 auto; padding: 8px var(--gut) 56px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 26px;
}
/* Centred, to match the hero above. The page previously mixed a centred hero
   with a left-aligned three-column grid directly beneath it - geometrically
   symmetric, but two competing alignments in one view, which reads as
   carelessness on a design studio's site. One axis for the whole page. */
.step { text-align: center; }
.step .n { font-family: var(--head); font-weight: 700; font-size: 12px; letter-spacing: .2em; color: var(--teal); display: block; margin-bottom: 8px; }
.step h3 { margin-bottom: 6px; }
/* Capped and auto-margined so each column's copy sits on the same axis as its
   heading - a max-width block in a centred parent stays flush left otherwise. */
.step p { margin: 0 auto; max-width: 32ch; font-size: 14.5px; color: var(--muted); }

/* ---------- survey ---------- */
.survey-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); }

.rail { display: flex; gap: 3px; height: 6px; background: var(--paper-2); }
.rail i { flex: 1 1 0; background: #E8E8E8; }
.rail i.done { background: var(--sw, var(--teal)); }

.progress-line {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px var(--gut); font-family: var(--head); font-weight: 700;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}

/* The card and the two choices are centred TOGETHER as one block, rather than
   the card centring in its own flex area and the buttons sitting below it.
   Centring them separately is what left a gap between photo and buttons; only
   pinning the card to the bottom instead just moved all the slack to the top.
   Grouping them keeps the pair tight and the whitespace balanced. */
.survey-main { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.card-stage { display: flex; align-items: center; justify-content: center; padding: 0 var(--gut); }
.photo-card {
  width: 100%; max-width: 920px; margin: 0; background: #fff;
  border: 1px solid var(--hairline); box-shadow: var(--shadow); overflow: hidden;
  animation: rise .32s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .photo-card { animation: none; } }
/* 46vh, not 50 - with the masthead, rail and choices all on screen, 50 pushed
   the buttons below the fold on a laptop. */
.photo-card img { width: 100%; height: clamp(240px, 46vh, 500px); object-fit: cover; }
.photo-meta {
  display: flex; justify-content: space-between; gap: 14px; padding: 13px 18px;
  font-family: var(--head); font-weight: 700; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  border-top: 1px solid var(--hairline);
}

.choices {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  max-width: 920px; width: 100%; margin: 10px auto 0; padding: 0 var(--gut) 20px;
}
/* Equal visual weight; separated by glyph and hover only, never red/green. */
.choice {
  --edge: #D6D6D6;
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 15px 18px; cursor: pointer; text-align: left;
  background: #fff; color: var(--ink); border: 1px solid var(--edge);
  border-radius: 4px; transition: border-color .2s, background .2s, box-shadow .2s;
}
.choice:hover, .choice:focus-visible {
  --edge: var(--teal); background: var(--teal-tint);
  box-shadow: var(--shadow); outline: none;
}
.choice:focus-visible { box-shadow: 0 0 0 3px rgba(53,126,141,.28); }

/* Monoline glyph in a thin ruled medallion - the luxury-hospitality idiom,
   not thumbs or hearts, which read consumer-app. */
.choice .glyph {
  flex: none; width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--edge);
  transition: border-color .2s, background .2s;
}
.choice:hover .glyph, .choice:focus-visible .glyph { border-color: var(--teal); background: #fff; }
.choice svg { width: 25px; height: 25px; color: #6A6A6A; transition: color .2s; }
.choice:hover svg, .choice:focus-visible svg { color: var(--teal); }

/* Dimensional glyphs carry their own fills, so the currentColor hover shift
   above does nothing for them. Give them a physical response instead - lift,
   scale, and a cast shadow that deepens - which suits a 3D object better than
   a colour change anyway. Larger than the flat glyphs because the shading
   needs room to read. */
.choice .g3d { width: 46px; height: 46px; overflow: visible;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), filter .22s ease; }
.choice:hover .g3d, .choice:focus-visible .g3d {
  transform: translateY(-1.5px) scale(1.07);
  filter: drop-shadow(0 3px 4px rgba(31,31,31,.22)) saturate(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .choice .g3d, .choice:hover .g3d { transition: none; transform: none; }
}

.choice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice-text b { font-family: var(--head); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.choice-text em { font-style: normal; font-size: 12px; color: var(--muted); }
.kbd { margin-left: auto; font-size: 15px; color: #B4B4B4; }
@media (max-width: 640px) { .kbd { display: none; } .choices { grid-template-columns: 1fr; } }

/* ---------- results ---------- */
.result-head { padding: clamp(34px, 5vw, 64px) 0 6px; text-align: center; }
.style-cards { display: grid; gap: 14px; }
.style-card {
  display: grid; grid-template-columns: 5px 1fr;
  background: #fff; border: 1px solid var(--hairline); box-shadow: var(--shadow);
}
.style-card .bar { background: var(--sw, var(--teal)); }
.style-card .inner { padding: 22px 24px; }
.style-card .rank { font-family: var(--head); font-weight: 700; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--teal); }
.style-card h2 { margin: 5px 0 8px; }
.style-card p { margin: 0; max-width: 70ch; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 12px; padding: 18px 0 56px; }
.grid figure { margin: 0; position: relative; background: var(--paper-2); }
.grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.grid figcaption {
  position: absolute; inset: auto 0 0 0; padding: 7px 9px;
  font-family: var(--head); font-weight: 700; font-size: 10px;
  letter-spacing: .13em; text-transform: uppercase; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
}

/* ---------- admin ---------- */
.panel { background: #fff; border: 1px solid var(--hairline); box-shadow: var(--shadow); padding: 22px; margin-bottom: 20px; }
.panel h2 { font-size: 18px; }
.field { display: block; margin-bottom: 13px; }
.field span { display: block; font-family: var(--head); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
input[type=text], input[type=password], input[type=file], select {
  width: 100%; padding: 10px 12px; background: #fff; color: var(--ink);
  border: 1px solid #CFCFCF; border-radius: 4px; font: inherit; font-size: 15px;
}
input:focus, select:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 13px; }

table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
th { font-family: var(--head); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
td img { width: 84px; height: 60px; object-fit: cover; }

.chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--head); font-weight: 700; font-size: 12px; }
.chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--sw); }
.pill { font-size: 10px; padding: 3px 9px; border: 1px solid #CFCFCF; color: var(--muted); border-radius: 999px; letter-spacing: .08em; text-transform: uppercase; }
.pill.on { color: var(--teal); border-color: var(--teal); background: var(--teal-tint); }

.flash { padding: 12px 15px; margin-bottom: 14px; border-left: 3px solid var(--teal); background: var(--teal-tint); font-size: 14.5px; }
.flash.error { border-color: #B4562A; background: #FBF0EA; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat { background: #fff; border: 1px solid var(--hairline); padding: 14px 16px; }
.stat b { display: block; font-family: var(--head); font-size: 26px; color: var(--ink); }
.stat span { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }

footer.site { background: var(--ink); color: rgba(255,255,255,.7); font-size: 13px; }
footer.site .inner { max-width: 1140px; margin-inline: auto; padding: 26px var(--gut); text-align: center; }
footer.site a { color: #fff; }

@media (max-width: 640px) {
  .masthead-contact { text-align: left; }
  td.hide-sm, th.hide-sm { display: none; }
}