/* Kylee Trunck — portfolio. Shared base styles.
   Page layout/typography values live inline in each page (they are the
   design spec, carried verbatim from the design handoff). This file holds
   only what inline styles cannot express: base rules, hover states, and
   the 760px responsive behavior. */

/* Self-hosted variable fonts (latin subset, from Google Fonts) */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 500;font-display:swap;src:url(/fonts/cormorant-garamond.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 400;font-display:swap;src:url(/fonts/cormorant-garamond-italic.woff2) format('woff2')}
@font-face{font-family:'Karla';font-style:normal;font-weight:300 500;font-display:swap;src:url(/fonts/karla.woff2) format('woff2')}

body{margin:0;background:#ecebe7;font-family:'Karla',sans-serif}
a{color:inherit;text-decoration:none}
a:hover{color:#6e655a}

img{display:block}
.cover{object-fit:cover}

/* Whole-card links dim slightly on hover */
.card:hover{opacity:.92}

/* Outlined buttons on the dark bands invert on hover */
.btn-invert:hover{background:#ecebe7;color:#1f1e1b}

@media (max-width:760px){
  .mq-nav{display:flex !important;flex-wrap:wrap;justify-content:center;gap:10px 22px;padding:18px 20px !important;text-align:center}
  .mq-1col{grid-template-columns:1fr !important;gap:32px !important}
  .mq-label{grid-template-columns:1fr !important;gap:14px !important}
  .mq-tight{grid-template-columns:1fr !important}
  .mq-row{flex-wrap:wrap !important;row-gap:10px}
  .mq-foot{flex-direction:column !important;gap:20px !important;align-items:flex-start !important}
  .mq-collage{grid-template-columns:1fr !important;grid-template-rows:none !important}
  .mq-collage > div{grid-column:auto !important;grid-row:auto !important;height:62vw}
  .mq-phones{flex-wrap:wrap !important}
  .mq-phones > *{flex:1 1 220px !important;width:auto !important}
  .mq-img{height:62vw !important}
}