/* ============================================================
   Diane Plays Golf — media kit
   Direction: "The Scorecard" — card stock, ruled columns,
   tabular figures, one pencil-red accent.
   Type: Palatino (display) / Public Sans (everything else)
   ============================================================ */

:root{
  /* stock */
  --stock:      #F2EFE4;
  --stock-hi:   #FBF9F2;
  --stock-lo:   #E7E2D2;
  /* ink */
  --ink:        #171C16;
  --ink-2:      #4A5347;
  --ink-3:      #7C8475;
  /* rules */
  --rule:       rgba(23, 28, 22, .17);
  --rule-soft:  rgba(23, 28, 22, .09);
  --rule-hard:  #171C16;
  /* accents */
  --moss:       #4E6B55;
  --fairway:    #2F4530;
  --pencil:     #8B3A2A;

  --serif: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua",
           "URW Palladio L", P052, Georgia, serif;
  --sans:  "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
           Helvetica, Arial, sans-serif;

  --gut: clamp(20px, 5vw, 56px);
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--stock-lo);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  font-weight:400;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* the card itself, sitting on the table */
.sheet{
  max-width:1160px;
  margin:0 auto;
  padding:0 var(--gut) 0;
  background:var(--stock);
  border-left:1px solid var(--rule-soft);
  border-right:1px solid var(--rule-soft);
  box-shadow:0 0 0 1px rgba(23,28,22,.03), 0 30px 90px rgba(47,40,28,.10);
}

.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--stock); padding:10px 16px; z-index:10;
  font-size:.85rem; text-decoration:none;
}
.skip:focus{ left:8px; top:8px }

a{ color:inherit }
:focus-visible{ outline:2px solid var(--pencil); outline-offset:3px }

/* ---------- shared type ---------- */
h1,h2,h3,h4{ margin:0; font-family:var(--serif); font-weight:700; text-wrap:balance }

.eyebrow{
  margin:0;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--pencil);
}

.rule-double{
  height:5px;
  border-top:2px solid var(--rule-hard);
  border-bottom:1px solid var(--rule-hard);
}

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead{ padding-top:clamp(36px, 6vw, 68px) }

.masthead-row{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  padding-bottom:18px;
}

.wordmark{ display:flex; align-items:flex-start; gap:16px }

.pin{
  flex:none;
  width:2px;
  height:clamp(52px, 8vw, 84px);
  background:var(--ink);
  position:relative;
  margin-top:6px;
}
.pin::after{
  content:"";
  position:absolute; top:0; left:2px;
  border-left:16px solid var(--pencil);
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
}

.wordmark h1{
  font-size:clamp(2.7rem, 8.5vw, 5.1rem);
  line-height:.92;
  letter-spacing:-.015em;
}
.wordmark h1 em{
  display:block;
  font-style:italic;
  font-weight:400;
  color:var(--moss);
  font-size:.62em;
  letter-spacing:0;
  margin-top:.06em;
}

.stub{
  margin:0;
  display:flex;
  gap:0;
  flex-wrap:wrap;
  border-left:1px solid var(--rule);
}
.stub > div{ padding:2px 20px; border-right:1px solid var(--rule) }
.stub dt{
  font-size:.6rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.stub dd{
  margin:2px 0 0;
  font-family:var(--serif);
  font-size:1rem;
  line-height:1.35;
}

/* ============================================================
   PLAYER
   ============================================================ */
.player{
  display:grid;
  grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(28px, 5vw, 64px);
  align-items:start;
  padding:clamp(38px, 5.5vw, 66px) 0;
  border-bottom:1px solid var(--rule);
}

.portrait{ margin:0 }
.portrait img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:50% 22%;
  border:1px solid var(--rule-hard);
  filter:saturate(.92);
}
.portrait figcaption{
  margin-top:10px;
  font-size:.64rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-3);
}

.player-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:18px }

.statement{
  font-size:clamp(2rem, 4.4vw, 3.1rem);
  line-height:1.05;
  letter-spacing:-.015em;
  margin-top:2px;
}
.lede{
  margin:0;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.1rem, 2vw, 1.32rem);
  line-height:1.45;
  color:var(--moss);
  max-width:36ch;
}
.bio{ margin:0; max-width:60ch; color:var(--ink-2) }

.player-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:6px }

.btn{
  display:inline-block;
  background:var(--ink);
  color:var(--stock);
  text-decoration:none;
  font-size:.78rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  padding:14px 26px;
  transition:background .18s ease, transform .18s ease;
}
.btn:hover{ background:var(--pencil); transform:translateY(-1px) }
.btn-lg{ padding:17px 34px; font-size:.86rem; letter-spacing:.1em; text-transform:none;
         font-family:var(--serif); font-weight:700 }

.stamp{
  font-size:.65rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  color:var(--pencil);
  border:1.5px solid var(--pencil);
  padding:8px 14px;
  transform:rotate(-1.4deg);
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{
  padding:clamp(40px, 5.5vw, 68px) 0;
  border-bottom:1px solid var(--rule);
}
.section-head{ margin-bottom:clamp(24px, 3vw, 36px) }
.section-head h3{
  font-size:clamp(1.5rem, 3vw, 2.05rem);
  line-height:1.15;
  letter-spacing:-.012em;
  margin-top:8px;
}
.section-note{
  margin:10px 0 0;
  font-size:.94rem;
  color:var(--ink-3);
  max-width:56ch;
}

/* ---------- the scorecard table ---------- */
.card-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch }

table.scorecard{
  width:100%;
  min-width:620px;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
table.scorecard th,
table.scorecard td{
  text-align:left;
  padding:15px 18px;
  border-bottom:1px solid var(--rule);
  border-right:1px solid var(--rule-soft);
  color:var(--ink);
  vertical-align:baseline;
}
table.scorecard th:last-child,
table.scorecard td:last-child{ border-right:0 }
table.scorecard thead th{
  font-family:var(--sans);
  font-size:.62rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-3);
  border-bottom:2px solid var(--rule-hard);
  padding-top:0;
}
table.scorecard tbody th{
  font-family:var(--serif); font-weight:700; font-size:1.12rem;
}
table.scorecard tbody td a{
  color:var(--moss);
  text-decoration:none;
  border-bottom:1px solid rgba(78,107,85,.4);
  font-size:.94rem;
}
table.scorecard tbody td a:hover{ color:var(--pencil); border-bottom-color:var(--pencil) }
table.scorecard .n{ text-align:right; white-space:nowrap }
table.scorecard th.n{ text-align:right }
table.scorecard .big{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.6rem;
  line-height:1.1;
  letter-spacing:-.01em;
}
table.scorecard .role{
  font-size:.82rem;
  color:var(--ink-3);
  width:27%;
}
table.scorecard tfoot th,
table.scorecard tfoot td{
  border-top:2px solid var(--rule-hard);
  border-bottom:0;
  padding-top:16px;
  color:var(--pencil);
}
table.scorecard tfoot th{ font-family:var(--serif); font-weight:700; font-size:1.12rem }
table.scorecard tfoot td:first-of-type{ font-size:.88rem }
table.scorecard tfoot .role{ color:var(--ink-3) }

/* ---------- highlight stats ---------- */
.holes{
  list-style:none;
  margin:clamp(28px, 3.5vw, 40px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  border-top:1px solid var(--rule);
}
.holes li{
  padding:22px 22px 20px;
  border-right:1px solid var(--rule-soft);
  display:flex;
  flex-direction:column;
  gap:3px;
}
.holes li:first-child{ padding-left:0 }
.holes li:last-child{ border-right:0 }
.hole-k{
  font-size:.6rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.hole-v{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.9rem, 3.6vw, 2.5rem);
  line-height:1.05;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.hole-n{ font-size:.76rem; color:var(--ink-3); line-height:1.4 }

/* ---------- featured work ---------- */
.work{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(14px, 2vw, 24px);
}
.work li{ display:flex; flex-direction:column; gap:10px }
.work a{
  position:relative;
  display:block;
  border:1px solid var(--rule-hard);
  overflow:hidden;
  background:var(--stock-lo);
  transition:transform .2s ease, box-shadow .2s ease;
}
.work a:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(47,40,28,.18) }
.work img{
  display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:cover;
}
.work-meta{
  position:absolute; left:0; bottom:0;
  background:var(--ink);
  color:var(--stock);
  font-size:.64rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 10px;
}
.work-meta b{ font-weight:700; font-variant-numeric:tabular-nums }
.work-title{
  margin:0;
  font-size:.83rem;
  line-height:1.4;
  color:var(--ink-2);
}

/* ---------- pillars ---------- */
.pillars{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  border-top:1px solid var(--rule);
}
.pillars li{
  padding:26px 24px 8px;
  border-right:1px solid var(--rule-soft);
  display:flex; flex-direction:column; gap:9px;
}
.pillars li:first-child{ padding-left:0 }
.pillars li:last-child{ border-right:0 }
.pill-n{
  font-family:var(--serif);
  font-size:.95rem;
  color:var(--pencil);
  font-variant-numeric:tabular-nums;
}
.pillars h4{ font-size:1.24rem; line-height:1.2 }
.pillars p{ margin:0; font-size:.9rem; color:var(--ink-2); line-height:1.55 }
.pillars em{ font-style:italic; color:var(--moss) }

/* ---------- the read ---------- */
.why{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(24px, 3.5vw, 48px);
}
.why > div{ border-top:2px solid var(--rule-hard); padding-top:16px }
.why h4{ font-size:1.2rem; line-height:1.25; margin-bottom:8px }
.why p{ margin:0; font-size:.92rem; color:var(--ink-2) }

/* ---------- brands ---------- */
.brands{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  border-top:1px solid var(--rule);
  border-left:1px solid var(--rule-soft);
}
.brands li{
  padding:26px 20px;
  border-right:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule-soft);
  font-family:var(--serif);
  font-size:1.08rem;
  color:var(--ink-2);
  text-align:center;
}

/* ---------- packages ---------- */
.packages{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(16px, 2.4vw, 28px);
}
.pkg{
  background:var(--stock-hi);
  border:1px solid var(--rule);
  padding:26px 24px 28px;
  display:flex; flex-direction:column; gap:12px;
}
.pkg.feature{ border:1.5px solid var(--pencil); background:#FDF7F1 }
.pkg-k{
  margin:0;
  font-size:.6rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3);
}
.pkg.feature .pkg-k{ color:var(--pencil) }
.pkg h4{ font-size:1.42rem; line-height:1.15 }
.pkg-d{ margin:0; font-size:.9rem; color:var(--ink-2) }
.pkg ul{
  list-style:none; margin:6px 0 0; padding:0;
  display:flex; flex-direction:column; gap:0;
  border-top:1px solid var(--rule-soft);
}
.pkg ul li{
  padding:9px 0 9px 18px;
  border-bottom:1px solid var(--rule-soft);
  font-size:.85rem;
  color:var(--ink-2);
  position:relative;
}
.pkg ul li::before{
  content:"";
  position:absolute; left:2px; top:1.05em;
  width:6px; height:6px;
  border:1px solid var(--moss);
  border-radius:50%;
}
.pkg ul li:last-child{ border-bottom:0 }

/* ---------- contact ---------- */
.contact{ border-bottom:0; padding-bottom:clamp(46px, 6vw, 76px) }
.contact-inner{
  background:var(--fairway);
  color:#EDEBDF;
  padding:clamp(36px, 5.5vw, 66px) clamp(26px, 5vw, 60px);
  display:flex; flex-direction:column; align-items:flex-start; gap:16px;
}
.contact-inner .eyebrow{ color:#B7C9AF }
.contact-h{
  font-size:clamp(1.9rem, 4.2vw, 3rem);
  line-height:1.05;
  letter-spacing:-.015em;
  color:#F5F3E7;
  max-width:16ch;
}
.contact-p{ margin:0; max-width:46ch; color:#CFD4C4; font-size:.98rem }
.contact .btn-lg{
  background:#F2EFE4;
  color:var(--fairway);
  margin-top:8px;
}
.contact .btn-lg:hover{ background:#fff; color:var(--pencil) }
.socials{
  list-style:none; margin:14px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid rgba(237,235,223,.25);
  width:100%;
}
.socials li{ padding-right:0 }
.socials a{
  display:inline-block;
  padding:14px 26px 0 0;
  color:#CFD4C4;
  text-decoration:none;
  font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
}
.socials a:hover{ color:#F5F3E7 }

/* ---------- footer ---------- */
.foot{ padding-bottom:clamp(28px, 4vw, 46px) }
.foot-row{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  padding-top:14px;
  font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .work{ grid-template-columns:repeat(3, minmax(0,1fr)) }
  .pillars,
  .holes{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .pillars li,
  .holes li{ border-bottom:1px solid var(--rule-soft) }
  .pillars li:nth-child(2n),
  .holes li:nth-child(2n){ border-right:0 }
  .pillars li:nth-child(2n+1),
  .holes li:nth-child(2n+1){ padding-left:0 }
  .why{ grid-template-columns:1fr; gap:26px }
  .packages{ grid-template-columns:1fr }
}

@media (max-width:760px){
  body{ font-size:16px }
  .player{ grid-template-columns:1fr }
  .portrait{ max-width:300px }
  .portrait img{ aspect-ratio:1/1 }
  .stub{ border-left:0 }
  .stub > div{ padding-left:0; padding-right:18px; border-right:1px solid var(--rule) }
  .stub > div:last-child{ border-right:0 }
  .work{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .brands{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .socials a{ padding-right:20px }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
}

/* ============================================================
   PRINT  →  ⌘P gives a clean PDF of the same design
   ============================================================ */
@media print{
  @page{ margin:14mm }
  body{ background:#fff; font-size:10.5pt }
  .sheet{ box-shadow:none; border:0; max-width:none; padding:0 }
  .skip, .print-hint{ display:none }
  .section, .player{ break-inside:avoid; page-break-inside:avoid }
  .work{ grid-template-columns:repeat(4, minmax(0,1fr)) }
  .work a:hover{ transform:none; box-shadow:none }
  .contact-inner{ background:#fff !important; color:#171C16 !important;
                  border:2px solid #171C16 }
  .contact-h{ color:#171C16 !important }
  .contact-p, .contact-inner .eyebrow, .socials a{ color:#4A5347 !important }
  .contact .btn-lg{ background:#fff; color:#171C16; border:1px solid #171C16 }
  .btn{ background:#fff !important; color:#171C16 !important; border:1px solid #171C16 }
  a{ text-decoration:none }
}